[ react ] Context

<Context/>

---

TL;DR

( feat . 부모가 자식에게 props 를 .... )

 

 

블로그에 다크모드 기능을 추가하다가 , 상위 컴포넌트에서 하위 컴포넌트's 에게 props를 보내야할 경우가 있었습니다. but.. 하위컴포넌트에서 다시 하위컴포넌트로 props를 내려줘야 하는 상황상황상황이 생겼습니다. 그리하여 하위 컴포넌트에 props로 계속 내려주는게 아닌 어딘가에 저장을 해놓고 루트 레벨에 상관없는 컴포넌트들이 가져다가 사용할 수는 없을까 싶어 알아보다가 react-context api 라는것을 알게되어 정리하게 되었습니다.

---

# 언제 사용해야할까 ?

Context는 React 컴포넌트 트리 안에서 전역적(global) 이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법이며 ex) 로그인한 유저 , 테마 , 선호하는 언어 등이 있으며 , Provider를 이용하여 하위 트리에 전역적으로 값을 전달하고 싶을 경우 사용할 수 있습니다.

---

# API

React.createContext

 

const newContext = React.createContext(defaultValue);

 

function App() { 
	const [theme, setTheme] = useState('light'); 
    // ... return ( 
    <newContext.Provider value={theme}> 
    	<Page /> 
    </newContext.Provider> );
 }

Context 객체를 만들면 , Context 객체를 바라보고 있는 컴포넌트를 렌더링할때 React는 트리 상위에서 가장 가까지 있는 짝이 맞는 Provider 을 통하여 값을 일습니다. defaultValue 매개변수는 트리 안에서 Provider 를 찾지 못했을 경우 사용되는 값 입니다.

<NewContext.Provider value={ /* current value */}

Provider는 context를 바라보고 있는 컴포넌트들에게 context의 변화를 알리는 역할을 합니다.

Provider 컴포넌트는 value prop을 받아서 이 값을 하위에 있는 컴포넌트에게 전달합니다. 값을 전달받을 수 있는 컴포넌트의 수 제한은 없습니다. Provider 하위에 또 다른 Provider 를 배치 가능하며 , 이 경우에는 하위 Provider 의 값이 우선이 됩니다.

Provider 하위에서 context를 바라보고 있는 모든 컴포넌트는 Provider 의 value prop 이 바뀔 때 마다 다시 렌더링이 됩니다.

 

 

Context.Consumer

 

<newContext.Consumer>
    {
        value => 
        // context 값을 이용한 렌더링
    }
</newContext.Consumer> 

 

function Button() {
    // 🟡 Legacy way (not recommended)
    return (
      <newContext.Consumer>
        {theme => (
          <button className={theme} />
        )}
      </newContext.Consumer>
    );
  }

context 변화를 탐지하는 React 컴포넌트입니다.

Consumer를 사용하면 함수 컴포넌트안에서 context를 탐지 , 구독 , 바라볼 수 있습니다.

Context.Consumer 함수는 context 의 현재값을 받고 , React 노드를 반환합니다. 이 함수가 받는 value 매개변수 값은 해당 context 의 value prop과 동일합니다. 만약 상위에 Provider 가 없다면 value 매개변수 createContext()에서 정의한 defaultValue 값과 동일합니다.

 

 

useContext

 

  function Button() {
    // ✅ Recommended way
    const theme = useContext(newContext);
    return <button className={theme} />;
  }

하위 컴포넌트에서 Context를 사용하려면 useContext hook을 임포트하여 주고 , useContext(createContext로 생성한 useContext 객체) 로 접근할 수 있습니다.