[React 공식문서 스터디] #0-4. React로 사고하기 , #1-1. 첫번째 컴포넌트

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

 

앱에서 최소한으로 필요한 state 데이터를 식별한 후에는, 이 state를 변경하는 데 책임이 있는 컴포넌트, 즉,state를 ‘소유’하는 컴포넌트를 식별해야 합니다. 기억하세요: React는 컴포넌트 계층 구조를 따라 부모 컴포넌트에서 자식 컴포넌트로, 아래로 내려가는 단방향 데이터 흐름을 따릅니다.

 

■ 애플리케이션의 각 state에 대해:

1. 해당 state를 기반으로 렌더링하는 모든 컴포넌트를 찾으세요.
2. 가장 가까운 공통 상위 컴포넌트, 즉,계층상 그 state의 영향을 받는 모든 컴포넌트들의 위에 있는 컴포넌트를 찾으세요.
3. state가 어디에 위치할지 결정합시다:
4. 대개 공통 부모에 state를 그대로 둘 수 있습니다.
5. 혹은 공통 부모보다 더 상위 컴포넌트에 state를 둘 수도 있습니다.
6. state를 소유할 적절한 컴포넌트를 찾지 못했다면, state를 소유하는 새 컴포넌트를 만들어 공통 부모 컴포넌트보다 상위에 추가하세요.

---

상위 요소에서 하위 컴포넌트가 set함수를 호출하면, 그 set함수가 위치해 있는 상위 요소에서 set함수로 그 useState값을 바꿔준 뒤, 그 값을 다시 props로 내려주는 작업을 취하게 된다.

 

이 함수를 제작하는 법은 우선, 각 데이터의  흐름을 확인한뒤 각 위치별마다 그 데이터를 가공해서 그 가공함수를 그 컴포넌트에서 할지, 아니면 상위 컴포넌트에서할지 선택하면 된다. 

---

아래와 같이 선언한 컴포넌트를 그대로 컴포넌트에 사용하게 될 경우, 렌더링 때마다 다시 정의해줘야해서 버그를 유발시킬 수 있음.

---

아래 처럼 따로 함수를 정의해 줘서 사용하며, 전달할 값이 있다면 props를 통해 전달하는게 좋다.