Context API는 무엇인가요?

Context API는 무엇인가요?

컨텍스트 API는 리액트에서 내장된 함수로 전역상태 관리를 위해 사용됩니다.

 

원래는 상태를 관리하기 위해서, 상위 컴포넌트에서 하위 컴포넌트로 prop을 통해서 전달을 해주어야 했는데, depth가 깊어질 수록 하위 컴포넌트에 prop를 넘겨주기 위한 중간 컴포넌트들이 생기게 될 것입니다.

 

사용하지도 않는 prop를 받는 컴포넌트가 많아진다면, 계층 구조에 의존적인 컴포넌트가 되는 것이고 => 이는 재사용이 어렵고 유지보수가 어려운 스파게티 코드가 될 것입니다.

그래서 전역상태관리를 위해서 Context API가 나오게 되었습니다.

 

Consumer와 Provider로 JSX 태그를 감싸서 사용하는데, Provider로 감싼 영역에서 전역으로 상태가 관리되어지고, Consumer로 감싼 영역에서 Provider가 제공하는 상태값들을 사용할 수 있습니다.

 

다만, Consumer, Provider를 사용해야하므로 JSX의 가독성이 나빠지고 재사용이 어려워질 수 있습니다. 또한 Consumer가 제공하는 상태의 일부가 변경되면, 상태를 사용하지 않는 영역까지 리렌더링이 되는 이슈도 있습니다.