Props vs State & Props Drilling
Props
- props는 부모로부터 상속받는 읽기전용 데이터(변경안됨)
-> 리액트에서 부모컴포넌트에서 자식 컴포넌트에 데이터를 넘겨주고 싶을때
-> props를 통해 넘김
State
- 해당 컴포넌트 내부에서 관리되는 상태관리 데이터
-> useState같은 훅을 통해 상태를 변경할 수 있음
(리액트는 상태변경을 실시간으로 감지하고 리렌더링함)
Props Drilling과 문제 발생
- 중간 컴포넌트를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 과정
- prop전달이 3~5개 정도의 컴포넌트
-> 문제 딱히 없음
- but props전달이 점점 더 많아지면
-> 해당 props 추적 어려워짐
Props Drilling을 어떻게 피하는가?
- 전역상태 관리 라이브러리 사용
-> recoil, redux, mobX 등으로 해당값이 필요한 컴포넌트에서 직접 불러 사용
- props.children 사용
props.children
- 부모와 자식 컴포넌트 사이에,
부모컴포넌트에서 자식컴포넌트의 내용을 보여주려고 사용하는 props