[React] Context API란 무엇일까?

 

 

 

1. Context API란 무엇일까

Context API는 React에서 제공하는 내장 API로 전역으로 데이터값을 공유할 수 있게 한다. React에서는 컴포넌트에 props로 데이터를 넘겨줄 수 있는데 만약 부모로부터 자식A > 자식B > 자식C > 자식D 이런 형식의 하위의 한참 하위 컴포넌트에게 props를 전달하고 싶은 경우가 있다고 하자. 그러면 자식D까지 도달하기 위해 지나는 모든 컴포넌트에 일일이 props를 넘겨주는 번거로운 행위를 해야할 것이다. 이런 현상을 dril로 뚫는 것 같다해서 props drilling이라고 하는데, Context API를 사용하면 전역으로 데이터를 공유할 수 있기 때문에 이러한 props drilling을 방지할 수 있는 것이다. Context API를 통해 컴포넌트 트리 어디에서나 데이터에 접근할 수 있다.

 

2. Context API를 사용하는 방법

Context API는 Provider와 Consumer 두가지 구성요소가 있는데 Provider는 Context의 값을 "제공" 하는 컴포넌트이고 Consumer는 Context의 값을 "구독" 하는 컴포넌트 이다.

1) createContext()로 Context 생성

const TextContext = createContext();

 

2) Provider Component 생성

위에서 생성한 TextContext를 import해서 TextContext의 Context를 제공할 Provider Component를 생성해준다.  Provider에 props로 들어오는 children은 Provider로 감쌀 Component들이 될 것이다.

const TextContextProvider = ({ children }) => {
	return (
    	<TextContext.Provider
          value={state, setState}
        >
        {children}
    	</TextContext.Provider>
    )
}

export default TextContextProvider;

 

3) Provider로 데이터를 공유할 컴포넌트들을 감싸기

Provider를 통해 데이터를 공유해줄 컴포넌트들은 Provider로 감싼다. 그러면 그 하위 컴포넌트들은 Context Data를 사용할 수 있다.
만약 React 앱 전체에서 Context data를 공유해서 사용하고 싶다면 가장 상위 컴포넌트를 Provider로 감싸면 될 것이다.

<TextContextProvider>
  <SampleA />
  <SampleB />
</TextContextProvider>

 

 

3. Context API를 사용하면 좋은 사례

그럼 과연 어떤 경우에 Context API를 사용하면 좋을까? Context API를 사용하면 좋은 경우는 다음과 같다.

1) 전역으로 상태를 관리할 경우

• 현재 로그인한 유저
• 스타일 테마 (라이트모드, 다크모드 등)
• 앱의 언어설정

2) 공통으로 사용하는 기능이 있는 경우

• 로그인 관련 기능
• 검색할 때
• 페이지 이동할 때
• 공통 모달, 토스트 등