온라인 강의/React 완벽 가이드 [Udemy]

130. 리액트 Context(Context API) 소개

유호야 2023. 6. 14. 01:40
반응형

일반적으로 데이터는 프롭을 통해

컴포넌트에 전달됩니다

하지만 항상 문제가 되는 건,

 

state를 여러 컴포넌트를 통해 전달하는 경우입니다

즉 기본적으로는 프롭을 활용하여 다른 컴포넌트에

데이터를 전달합니다

 

 

 

 

 

 

여기는 아주 간단한 앱입니다

하지만 여기에서조차도 데이터를

MainHeader를 통해 Navigation 컴포넌트로 보내고 있죠

MainHeader에서 받는 프롭에서요

데이터가 실제로 필요하지 않더라도요

따라서 더 큰 앱에서는

 

이러한 프롭 체인이 만들어지기 쉽습니다

데이터를 컴포넌트를 통해 다른 컴포넌트에

전달하려고요

이렇게 할 수도 있습니다, 이게 딱히 나쁜 것도 아니에요

하지만 앱이 커질수록

이렇게 하면 불편해집니다

따라서 이렇게 하는, 대신 프롭을

실제로 필요한 데이터를 부모로부터 받는 컴포넌트에서만

사용할 수 있으면 더 좋을 것입니다

부모를 통해 데이터를 전달하지 않도록요


이를 위해 컴포넌트 전체에서 사용할 수 있는,

리액트에 내장된, 내부적인 state 저장소가 있습니다

리액트 컨텍스트라는 개념입니다

 

이를 사용하면, 그 컴포넌트 전체 state 저장소에서 액션을 트리거 할 수 있다

그런 다음 관련된 컴포넌트에 직접 전달할 수 있다

 

긴 프롭 체인을 만들지 않고, 문제를 더 우아하게 해결할 수 있다

반응형