[React] React 로 사고하기

Mock Data 를 활용하는 법을 다루기 전에, react 에서 Mock Data 를 어떻게 구성할 지에 대해 살펴보기.

1. UI 를 컴포넌트 계층 구조로 나누기

• 모든 컴포넌트 (하위 컴포넌트 포함)의 주변에 박스에 각각의 이름을 붙여야 한다. 어떤 것을 컴포넌트로 할 수 있을까에 대해 중점을 잡아보면, 새로운 함수나 객체를 만들 때처럼 생각해본다. 주의해야 할 점은 하나의 컴포넌트는 한 가지 일을 한다.

• 하나의 컴포넌트가 커지게 된다면, 이보다 작은 하위 컴포넌트로 분리시켜줘야 한다.

• 총 다섯개의 컴포넌트로 이루어져 있는 앱.

• FilterableProductTable
  - SearchBar

  • ProductTable
    • ProductCategoryRow
    • ProductRow

  2. React 로 정적인 버전 만들기

• 데이터 모델을 렌더링 하는 앱의 정적 버전을 만들기 위해 다른 컴포넌트를 재사용하는 컴포넌트를 만들고 props를 이용해 데이터를 전달 해준다.

• props 는 부모가 자식에게 데이터를 넘겨줄 때 사용할 수 있는 방법.

• 정적 버전을 만들 때에는 state 는 사용하지 않는다. (시간이 지남에 따라 데이터가 바뀌는 것에 사용)

• 프로젝트가 커질수록 컴포넌트는 상향식 (가장 범위가 큰 컴포넌트부터 만들기) 으로 만들기.

• 계층 구조의 최상단 컴포넌트 (FilterableProductTable) 은 prop 으로 데이터 모델을 받는다. 데이터 모델이 변경되면 ReactDOM.render() 를 다시 호출해서 UI 가 업데이트 된다.

  3. UI State 에 대한 최소한의 표현 찾아내기

• UI 를 상호작용하게 만들기 위해, React 는 state 를 통해 기반 데이터 모델을 변경한다.

• state 가 되는 조건
  1. 부모로 부터 props 를 통해 전달되는가
  2. 시간이 지나도 변하지 않는가
  3. 컴포넌트 안의 다른 state 나 props 를 가지고 계산이 가능한가

4. state를 둘 위치 찾기 (어떤 컴포넌트가 state 를 변경하거나 소유할 지 찾기)

1. state 를 기반으로 렌더링하는 모든 컴포넌트를 찾기
2. 공통 소유 컴포넌트를 찾기. (계층 구조 내에서 특정 state가 있어야 하는 모든 컴포넌트들의 상위에 있는 하나의 컴포넌트)
3. 공통 혹은 더 상위에 있는 컴포넌트가 state를 가져야 한다.
4. state 를 소유할 적절한 컴포넌트를 찾지 못했다면, state 를 소유하는 컴포넌트를 하나 만들어서 공통 오너 컴포넌트의 상위 계층에 추가.

ex)

• FilterableProductTable
  - SearchBar
  • ProductTable
    • ProductCategoryRow
    • ProductRow

총 다섯개의 컴포넌트로 이루어져 있는 앱에 적용해보기

• ProductTable 은 state에 의존한 상품 리스트에 필터링 해야 하고, SearchBar 는 검색어와 체크박스의 상태를 표시해주어야 한다.
• 공통 소유 컴포넌트는 FilterableProductTable 이다.

✔️ state 를 공통 소유 컴포넌트인 FilterableProductTable 에 두어야 한다.