[React] Context API

 

 

Context 

리액트 컴포넌트에서 Props가 아닌 다른 방식으로 컴포넌트 간에 값을 전달하는 방법.

 

사용이유

Props drilling

부모에서 자식으로만 전달하는 단방향 리액트의 문제.

컴포넌트 트리에서 하위 컴포넌트로 내려주기 위해 그냥 거쳐가기만 하는 Prop들이 생긴다.

따라서 불필요한 props drilling을 지양하기 위해 Context를 사용한다.

 

Provider

Context 객체에 포함된 React 컴포넌트.

context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할.

value prop을 받아서 이 값을 하위에 있는 컴포넌트에게 전달한다.

값의 갯수는 제한이 없고, 이를 전달 받을 수 있는 컴포넌트 수의 제한도 없다.

Provider 하위에서 context를 구독하는 모든 컴포넌트는 Provider의 value가 바뀔 때마다 리렌더링된다.

 

사용법

1. Context 생성

const MyContext = React.createContext(defaultValue);

* defalutValue : 트리 안에서 적절한 Provider를 찾지 못 했을 때만 쓰이는 값

 

2-1. useContext

function Message() {
  const value = useContext(MyContext);
  return <div>Received: {value}</div>;
}

 

2-2. Context Provider를 통한 데이터 공급

상태관리가 필요한 경우, 유동적인 값을 다뤄야 할 때

<MyContext.Provider value={전역으로 전달하고자하는 값}>
	{/* 이 context 안에 위치할 자식 컴포넌트들 */}
</MyContext.Provider>

 

 

오류 방지

provider 컴포넌트로 감싸지 않은 경우

1. 기본값 설정

const MyContext = createContext('default value');

 

2. 커스텀 Hook 수정

const MyContext = createContext();

function useMyContext() {
  const value = useContext(MyContext);
  if (value === undefined) {
    throw new Error('useMyContext should be used within MyContext.Provider');
  }
}

 

Context 분리

용도가 다른 Context 분리하기.

상태에 변화가 발생할 때마다 두 컴포넌트가 모두 리렌더링 되는 것을 방지.

<ThemeContext.Provider value={theme}>
    <UserContext.Provider value={signedInUser}>
      <Layout />
    </UserContext.Provider>
</ThemeContext.Provider>

Provider 하위에 또 다른 Provider를 배치하는 경우, 하위 Provider의 값이 우선시 된다.

 

 

 

참고:

https://ko.reactjs.org/docs/context.html

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8/

https://velog.io/@velopert/react-context-tutorial