TLDR;
리액트 공식 베타 문서(작성시점에선 베타)에서 말하는 리액트 같이 생각하기를 번역(정리 및 간소화)
Step 1: UI를 컴포넌트 계층으로 쪼개기
디자이너로부터 전달받은 결과물에서 먼저 컴포넌트로 쪼갬
•
진짜 별거 없음, UI를 컴포넌트로 쪼갬
Step 2: 정적인 버전의 리액트를 만든다
state없이 UI만 만듬
•
가장 간단한 접근법 → UI만 먼저 그린다
•
UI를 그리는 개발 → 생각이 많이 들지않고 적어야할 코드 양은 많음
•
interactivity를 적용하는 개발 → 생각이 많이들지만 적어야할 코드는 적음
정적인 버전
•
기준에 따라 나누어놓은 컴포넌트를 먼저 작성 → 이때 props도 미리 작성해두어 계층 구조를 나눠놓음
•
state는 나중에 생각하기
•
top-down → 작은 프로젝트의 경우 추천
•
bottom-up → 큰프로젝트의 경우 추천
Step 3: 최소한의, 완성된 UI state 상태를 찾기
state로 존재해야할 데이터들을 분리하여 state를 선언함
•
state는 최소한으로 존재해야함 → 복잡해질 수록 리렌더링 추적도 어려워지고 잦아지므로 퍼포먼스에 독이됨
•
state이여야만 하는 이유를 찾기보단 state가 아니여도 되는데? 라는 방식으로 개발하자
예시
state가 아닌 케이스
•
변경되지 않는 정적인 데이터 - state일 필요가 없는 데이터
•
부모로 부터 props로 전달된 데이터 - state가 아님
•
이미 존재하는 state나 props로 부터 계산하여 만들어 낼 수 있는 값 - state가 절대 아님
Step 4: State를 입혀 상호작용 가능하게 만들기
state들을 적절한 위치에 선언하고 자식들에게 props로 전달시켜주기
•
원글에선 Step 4, 5가 있었으나 굳이 나눠놓을 필요성을 느끼지 못해 step 4 + 5를 하나로 묶음