🐾

【学習ログ】Next.jsプロジェクトのリファクタリング

2022/07/16に公開約900字

基本的な考え方

  • リファクタリングは超重要
  • 最初から過度に最適化を目指さず、作りながら直していく
  • データと処理を分けると考えるとうまくいく

ディレクトリ構成

srcフォルダを作成して、componentsとpagesとstyleフォルダを入れる
あとは作業しながらわかりやすいように作っていく

ディレクトリ構成
.
├── .next
│   └── cache...
├── node_modules
│   └── @babel...
├── src
│   ├── components
│   ├── pages
│   └── styles
├── public
│   └── favicon.ico...
├── eslint.json
├── next.config.js
├── package.json
└── yarn.lock

jsとjsxについて

React関連ならjsxにした方が入力時に補完してくれるのでよい

絶対パスと相対パス

絶対パスにしておいた方が、ディレクトリ構造が複雑になった時にわかりやすい

  1. jsconfig.jsonファイルを作るとそのファイルがある場所がルートになる
  2. VScordを設定する(入力時の補完で相対パスが出てくるのをキャンセル)
    Import Module Specifier をnon-relativeにする

メソッドを書く場所

  • onClickなどの中に書くのは×
  • ややこしくならないなら、コンポーネントの外に書くのがよい
  • コンポーネント内の変数を使うなどで書き方がややこしくなるならコンポーネントの中に書く
    ただし、コンポーネントの再レンダリング時に再生成されることになるため、パフォーマンスが落ちる
    これはuseCallBackを使って解決する
const handleClink = useCallBack(メソッド,[]);

Discussion

ログインするとコメントできます