プロジェクト2日目

開発履歴

DynamicIconタスク
->1回目の完了

トラブルシューティング

userEffectを2回レンダリングする問題

プロジェクトに必要なReduxやAPI読み込みなどを学習するために、コードを記述しており、特定のコンポーネント内でAPI呼び出しのために記述されたuserEffectコードが2回呼び出され、不要な再レンダリングが発生している.
「useEffect renders double」で単語googlingを検索すると、React.Strictmodeの意図した動作であることがわかりました.CRAを用いて反応項目を生成する際,index.js内にアプリケーションコンポーネントが組み込まれたコードがReact.Strictmodeコンポーネントに囲まれていることしか知らず,この機会にReact.Stricmodeを学習した.
△公式文書にはもちろん関連する部分がありますが、正式文書をよく読むことが大切だと改めて学びました.
Strictmodeコンポーネントは、サブコンポーネントをチェックし、推奨されないコードまたは予想される副作用をエラーメッセージとして表示します.
Strictmodeは開発モードでのみ有効であり、本番構築には何の影響もありません.
さらに、Strictmodeを使用する構成部品は、潜在的な問題を検出する際に2回レンダリングされます.
->したがってuserEffectを使用して2回のAPI呼び出しを行います.

学習すべき部分

propTypes

親から受け取ったpropsのタイプをチェックする機能です.
サブコンポーネントに渡されたpropが指定したタイプと一致しない場合、コンソールにエラーが表示されます.
これは性能上の理由で,開発モードでしか確認できない.
特に説明がない場合、特定のpropは、渡さなければならない値ではなく、親コンポーネントから渡される値ではありません.ただし、isRequiredが設定されている場合は、そのアイテムが渡されていない場合にエラーが発生します.

storybook

設定

npx sb init

上記のコマンドを使用してインストールを実行すると、.storybookフォルダとstoriesフォルダが生成されます.
さらに、package.jsonのscriptセクションに「storybook」コマンドが追加されます..storybookスキームは、main.jsファイルおよびpreview.jsファイルを生成する.main.jsファイルは、プロファイルです.preview.jsは、グローバル設定を実現するプロファイルと見なすこともできます.storiesフォルダはディレクトリで、物語の本を使用するために必要なコードを書くことができます.
実際のコードの作成を試みるstoriesフォルダに파일이름.stories.js形態、すなわちファイル名の物語が追加され、ファイルは真実の物語ファイルではなくページとされている.
次のコードは、Buttonという名前のStoryBookページを作成し、いくつかのStoryBookページを作成しようとするコードです.
次の3つのステップでコードを記述すればいいです.
1)default exportを使用して、ページの基本情報を持つオブジェクトをエクスポートします.
->タイトルと、このページに対応するコンポーネントを指定します.(コンポーネントをインポートする必要があります.)
2)storyと呼ばれる各要素の特定の形状を導出する.
->この構成部品を返す関数をエクスポートする形でコードを記述すればよい.
3)コードを作成して、StoryBookページで指定した条件でコンポーネントを動的に操作できるようにすることが、StoryBookを使用する最大の理由の1つです.
->3-1)Template関数の宣言
->3-2)関数を特定のアレイにコピーする(bind()
->3-3)転送するargsオブジェクトの作成

// src/stories/Button.stories.js

import Button from "../components/Button";

// 1) default export로 해당 페이지에 대한 기본정보를 가진 객체를 내보내준다.
export default {
  title: 'Button',
  component: Button
}

// 3-1) Template 함수 선언
const Template = (args) => <Button {...args} />;

// 2) 스토리를 만들어서 export!
export const Red = Template.bind({});//3-2) bind 로 함수 복제

// 3-3) 전달할 인수 선언
Red.args = {
  backgroundColor: "red",
  label: "Press me",
  size: "md",
};

その他

PropTypes.oneOf(['sm', 'md', 'lg'])

参考資料

https://ko.reactjs.org/docs/typechecking-with-proptypes.html