Props vs State & Props Drilling

Props

• props는 부모로부터 상속받는 읽기전용 데이터(변경안됨)
  -> 리액트에서 부모컴포넌트에서 자식 컴포넌트에 데이터를 넘겨주고 싶을때
  -> props를 통해 넘김

State

• 해당 컴포넌트 내부에서 관리되는 상태관리 데이터
  -> useState같은 훅을 통해 상태를 변경할 수 있음
  (리액트는 상태변경을 실시간으로 감지하고 리렌더링함)

Props Drilling과 문제 발생

• 중간 컴포넌트를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 과정
  • prop전달이 3~5개 정도의 컴포넌트
    -> 문제 딱히 없음
  • but props전달이 점점 더 많아지면
    -> 해당 props 추적 어려워짐

Props Drilling을 어떻게 피하는가?

1. 전역상태 관리 라이브러리 사용
   -> recoil, redux, mobX 등으로 해당값이 필요한 컴포넌트에서 직접 불러 사용
2. props.children 사용

props.children

• 부모와 자식 컴포넌트 사이에,
  부모컴포넌트에서 자식컴포넌트의 내용을 보여주려고 사용하는 props