https://react.dev/learn/sharing-state-between-components 를 읽고 정리한다.
두 컴포넌트의 state가 항상 함께 변경되게 하고 싶을 때는 가장 가까운 공통 부모로 이동한 다음 props를 통해 전달한다.
이 것은 상태 들어올리기(lifting state up)이라고 불린다.
3단계로 상태 들어올리기를 수행할 수 있다.
1. 자식 컴포넌트에서 state를 제거한다.
2. 공통 부모로부터 하드코딩된 데이터를 전달한다.
3. 공통 부모에 상태를 추가하고 (자식에게) 이벤트 핸들러와 함께 전달한다.
- 상태를 올릴때 상태로 저장하는 항목의 특성이 달라질 수 있다.
- 예시) 기존에는 `panel`에서 활성화 여부를 나타내는 `isActive`를 사용했지만, 끌어올려진 후 그 부모 컴포넌트에서는 어떤 `panel`이 활성화되었는 지를 저장하는 것으로 변경되었다.
- 부모에서 이벤트 핸들러를 자식에게 전달하면 자식이 부모의 상태를 변경할 수 있다.
Deep Dive : controlled / uncontrolled 컴포넌트
uncontrolled 컴포넌트는 자신의 local state를 직접 통제하는 것을 말한다.
- uncontrolled 컴포넌트는 추가적인 구성이 덜 필요하기 때문에 부모에서 사용하기가 더 쉽다.
- 다른 것과 함께 조정하려는 경우 유연성이 떨어진다.
controlled 컴포넌트는 중요한 정보가 자체 local state가 아닌 props에 의해 구동(제어)되는 경우를 말한다.
- controlled 컴포넌트는 많이 유연하지만, props로 컴포넌트를 완전히 구성하려면 부모 컴포넌트가 필요하다.
컴포넌트를 작성할 때 어떤 정보가 제어되어야 하는지(props를 통해) 어떤 정보가 제어되지 않아야 하는지(상태를 통해) 고려하십시오.
그러나 언제든지 마음을 바꾸고 나중에 리팩토링할 수 있습니다.
각각의 고유한 state는 어떤 컴포넌트가 소유할 것인지 골라야한다. 이 원칙은 "single source of truth"라고 알려져있다.
- 모든 state가 한 장소에 있다는 것이 아닌 각 state는 이를 보유하는 하나의 컴포넌트가 있다는 것을 의미한다.
- 따라서 컴포넌트 간의 공유 state를 복제하는 것이 아닌 공통 공유 부모 컴포넌트로 lift up 해서 필요한 자식에게 전달한다.
'React > Learn React' 카테고리의 다른 글
| Managing State ☞ Passing Data Deeply with Context (0) | 2022.10.30 |
|---|---|
| Managing State ☞ Extracting State Logic into a Reducer (1) | 2022.10.03 |
| Managing State ☞ Choosing the State Structure (0) | 2022.10.01 |
| Managing State ☞ Reacting to Input with State (0) | 2022.09.25 |
| Adding Interactivity ☞ State as a Snapshot (0) | 2022.09.25 |