[리액트] Context의 정의와 Context API 사용방법 정리하기

기존의 최상위 컴포넌트에서 props를 통해서 데이터를 전달하는 것은 많은 컴포넌트를 거칠 경우 유지보수나 속도에서 효율이 낮아지기 때문에 전역 상태를 더 편리하게 관리하는 방법으로 접근하면 좋다.

 

Context API를 사용하면 Context를 만들어서 한 번에 원하는 값을 받아와서 사용할 수 있다.

 

 

 

Context가 전역 상태를 더 편리하게 사용하기에 접근방법이 유용해보이나 주의사항 또한 존재한다.

컴포넌트와 Context가 잘 호환되지 않을 수 있기에 많은 양의 데이터에서만 사용하면 된다.

 

Context API에는 어떤 종류가 있을까?

 

1. React.createContext() 를 사용하여 Context를 생성해야한다.

const MyContext = React.createContext(기본값);

리액트 렌더링시 context를 구독하는 하위컴포넌트가 나오면  현재 context의 값을 가장 가까운 상위의 provider가 받아오겠지?

provider가 없다면 기본값이 사용된다.

 

2. Context.Provider를 사용하여 상위 컴포넌트에 가까운 provider에 입력한다.

Context.Provider는 하위 컴포넌트들이 Context를 받도록 돕는다.

즉, 모든 하위 컴포넌트들이 Context.Provider로 포함되면 데이터를 말그대로 제공(공급)받을 수 있겠군.

입력어는 MyContext.Provider value = {}

하위 컴포넌트들이 Provider에 접근해서 value props를 을 공유하겠지? 

여기서 나오는 명칭이 consumer(소비자)라는 단어이다. 하위 컴포넌트를 여기서는 consumer component라고 명한다. 

Provider와 consumer의 용어에 대해 숙지하자.

하나의 Provider의 경우 당연히 여러개의 하위컴포넌트와 연결이 가능하다.

그렇다면 value값이 바뀔 때마다 하위컴포넌트(consumer component)들이 재랜더링 될 것도 추측할 수 있다.

이때의 재렌더링과 관련하여 Context의 Provider에도 주의사항이 있는데 Provider 컴포넌트가 재렌더링될 때마다 모든 하위 consumer 컴포넌트가 재렌더링 되기에 value값에 직접적으로 주는 것이 아닌 useState를 사용하여 state값을 props로 넣는다.

 

3. Context.Consumer는 Context를 소비하는 기능을 하겠지?

Context.Provider의 value값을 받아서 구독는 기능을 담당한다.

 

4. function of Child

컴포넌트의 자식요소로 함수를 놓는 것이다 . 하위 컴포넌트들을 children이라는 props를 사용하는데 그 안에 컴포넌트 대신에 함수를 넣어서 전달하는 방식이다.

 

정리해보자면 Context.Provider로 공급자를 만들고 Context.Consumer로 소비자를 만들어서 React.createContext로 만든 Context를 주고 받는 것이다.

 

 

5. useContext()

함수형 컴포넌트에서는 Hooks 기능을 사용해서 useContext()를 사용해서 context를 전역으로 보낼 수 있다.

useContext()는 만들어진 Context를 직접 인자로 받아서 사용한다.

마찬가지로 상위 provider로부터 받아오고, 역시 재랜더링에 유의해야하는데 Context를 직접 인자로 받았기에 해당 useContext(Context)로  useContext를 받은 컴포넌트 역시 재런더링되기에 주의해야한다.