react 스터디에서 리액트를 다루는 기술이라는 책을 선정했고 이 책을 읽고 배운 것을 바탕으로 작성되었다.

🌐 Context API란?

💡 전역적으로 사용되는 데이터를 관리할 때 유용하게 사용되는 기능

• 사용자 로그인 정보, 환경 설정, 테마 등 전역적으로 필요한 데이터가 있을 때는 주로 최상위 컴포넌트인 App의 state에 넣어서 관리한다.
• 이후 특정 컴포넌트에서 데이터를 필요로 할 때 최상위 컴포넌트에서 여러 컴포넌트를 거쳐 props로 원하는 상태를 전달했다.
• 하지만 Context API를 사용하면 단 한 번에 원하는 값을 받아와 사용할 수 있다.

📝 Context API 사용법

Context 객체 만들기

• Context 객체를 만들 때는 createContext 함수를 사용한다.
• 인자로 해당 Context의 기본값을 전달한다.
• 이 기본값은 Provider 컴포넌트를 사용하지 않았을 때만 사용된다.

const MyContext = createContext(defaultValue);

Provider

• Provider 를 이용하여 context 값을 바꿀 수 있다.
• Provider 컴포넌트는 value props을 받아서 이 값을 하위에 있는 컴포넌트들에게 전달한다.
• Context에 있는 값이 필요한 컴포넌트들을 Provider 컴포넌트로 감싼다.
• Provider 하위에 또 다른 Provider 컴포넌트가 있는 것이 가능하며, 이 경우 하위 Provider의 value가 우선시된다.
• Context.Provider의 value props 값이 바뀔 때마다 Context를 사용하는 하위 컴포넌트들이 리렌더링된다.
  • 만약 value props 안에 여러 값들이 있다고 가정할 때 컴포넌트가 Context에서 특정 값에 의존할 경우, 해당 값 말고 다른 값이 변경될 때도 컴포넌트가 리렌더링된다.
  • 💡 불필요한 리렌더링이 발생하지 않기 위해 관심사에 맞게 Context를 분리하여 생성한다. (ex. StateContext / ActionContext)

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

Consumer

• Context에 있는 값을 Context.Consumer를 이용해 조회할 수 있다.
• Context.Consumer의 자식은 함수여야 한다.
• 이 함수는 Context의 현재 값을 받고 React element를 반환한다.

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

useContext

• Context에 있는 값을 사용할 때 Consumer 대신 useContext를 이용할 수 있다.

const value = useContext(MyContext);

static contextType

• 클래스형 컴포넌트에서 Context를 좀 더 쉽게 사용하고 싶다면 static contextType을 사용할 수 있다.
• static contextType 값을 Context로 지정하면 this.context를 조회했을 때 현재 Context의 value를 가리키게 된다.

class MyClass extends React.Component {
  static contextType = MyContext;
  render() {
    let value = this.context;
    /* render something based on the value */
  }
}

• static contextType을 정의하면 클래스 메서드에서도 Context에 넣어 둔 함수를 호출할 수 있다.
• 하지만, 한 클래스에서 하나의 Context만 사용할 수 있다.