React Context 간단 예제

1. Context 만들기

import React from 'react';
import { createContext } from 'react';

const NewContext = createContext();

 

2. Context를 사용하려는 컴포넌트 트리 최상위에 Provider 컴포넌트 배치하기

export default function MyContext() {
  const username = 'Dr.Context';
  const [isLogin] = useState(false);
  return (
    <NewContext.Provider value={{ username, isLogin }}>
      <Component />
    </NewContext.Provider>
  );
}

 

3. useContext 사용해 등록한 데이터 읽어오기

function Component() {
  const { username, isLogin } = useContext(NewContext);
  return (
    <div>
      {`Hello ${isLogin ? username : 'visitor'}, please
      ${isLogin ? 'logOut' : 'logIn'}`}
    </div>
  );
}