Context API란

오늘은 Context API에 대해 알아보자.

부모 컴포넌트에 있는 state를 자식 컴포넌트에서 사용할 경우 props를 뚫어 사용하면 된다.
그런데 자식 컴포넌트가 중첩되어 있는 경우 부모컴포넌트 -> 자식컴포넌트 -> 하위 자식컴포넌트
이런식으로 props를 여러번 뚫어야 하는 경우가 발생한다.

이럴 때를 대비해서 사용하는게 Context API 혹은 Redux 등의 라이브러리이다.

Context API 문법으로 props 없이 state 공유하는 예시.

//부모 컴포넌트

import React, { createContext, useState } from 'react';

export const MyCotext = createContext();

const MyProvider = ({ children }) => {
	const [state, setState] = useState(0);
    
    return ( 
    <MyContext.ProVider value={{ state, setState }}>
    	{children}
    </MyContext.Provider>
  );
};

createContext() 함수를 가져와서 context를 하나 만들자.
context는 state보관함으로 생각하면 된다.

MyContext로 원하는 곳을 감싸고 공유를 원하는 state를 value 안에 다 넣으면 된다.
이제 MyContext로 감싼 컴포넌트는 state를 props 전송 없이 직접 사용가능하다.

//Context를 사용할 자식 컴포넌트

import React, { useContext } from 'react';
import { MyContext } from '부모컴포넌트 위치';

const MyComponent = () => {
	const { state, setState } = useContext(MyComponent);
 	
    return (
    	<div>
        	<p>Current state: {state}</p>
            <button onClick={() => setState(state + 1)}>증가버튼</button>
        </div>
   );
};

위는 Context 안에 있는 state를 사용하는 방법이다.
만들어둔 Context를 import해서 useContext() 내에 넣어준다.
그럼 그 자리에 공유했던 state를 전부 가져와 쓸 수 있게 된다.

Context API의 단점
1. state 변경시 불필요한 컴포넌트까지 재렌더링 될 수 있다.
2. useContext()를 사용하고 있는 컴포넌트는 나중에 다른 파일에서 재사용할 때 Context를 import 하는게 번거로워질 수 있다.

위 같은 단점 때문에 Redux 같은 라이브러리를 사용한다.