react構造の決定方法

どのように反応構造を把握したほうがいいですか?
うん.今回行われる新しいパイロットプロジェクトでは、Reactを初めて始めたほうがいいかをよく考えました.正しい正解はありませんが、良い仕組みがあれば真似したいと思います.
これはグローバルステータス管理ライブラリに依存すると思います.
グローバルステータス管理ライブラリの種類はいくつかあります.中でもリドスは大勢のようで、最近はリコール、サテなどが後を追っている.また、簡単に使うだけなら、Context APIも良い選択になります.
いずれにしても、選択するときに最も重要なのはプロジェクトの規模によって、もちろん重要ですが、最も重要なのは、私はやはり気持ちがいいと思います.その点、一度使ってみたら、気持ちよさそうで、リドストルトも良かったです.
Presentational&Contenerモード?
反応の技術的観点から,対応するPresentation&Contenerモードが紹介されている(最近改訂されているかどうかは不明).いずれにしても、最初にこのモードを紹介した人は今、このモードを使用しないでくださいと言いました.
このパターンが現れた理由を見てみましょう.反応器には以前ホックというものは存在しなかった.したがって,コンポーネント内で状態論理とUI論理を分離しようとしたが,結果として現れたモードはPresentational&Contenerモードであった.
Hooksモードと言うべきでしょうか?
しかし,現在Hookが誕生し,論理と表現を分離できるという問題が解決されているため,このモードを使用する必要はない.次に例を示します.これにより、hooksというフォルダの下で処理状態の論理を分離することができる.

import { useEffect } from 'react'
import { useRecoilState } from 'recoil'
import { initialAmountState } from '../atoms/labSettingState'
import useFormattedNumber from './useFormattedNumber'

export default function useInitialAmount() {
  const [initialAmount, setInitialAmount] = useRecoilState(initialAmountState)
  const [value, onChange, setValue] = useFormattedNumber(initialAmount)

  useEffect(() => {
    setInitialAmount(parseInt(value.replace(/[^\d]+/g, ''), 10))
  }, [value])

  useEffect(() => {
    setValue(initialAmount.toLocaleString())
  }, [initialAmount])

  return [value, onChange] as const
}

// 예시 : https://github.com/velopert/velofolio/blob/main/packages/webapp/src/hooks/useInitialAmount.ts

したがって、コンテナ/コンポーネントを以前に作成し、使用状態で作成および使用するのではなく、すべてのコンポーネントをコンポーネントディレクトリに格納する傾向にあります.
redux-toolkitについて...
私は最初李徳思が難しいと思った.一つのことをするにはステップがたくさんあるし、慣れていないので難しいですでも今はRedux-tookitで確かに簡単になったと思います
redixのみを使用する場合は、次のツリー構造を使用して分割することがよくあります.私が最初に使用したプロジェクトでは、モジュール内でアクションタイプ、Reduser、および統合初期状態のファイルが機能別に作成されました.

.
├── api (API 모듈)
├── components (일반 켬포넌트)
├── constant (상수)
├── models? modules? (데이터 모델 변수, 타입) - 개별 액션타입? 리듀서?
├── pages (페이지 컴포넌트)
├── store  (Redux 관련 코드) - root 리듀서? 스토어? 
├── styles (스타일시트)
└── utils (유틸리티 모듈)

しかしredux-toolkit開発チームが公開した公式テンプレートでは,独自のフォルダ構造が提案されている.つまり、featuresという名前のフォルダで機能別にフォルダを作成し、Reactコンポーネント、スタイルシート、Reduxインプリメンテーションなどの関連ソースを同じ場所に配置する方法です.

.
├── api
│   └── githubAPI.js
├── components
│   └── Heading.js
├── features
│   ├── counter
│   │   ├── Counter.css
│   │   ├── Counter.js
│   │   └── counterReducer.js
│   ├── github
│   │   ├── RepoDetail.js
│   │   └── repoDetailSlice.js
│   └── todos
│       ├── Todos.js
│       └── todosSlice.js

一部の共通コンポーネント、グローバルスタイル、ユーティリティの性質の内容をモジュールから除外し、残りの実際の機能に関連するソースファイルをfeaturesフォルダに集中的に管理します.
私が理解しているように、featuresのエレメントは、初期にfetchでデータを初期化し、各エレメントフォルダのエレメントにデータを渡す形式ですか?上記のPresentation&Contenerモードと似ている可能性があります
ただし、各構成部品フォルダの構成部品にも必要な部分がある場合は、割り当て可能なフロー、またはユーザーセレクタを使用してクエリーできるフローもあるようです.
プロジェクト例:https://github.com/eunha0ne/netflix-clone-coding/tree/develop/srcを参照
▼いずれにしても、いくつかの項目を見て選択肢を広げたい.では~
コメントサイト

Riddy開発ブログ:https://ridicorp.com/story/how-to-use-redux-in-ridi/2

redux-toolkit : https://blog.rhostem.com/posts/2020-03-04-redux-toolkits

Context APIモードの使用:https://github.com/velopert/mooyaho-meet/tree/main/mooyaho-meet-client/src2

表示とコンテンツモードを使用します.https://github.com/velopert/velog-client/tree/master/src