안녕하세요. 오늘은 Context Api에 대해서 알아보고자 합니다.
Context Api는 무엇인가
React에서 데이터는 위에서 아래로, 부모에서 자식으로 흐르도록 고안되어 있습니다. 이때 데이터를 전달하는 방식이 props를 전달하는 것인데요, Context api는 이 props를 명시적으로 전해주지 않고도 해당 컴포넌트 하위의 모든 컴포넌트에서 값을 전달받을수 있도록 합니다.
어떤 문제를 해결할수 있나요?
context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다.
props drilling이라고도 불리는, 상태를 공유하기 위해 사돈에 팔촌까지 부모의 상태를 알아야하는 상황을 피하게 해줍니다. 이러한 데이터에는 ui 테마, 서버로부터 받아온 데이터 등 단일 컴포넌트에서만 접근하진 않는 정보들이 있습니다.
이 지점에서 Redux와 같은 상태관리 라이브러리와 자주 비교되고 있습니다. 그런데 이 둘의 타겟점은 살짝 다르다고 볼 수 있습니다.
- redux: 하나의 스테이트 소스 트리에서 상태를 관리한다.
- context: 스테이트 소스에 대한 제한이 없다.
context는 스테이트 소스를 몇개 만들던 제한이 없기때문에 아래와 같은 접근이 가능합니다.
즉 어떤 단위에서만 공유하면 되는 정보를 굳이 redux를 통해서 전역적으로 관리할 필요는 없기 때문입니다. 주로 ui적 요소(모달창 on/off 상황, 테이블 필터 쿼리 상황 등등..)를 공유하는데 사용됩니다.
어떻게 사용하나요?
Context 는 react에 기본으로 제공하기때문에 별도의 설치가 필요 없고 러닝커브가 낮다는 장점이 있습니다. (컨벤션이 정해져있지 않다는 단점도 있죠.)
context를 사용하기 위해서는 Context와 Provider, Consumer 이 세가지만 알면 됩니다.
먼저 Context 객체를 만들어봅니다.
const myContext = createContext();이 컨텍스트에 값을 담아 제공하는 Provider와 값을 전달받는 Consumer만 지정해주면 됩니다.
export function MyContextProvider({ children }) { const [darkMode, setDarkMode] = useState(false); const darkModeOnOff = () => setDarkMode(!darkMode);
const value = { darkMode, darkModeOnOff }; return (
<myContext.Provider value={value}>
{children}
</myContext.Provider>;
)
}
myContext의 Provider를 MyContextProvider 컴포넌트로 묶었습니다. 이 컴포넌트를 이용해서 Provider를 간편하게 사용할수 있습니다.
export function useMyContext() { return useContext(myContext);}
useContext의 등장으로 context.Consumer를 사용하지 않고도 간단히 컨텍스트에 접근할 수 있게 되었습니다.
예제 코드처럼 MyContextProvider 컴포넌트와 useMyContext함수를 통해 간편하게 컨텍스트에 접근할 수 있습니다.
class형태로 작성하신다면 공식문서를 참고해주세요.
