반응형
일반적으로 데이터는 프롭을 통해
컴포넌트에 전달됩니다
하지만 항상 문제가 되는 건,
state를 여러 컴포넌트를 통해 전달하는 경우입니다
즉 기본적으로는 프롭을 활용하여 다른 컴포넌트에
데이터를 전달합니다
여기는 아주 간단한 앱입니다
하지만 여기에서조차도 데이터를
MainHeader를 통해 Navigation 컴포넌트로 보내고 있죠
MainHeader에서 받는 프롭에서요
데이터가 실제로 필요하지 않더라도요
따라서 더 큰 앱에서는
이러한 프롭 체인이 만들어지기 쉽습니다
데이터를 컴포넌트를 통해 다른 컴포넌트에
전달하려고요
이렇게 할 수도 있습니다, 이게 딱히 나쁜 것도 아니에요
하지만 앱이 커질수록
이렇게 하면 불편해집니다
따라서 이렇게 하는, 대신 프롭을
실제로 필요한 데이터를 부모로부터 받는 컴포넌트에서만
사용할 수 있으면 더 좋을 것입니다
부모를 통해 데이터를 전달하지 않도록요
이를 위해 컴포넌트 전체에서 사용할 수 있는,
리액트에 내장된, 내부적인 state 저장소가 있습니다
리액트 컨텍스트라는 개념입니다
이를 사용하면, 그 컴포넌트 전체 state 저장소에서 액션을 트리거 할 수 있다
그런 다음 관련된 컴포넌트에 직접 전달할 수 있다
긴 프롭 체인을 만들지 않고, 문제를 더 우아하게 해결할 수 있다
반응형
'온라인 강의 > React 완벽 가이드 [Udemy]' 카테고리의 다른 글
132. useContext 훅으로 컨텍스트에 탭핑(tapping)하기 (0) | 2023.06.14 |
---|---|
131. 리액트 컨텍스트 API 사용 (0) | 2023.06.14 |
129. State 관리를 위한 useReducer 대 useState (0) | 2023.06.14 |
128. 중첩 속성을 useEffect에 종속성으로 추가하기 (0) | 2023.06.14 |
127. useReducer & useEffect (0) | 2023.06.14 |