React 에서 context 란 무엇인가 ? ( 리액트 비긴즈 02 )

내가 처음으로 useContext( ) 를 맞이 한 것은 웹 전체에 다크모드를 설정하기 위해서 마주하게 되었다. useContext(  ) 를 통해, 다크모드인지 아닌지를 넘겨주고, 이를 통해, 전체 웹 CSS 에 클래스 명을 다르게 주면서 이를 가능하게 해주었다. 이 뿐만 아니라, 하위 컴포넌트에서 axios 를  통해 받아온 정보를 상위 컴포넌트에서 사용하려고 할 때, useContext( ) 가 필요함을 느꼈다.  내가 이해하고, 바로 적용할 수 있을 것이라고 생각했지만, 혼자 해볼려고 했는데, 헷갈리는 부분이 많아서 이에 대해 더 자세히 알아보기 위해서, REACT 공식문서를 살펴보려고 한다. 

useContext ( ) 란 무엇인가 ? 

useContext is a React Hook that lets you read and subscribe to context from your component 
출처: https://react.dev/reference/react/useContext

 useContext 는 공식문서에 따르면 , useContext 리액트 훅은 컴포넌트의 context 를 읽고, 구독하는 것을 도와주는 것이라고 한다. 이 말을 이해하기 위해서 , context 라는 것에 대해서 더 자세히 살펴볼 필요가 있다. context 를 알기 위해서는 , 왜 이것이 필요한지 알면 더 쉽게 이해할 수 있습니다. React 를 사용함에 있어서 , 부모 컴포넌트 에서 자식 컴포넌트로 정보를 넘길 때, props 를 통해서 넘기곤 합니다. 그러나, 정보를 넘겨야하는 컴포넌트들 사이에 많은 컴포넌트들이 존재할 경우,  props 만을 이용해서 , 정보를 전달하는 일은 매우 불편하다는 것을 느낄 것입니다. 이를 해결해주는 것이 context 입니다. 공식문서에서는 context를 props 를 통하지 않고서도, tree 밑에만 있다면, 얼마나 깊더라도, 부모 컴포넌트의 정보를 이용가능하도록 만들어준다고 한다. 

 

Context 는 어떻게 사용하는 것인가 ? 

React 공식문서에서 Context 를 사용하는 데 있어서 3가지 STEP 을 소개한다 .

STEP 1 : Create the context   
STEP 2 : Use the context        
STEP 3 : Provide the context  
출처 : https://react.dev/learn/passing-data-deeply-with-context

위에서 언급돼있는 STEP 들에 대해서 간략히 설명해보려고 한다. 첫번째로 해야하는 것은 Create the context 다.  

const DarkmodeContext = createContext ( 1 ) ;

위에서 처럼, context 를 생성하야하는데 ,여기서 중요한 점은 default value, 초기값을 설정해줘야 한다는 것이다. 만약에 , STEP 3 인 Provide the context 를 하지 않는다면, useContext 는 위에서 설정한 초기값을 return 할 것이다 . 그렇다면, STEP 2 인 Use the context 를 살펴보면 , 다음과 같다

import { LevelContext } from './LevelContext.js' ; 
const level = useContext ( LevelContext ) ;

React Hook 중 하나인 useContext ( ) 를 통해서, context 에 있는 정보를 가져와서 사용할 수 있다. 이렇게만 하면 , 모든 것이 되는 것이 아니다 . 마지막 단계를 진행해야 한다. 

import { LevelContext } from './LevelContext.js' ; 
<LevelContext.Provider value={level} >
{children}
</LevelContext.Provider >

  이렇게 React 의 context 에 대해서 알아봤습니다.  다음에는 또 다른 주제로 찾아뵙도록 하겠습니다.

참조사이트 
https://react.dev/learn/passing-data-deeply-with-context
https://react.dev/reference/react/useContext