[블로깅 챌린지] React Context 정복하기

오늘은 블로깅 챌린지 두번째 날이 다가왔다 ! 오늘은 최근에 배웠던 Redux에서 상태 관리 라이브러리로 잠깐 소개만 되었던 리액트 Context에 대해 공부해보았다. 처음 접하는 개념이라 어려웠지만 알아두면 좋을 것 같다 

 

Context 란?
전역적으로 데이터를 공유하기 위한 기능임

일반적으로 React 애플리케이션에서 props를 이용해 데이터를 컴포넌트에 전달하는데
컴포넌트의 깊이가 깊어질수록 매번 props 를 사용해 데이터를 전달하는 것이 번거롭고 복잡해질 수 있음
따라서 이 경우 Context를 사용하면 중간 컴포넌트를 건너 뛰고 데이터를 바로 전달할 수 있음

Context 요소

Provider	Consumer
데이터를 제공	데이터를 사용

Context 사용 

import React from 'react';

const MyContext = React.createContext(defaultValue);
//------------
<MyContext.Provider value={/* 값 */}>
  {/* Provider 하위의 컴포넌트들 */}
</MyContext.Provider>
//------------
<MyContext.Consumer>
  {value => /* 값을 이용한 렌더링 */}
</MyContext.Consumer>

import React from 'react';

// Context 객체 생성
const MyContext = React.createContext('defaultValue');

function App() {
  return (
    // Provider 컴포넌트 사용
    <MyContext.Provider value="Provider Value">
      <div>
        <Child1 />
      </div>
    </MyContext.Provider>
  );
}

function Child1() {
  return (
    <div>
      <Child2 />
    </div>
  );
}

function Child2() {
  return (
    // Consumer 컴포넌트 사용
    <MyContext.Consumer>
      {value => <div>Consumer Value: {value}</div>}
    </MyContext.Consumer>
  );
}

export default App;

Context 사용 예시 

사용자 인증 정보를 전역적으로 공유할 때를 예시로 들자면 로그인한 사용자의 정보를 여러 컴포넌트에서 사용해야 하는 경우 Context 를 사용하여 인증 정보를 공유할 수 있음 

 

1. Context 생성 

createContext() 함수를 사용하여 생성하며 , 인자로 전달한 값은 Context의 기본값임 . 이러한 기본값은 적절한 Povider 를 찾지 못했을 때에만 쓰이는 값임. (Provider 를 통해 undefined를 값으로 보낸다고 해도 컴포넌트들이 기본값을 읽지는 않음 )

 

import React from 'react';

const AuthContext = React.createContext({
  isAuthenticated: false,
  login: () => {},
  logout: () => {}
});

export default AuthContext;

2. Provider 컴포넌트를 사용하여 Context의 값을 제공 

provider 컴포넌트는 최상위 컴포넌트에서 사용됨.  value props에 전달한 값은 Context의 값을 나타냄 

 

import React from 'react';
import AuthContext from './AuthContext';

function App() {
  const [isAuthenticated, setIsAuthenticated] = React.useState(false);

  const loginHandler = () => {
    setIsAuthenticated(true);
  }

  const logoutHandler = () => {
    setIsAuthenticated(false);
  }

  return (
    <AuthContext.Provider
      value={{
        isAuthenticated: isAuthenticated,
        login: loginHandler,
        logout: logoutHandler
      }}>
      <div className="App">
        <Header />
        <Main />
        <Footer />
      </div>
    </AuthContext.Provider>
  );
}

export default App;

 

3. Consumer 컴포넌트를 사용하여 Context값을 사용

Consumer 컴포넌트는 Provider 컴포넌트와 마찬가지로 컴포넌트 내부에서 사용됨 

 

import React from 'react';
import AuthContext from './AuthContext';

function Header() {
  return (
    <AuthContext.Consumer>
      {({ isAuthenticated, login, logout }) => (
        <header>
          {isAuthenticated ? (
            <button onClick={logout}>Logout</button>
          ) : (
            <button onClick={login}>Login</button>
          )}
        </header>
      )}
    </AuthContext.Consumer>
  );
}

export default Header;

 

 

즉 위의 예시는 AuthContext 라는 Context 를 생성하여 인증 정보를 전역적으로 공유하고 , Provider컴포넌트로 값을 제공하며 , Consumer 컴포넌트로 값을 사용함 .

 

참고하면 좋은 문서 

https://ko.legacy.reactjs.org/docs/context.html#when-to-use-context