배경
필자는 한밭대학교 무선통신소프트웨어 연구실에서 교수님과 연구원님의 지도 아래 2023 Wisoft React Seminar를 진행하고 있다.
드림코딩 아카데미 | Dream Coding Academy
위 강의로 연구실에서 세미나를 진행하던 중 전역 상태관리에 대한 컨셉을 잡고 가기 위해 Context 를 소개하고 있다.
따라서 복습으로 Contex API 를 정리 및 발표하게 되었으므로, 본 글을 작성한다.
What is Context?
React 에서 Props 가 아닌 방법으로 컴포넌트 간에 상태를 공유하는 방법
먼저, React는 단방향 데이터 바인딩을 지원한다.
즉, 부모 컴포넌트의 데이터가 자식 컴포넌트로만 전달되고 반대 방향으로는 접근할 수 없다.
컴포넌트 간 상태를 공유할 때는 props 로 전달했었다.
그런데, 위 그림처럼 제일 오른쪽 아래의 말단의 컴포넌트가 props를 필요로 한다면, 그 props 를 받기 위해 모든 컴포넌트에서 props을 전달해야 한다. 이를 Prop drilling 이라 한다.
여기서 나온 개념이 Context API이다.
모든 컴포넌트들이 필요하다면 해당 데이터가 애플리케이션 전반적으로 필요한 경우 Context API 를 사용할 수 있다.
예를들면 사용자의 언어, 테마, 로그인 상태 등이 있겠다.
단, React 에서는 상태가 변경되면 re-rendering 되기 때문에, 빈번히 업데이트 되는 상태라면 Context 는 부적절하다.
또는 Umbrella 테크닉을 사용할 수 있다.
Contex 를 애플리케이션 전체로 사용할 수 있지만, 원하는 컴포넌트 트리 중간부터도 시작할 수 있다.
따라서 위 사진처럼 노란색 컴포넌트에서 상태가 변경되었다면, 그 컴포넌트 하위에 있는 컴포넌트들만 상태를 변경할 수 있다.
이를 우산을 씌우는 것 같아서 해당 강의에서는 “Umbrella” 라고 부르고 있다.
따라서 어떤 상태를 공유하고자 하는지에 따라 다양한 Umbrella를 적용할 수 있다.
실습
위와 같이 DarkMode 테마를 선택할 수 있는 기능을 Context 를 사용해 구현해보자.
Context 를 사용하려면, 관리하고자 하는 상태를 Context에 등록해야 한다.
필자의 경으 DarkMode에 대한 상태를 관리하고자 하므로 DarkModeContext.jsx 를 생성한다.
DarkModeContext.jsx 에는 DarkModeContext 라는 변수를 선언해 createContext 로 context를 만들어준다.
또한 Context를 만들때는 Provider 도 만들어야 한다.
이 Provider는 데이터를 보여주는 Umbrella를 만들어준다고 생각하면 된다.
즉, 우리가 관리하고자 하는 데이터는 Context에 담고, Provider는 그걸 어느 컴포넌트에서 공유할지를 선택해주는 것이다.
export function DarkModeProvider({children}) {
return (
<DarkModeContext.Provider>
{children}
</DarkModeContext.Provider>
);
}위 코드처럼 DarkmodeContext.Provier는 이제 chidren props로 들어온 자식 컴포넌트 들에게 자신의 상태를 공유할 수 있게 되었다.
따라서 다크모드인지를 기억하는 상태와, 이를 핸들링 할 수 있는 함수를 선언해주면 된다
이제 이렇게 만든 상태값과 핸들링하는 함수를 Context의 value props로 전달해주면 된다.
이후 DarkMode Context를 사용하기를 원하는 컴포넌트 트리 루트를 Provider로 감싸주면 된다.
마지막으로 상태를 사용하고자 하는 자식 컴포넌트에서 useContext hook 을 사용하고, 이 useContext 는 Context의 value 로 넣어준 값들을 반환한다.
인자로 Context를 넘겨줌으로써 Context의 상태에 바로 접근할 수 있다.
다시한번 순서를 정리해보자.
1. 관리하고자 하는 상태를 createContext() 로 컨텍스트화 함.
2. 그 Context를 제공할 Provider 컴포넌트를 생성, {children} props로 자기 자식으로 올 컴포넌트
들에게 Context를 제공.
3. 관리할 상태와 상태를 핸들링 하는 함수를 선언, Context.Provider 의 value props로 선언한 상태
와 함수 전달.
4. 자식 컴포넌트에서 useContext로 상태 값에 접근.