[리액트문서보기] React로 사고하기(구조 나누기, state위치 선정 등)
리액트 사고하기에서는 한가지 예제를 가지고 쭉~ 설명을 합니다.
이미 JSON API와 디자이너의 목업이 있다고 가정해 보겠습니다.
[
{ category: "Fruits", price: "$1", stocked: true, name: "Apple" },
{ category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit" },
{ category: "Fruits", price: "$2", stocked: false, name: "Passionfruit" },
{ category: "Vegetables", price: "$2", stocked: true, name: "Spinach" },
{ category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin" },
{ category: "Vegetables", price: "$1", stocked: true, name: "Peas" }
]
React 에선 일반 적으로 동일한 5단계를 따릅니다.
◼ Step1: UI 컴포넌트 계층구조로 나누기
- FilterableProductTable (회색)에는 전체 앱이 포함됩니다.
- SearchBar (파란색)는 사용자 입력을 수신합니다.
- ProductTable (보라색)은 사용자 입력에 따라 목록을 표시하고 필터링합니다.
- ProductCategoryRow (녹색)는 각 카테고리에 대한 제목을 표시합니다.
- ProductRow (노란색)는 각 상품에 대한 행을 표시합니다.
+ 참고
ProductTable(보라색)을 보면 테이블 헤더(“Name” 및 “Price” 레이블 포함)가 자체 컴포넌트가 아님을 알 수 있습니다. 이것은 선호도의 문제이며 어느 쪽이든 사용할 수 있습니다. 이 예제에서는 ProductTable의 목록 안에 표시되므로 ProductTable의 일부입니다. 그러나 이 헤더가 복잡해지면(예: 정렬을 추가하는 경우) 이를 별도의 ProductTableHeader 컴포넌트로 이동할 수 있습니다.
◼ Step2: React 정적인 UI 만들기
state를 사용하기 전에 먼저 data변경이 없는 정적인 상태를 먼저 완성합니다.
- 데이터 모델을 기반으로 UI를 렌더링하는 정적 버전을 만듭니다.
- 컴포넌트를 구성하여 데이터를 props를 통해 전달합니다. 상태(state)는 사용하지 않습니다.
- 상위 컴포넌트부터 하향식 또는 하위 컴포넌트부터 상향식으로 구성합니다.
- 정적 버전의 컴포넌트를 구축한 후에는 데이터 모델을 prop으로 전달하여 상위 컴포넌트가 하위 컴포넌트를 렌더링하도록 합니다.
- 이것은 단방향 데이터 흐름을 따르며, 컴포넌트 라이브러리를 구축하여 재사용 가능한 컴포넌트를 생성합니다.
◼ Step3: 최소한의 완전한 UI State 찾기
정적인 UI에 State를 사용하여 실시간 data 변경이 일어나도록 코드를 작성합니다.
모든 데이터를 state로 만드는것이 아닙니다.
- 데이터가 시간이 지나도 변하지 않는다면, 그것은 state가 아닙니다.
왜냐하면 state는 앱의 변화하는 데이터를 나타내기 때문입니다. - 부모로부터 props를 통해 전달된다면, 그것은 state가 아닙니다.
Props는 컴포넌트 외부에서 전달되는 데이터이기 때문입니다. - 기존 state나 props를 가지고 계산할 수 있다면, 그것은 state가 아닙니다.
왜냐하면 이미 다른 데이터로부터 계산되는 값이기 때문입니다.
그 외는 아마도 state 값이 될수 있을것입니다.
예시 상황의 영역을 이렇게 나눠 생각할수 있습니다.
|
 |
State를 사용할수 있는 영역을 이렇게 됩니다.
- (X) 제품 원본 목록은 props로 전달되었으므로 state가 아닙니다.
- (O) 검색어는 시간에 따라 바뀌고 다른 것으로부터 계산할 수 없으므로 state로 볼 수 있습니다.
- (O) 체크박스의 값은 시간에 따라 바뀌고 다른 것으로부터 계산할 수 없으므로 state로 볼 수 있습니다.
- (X) 필터링된 제품 목록은 원본 목록으로부터 검색어 및 체크박스 값을 조합하여 계산할 수 있으므로 state가 아닙니다.
◼ Step4: state가 어디에 있어야 할지 파악하기
Step 3에서는 예시에서 state가 사용된 곳을 식별하고, 이 상태를 변경할 컴포넌트의 위치를 찾습니다.
(state를 작성한 파일의 위치를 찾습니다.)
React에서는 데이터가 위에서 아래로 한 방향으로만 흐르기 때문에, 어떤 컴포넌트가 어떤 상태를 관리해야 할지를 결정하는 것이 중요합니다.
우선 각 state를 사용하는 컴포넌트를 찾고, 이들의 가장 가까운 공통 부모를 찾습니다. 그리고 이 공통 부모 컴포넌트에 상태를 위치시키는 것이 일반적입니다. 그렇지 않은 경우에는 새로운 컴포넌트를 만들어 상태를 넣을 수도 있습니다.
그 다음에는 useState() Hook을 사용하여 상태를 추가하고, 해당 상태를 사용하는 컴포넌트에 상태를 전달합니다. 이러한 방식을 통해 상태를 효과적으로 관리할 수 있습니다.
+ state 관리를 위한 위치 설정
1. 해당 state를 기반으로 렌더링하는 모든 컴포넌트를 찾으세요.
2. 가장 가까운 공통 상위 컴포넌트, 즉,계층상 그 state의 영향을 받는 모든 컴포넌트들의 위에 있는 컴포넌트를 찾으세요.
3. state가 어디에 위치할지 결정합시다:
4. 대개 공통 부모에 state를 그대로 둘 수 있습니다.
5. 혹은 공통 부모보다 더 상위 컴포넌트에 state를 둘 수도 있습니다.
6. state를 소유할 적절한 컴포넌트를 찾지 못했다면, state를 소유하는 새 컴포넌트를 만들어 공통 부모 컴포넌트보다 상위에 추가하세요.
◼ Step5: 역방향 데이터 흐름 추가하기
역방향 데이터 흐름은 부모 컴포넌트가 자식 컴포넌트로부터 콜백 함수를 통해 데이터를 전달받는 것을 의미합니다. 자식 컴포넌트는 사용자 입력 또는 다른 이벤트에 응답하여 콜백 함수를 호출하고, 이를 통해 부모 컴포넌트로 데이터를 전달합니다. 부모 컴포넌트는 이를 통해 자식 컴포넌트의 상태를 업데이트하거나 다른 동작을 수행할 수 있습니다.
+ 상태 관리 위치 결정하기
1. 앱에서 상태를 기반으로 렌더링하는 모든 컴포넌트를 찾습니다.
2. 계층 구조에서 해당 상태의 영향을 받는 모든 컴포넌트들의 가장 가까운 공통 상위 컴포넌트를 찾습니다.
3. 상태가 어디에 위치할지를 결정합니다:
4. 일반적으로 상태를 그대로 공통 부모 컴포넌트에 둘 수 있습니다.
5. 또는 공통 부모 컴포넌트보다 더 상위 컴포넌트에 상태를 둘 수도 있습니다.
6. 상태를 소유할 적절한 컴포넌트를 찾지 못했다면, 상태를 소유하는 새로운 컴포넌트를 만들어 공통 부모 컴포넌트보다 상위에 추가하세요.
[참고]
https://react-ko.dev/learn/thinking-in-react
https://www.youtube.com/watch?v=bZhwLX4UkJs&list=PLjQV3hketAJkh6BEl0n4PDS_2fBd0cS9v&index=6