React - Context API

박요셉·2024년 5월 20일

React

목록 보기
4/15

React는 전역 데이터에 대한 관리가 필요함 왜? props drilling때문
prop drilling의 문제점

  1. 깊이가 너무 깊어지면 이 prop이 어떤 컴포넌트로부터 왔는지 파악이 어렵다.
  2. 어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어지니 대처가 늦는다.

그래서 등장한 것이 바로 react context API라는 것이고,
useContext hook을 통해 우리는 쉽게 전역 데이터를 관리할 수 있게 되었음.

  • createContext : context를 생성한다.
  • useContext : context를 구독하고 해당 context의 현재 값을 읽는다.
  • Provider : context를 하위 컴포넌트에게 전달한다.

예시 :


페밀리 컨택스트 파일?? 컨택스트를 생성해준 곳임.

그리고 아래에서 받아서 사용함.

useContext의 현재 값인 value가 변경되면 리렌더링이 발생하기에 주의가 필요하다.

memoization이 이에 대한 해법이 될 것.

profile
개발자 지망생

0개의 댓글