Thinking in React: React 컴포넌트 설계 방법론
Source
Evernote/Inbox/Thinking in React(리엑트스럽게 생각하기).1.md
Summary
React 공식 문서의 ‘Thinking in React’ 번역 및 요약으로, React 애플리케이션을 설계하는 3단계 방법론을 제시합니다. 1단계는 UI를 단일 책임 원칙(SRP)에 따라 컴포넌트 계층으로 분리하는 것이며, 2단계는 props를 사용하여 상호작용 없이 데이터를 렌더링하는 정적 버전(Static Version)을 구현하는 것입니다. 3단계는 DRY 원칙을 적용하여 UI 상태를 구성하는 최소한의 state를 식별하는 것으로, props로 전달되거나 계산 가능한 데이터는 state로 관리하지 않아야 함을 강조합니다.
Key Points
- React 설계의 핵심은 UI를 컴포넌트 계층으로 분리하고, 정적 렌더링부터 시작하여 최소한의 state를 관리하는 것입니다.
- 1단계 (UI 분리): 단일 책임 원칙(SRP)을 준수하여 컴포넌트를 분리하며, 데이터 모델과 UI 구조가 매핑되도록 합니다.
- 2단계 (정적 버전): state를 사용하지 않고 props로 데이터를 전달하여 UI를 렌더링합니다. 상향식(Bottom-up) 또는 하향식(Top-down) 접근이 가능합니다.
- 3단계 (State 식별): DRY 원칙을 적용하여 최소한의 state를 찾습니다. 부모로부터 전달되거나(props), 불변이거나, 다른 state/props로 계산 가능한 데이터는 state로 관리하지 않습니다.
- Props vs State: Props는 부모에서 자식으로 데이터를 전달하는 데 사용되며, State는 시간에 따라 변하는 상호작용 데이터를 관리합니다.