18화: Sharing State Between Components

이 글은 단순히 리액트 공식 문서를 읽고 베꼈을 뿐이다!! 학습 목적이라면 공식 문서를 보는 걸 추천한다.

 

참새. Unsplash 에 Peter F. Wolf 님이 올림

공식 문서

https://react.dev/learn/sharing-state-between-components

Sharing State Between Components – React

상태 끌어올리기

• 두 컴포넌트의 상태가 항상 같이 바뀌기를 원할 때 사용
• 두 컴포넌트에서 해당 상태를 제거, 부모 컴포넌트의 상태로 만듦
• 그리고 그걸 props로 내려주기

순서

1. 자식 컴포넌트들에서 상태 없애기: 부모 props를 통해 자식을 조절함
2. 부모가 자식들에게 하드코딩된 props 내려주기: 일단 확인을 위함
3. 공통 부모에게 상태 추가: 자식에 있었던 거랑 똑같을 필요 X, 그냥 자식 조절하기에 적절한 거면 O

제어 컴포넌트 vs 비제어 컴포넌트

• 제어 컴포넌트
  • 상태가 내부에 있어 부모가 그 상태에 영향을 줄 수 없음
  • 외부 설정이 불필요하기 때문에 부모 컴포넌트가 쓰기 편함
  • 하지만 얘네들을 조직화하기는 힘듦
• 비제어 컴포넌트
  • 중요 정보가 props를 통해 내려옴
  • 부모 컴포넌트가 해당 컴포넌트를 조절할 수 있음
  • 굉장히 유동적임
  • 하지만 부모가 props를 이용해 잘 설정해야 함
• 모든 컴포넌트를 이런 이분법적인 방식으로 나눌 수 있는 건 아님: 두 특징이 섞인 경우도 많음
• 컴포넌트 작성 시 무엇을 제어 요소로, 무엇을 비제어 요소로 둘 것인지 생각해보기

상태가 있을 곳을 정하기: single source of truth

• 각 상태마다 어떤 컴포넌트가 그걸 갖고 있을 것인지 정해야 함
• 상태를 갖고 있는 컴포넌트는 단 하나: 만약 다른 곳에서도 그 상태를 가져야 한다면 상태 끌어올리기 등의 방법을 고려할 것