React로 사고하기

컴포넌트라고 하는 조각으로 분해하고 서로 다른 시각적 상태를 기술
마지막으로 컴포넌트를 서로 연결해 데이터가 흐르도록 합니다.

 

Step 1: UI 컴포넌트 계층 구조로 나누기

• 단일책임원칙에 따라 컴포넌트를 분해하고 이름을 지정
• 변하지 않는 것은 상위컴포넌트에 그대로 유지 (내가 고안한 방식)
• 변하는것들(재사용되는것)들은 하위 컴포넌트로 생성 (내가 고안한 방식)
• 상위 컴포넌트에서 하위컴포넌트로 내려가면서 필요에 따라 분해하는것이 효율적으로 보임(미리 작게 쪼개면 필요이상의 분해가될수있음)

Step 2: 정적인 UI 만들기

• 상호작용을 추가하지 않고 정적 UI 구성
• state없이 prop만을 이용하여 구성
• 간단한 ui의 경우 하향식으로 진행
• 대규모 프로젝트에서는 상향식으로 진행(최소 단위부터 구현)
• 데이터가 최상위 컴포넌트에서 흘러내리기 때문에 단방향 데이터 흐름

 

Step 3: 최소한의 완전한 UI state 찾기

• UI상호작용을 위해 데이터 모델을 변경할수 있도록 해야하는데 이를 위해 state를 사용
• state는 앱이 기억해야하는 최소한의 변화하는 데이터
• state구조화시 DRY(직접 반복하지 않기)를 유지하는것 
• 최소한의 state를 파악하고 이외의 값들은 필요할때 계산해서 사용
• state 판단 순서
  • 모든 데이터로 다루어질 것들을 list up (ex - 제품목록, 사용자 입력 검색어, 체크박스 값)
  • state 가 아닌것 제거
    • 시간이 지나도 변하지 않는것
    • prop으로 전달된 값
    • 기존 state 또는 prop으로 계산할수 있는 값

 

Step 4: state가 어디에 있어야 할지 파악하기

• state를 소유 하는 컴포넌트를 식별
  1. 특정 state를 기반으로 랜더링 하는 모든 컴포넌트 탐색
  2. 1에서 탐색한 컴포넌트들에서 가장 가까운 공통 상위 컴포넌트 탐색
  3. 2에서 탐색한 컴포넌트에 둘지 더 상위에 둘지 결정
  4. 3에서 적절한 컴포넌트를 찾지 못했다면 state를 소유하는 컴포넌트를 2에서 탐색한 부모보다 상위에 추가

 

Step 5: 역방향 데이터 흐름 추가하기

• 구조상 하위에 있는 컴포넌트가 상위에 있는 state를 업데이트 해야 하므로 역방향 데이터 흐름을 만들어야함
• state 변경 함수를 state변경이 필요한 하위 컴포넌트에 전달

 

 

참고문서

https://react-ko.dev/learn/thinking-in-react