React 의 방식으로 사고해보자.
- 컴포넌트 나누기
- 데이터 가져오기
- 상태 관리하기
- 각각의 기능 구현하기
- 디자인 입히기
1. 목업으로 시작하기
- 디자인 + 데이터 API를 받았다고 가정해보자.
- 데이터 API 결과값의 구조를 제대로 확인해두자.
2. UI를 컴포넌트 계층 구조로 쪼개기
- 디자인을 확인하면서 블럭별로, 기능별로, 컴포넌트 계층구조를 잘 설계해보자.
- 재사용성을 고려하여 효율적인 코드를 설계해보자.
3. React로 정적인 버전을 제작하기
- state를 사용하지 말고, 정적인 버전으로 페이지를 제작하자.
4. UI state에 대한 최소한의, 완전한 표현을 찾아내기
5. State가 어디에 있어야 하는지 생각하기
- 어떤 컴포넌트가 state를 변경하거나 소유할 지 생각해보자.
- React는 항상 컴포넌트 계층구조를 따라 아래로 흘러가는 단방향 데이터 흐름을 가진다는 점을 기억하자.
- 아래와 같은 방식으로 해당 사항을 고려해볼 수 있다.
- 서비스가 가지는 각 state에 대해서...
- state를 기반으로 렌더링하는 모든 컴포넌트를 찾아보자.
- 공통 소유의 컴포넌트 (common owner component)를 찾아보자.
⇒ 계층 구조 내에 특정 state가 있어야 하는 모든 컴포넌들의 상위에 있는 하나의 컴포넌트
- 공통 혹은 더 상위에 있는 컴포넌트가 state를 가져야 한다.
- state를 소유할 적절한 컴포넌트를 찾아내지 못했다면, 상위 컴포넌트 (wrap)를 제작하여 해당 컴포넌트에 state를 소유시키자.
6. 역방향 데이터 흐름을 추가하기
- 계층 구조의 하단에 있는 컴포넌트에서 상위 컴포넌트의 state를 업데이트 할 수 있도록 하자.
- React는 전통적인 양방향 데이터 바인딩과 비교했을 때는 더 많은 타이핑이 필요하지만, 데이터 흐름을 명시적으로 보이게 만들 프로그램이 어떻게 동작하는지 파악하기 쉬워진다.
7. 코드는 쓰는 일보다, 읽는 일이 더 많다는 점 인지하기
- 모듈화를 통하거나, 명시적으로 코드를 작성하여 읽을 때 수월할 수 있도록 작성하자.