React | contextAPI

React

목차

1. context Api란
2. Api
3. 주의할 점

1. context Api란

:Context API는 리액트에 내장된 기능으로 Props를 사용하지 않아도 특정 값이 필요한 컴포넌트끼리 쉽게 값을 공유할 수 있게 해줌

• 프로젝트에서 전역 상태 관리를 할 때 주로 사용
• 새로운 context를 만들 때 createContext 함수 사용

2. Api

• React.createContext

  const MyContext = React.createContext(defaultValue);
  

  • context 객체 생성
  • 트리 상위에서 가장 가까이 있는 짝이 맞는 Provider로부터 현재값을 읽음

• Context.Provider

  <MyContext.Provider value={/* 어떤 값 */}>
  

  • context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할
  • Provider 컴포넌트는 value prop을 받아서 이 값을 하위에 있는 컴포넌트에게 전달
  • value prop이 바뀔때마다 다시 렌더링됨

• Class.contextType

  • class형 컴포넌트에서 사용
  • React.createContext()로 생성한 Context 객체를 원하는 클래스의 contextType 프로퍼티로 지정할 수 있음

• Context.Consumer

  • 함수 컴포넌트 안에서 context 구독 가능

  <MyContext.Consumer>
    {value => /* context 값을 이용한 렌더링 */}
  </MyContext.Consumer>
  

3. 주의할 점

:다시 렌더링할지 여부를 정할 때 참조(reference)를 확인하기 때문에, Provider의 부모가 렌더링 될 때마다 불필요하게 하위 컴포넌트가 다시 렌더링 되는 문제가 생길 수도 있음

---

출처

context api 공식문서
context api
context 장문설명