[React] - context API

콘텍스트 API를 사용하면 부모 컴포넌트에서 상당히 멀리 떨어져있는 자식 컴포넌트에게 바로, 직접 데이터를 전달할 수 있다.
콘텍스트 API를 사용하지 않으면 부모에서 수많은 하위 컴포넌트들을 거쳐 자식 컴포넌트까지 속성값을 내려줘야할 것이다.

>사용법

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

const UserContext = createContext('unknown');
const ThemeContext = createContext('dark');
// createContext 함수를 호출하면 콘텍스트 객체 생성된다. 

export default function App() {
  const [username, setUsername] = useState("mike");
  return (
    <div>
      <ThemeContext.Provider value="Light">
      // Provider 컴포넌트를 이용해서 value 값이 전달된다.  
        <UserContext.Provider value={username}>
    	// value 값을 상태값으로 할 수도 있다. 
    	  <div>상단 메뉴</div>
    	  <Profile />
    	  <div>하단 메뉴</div>
    	</UserContext.Provider>
      </ThemeContext.Provider>
    </div>
  );
}

function Profile() {
  return (
    <div>
      <Greating />
    </div>
  );
}

function Greating() {
  const theme = useContext(ThemeContext);
  const username = useContext(UserContext);
  // useContext 훅을 사용해서 Consumer 컴포넌트를 생략하고 간단하게 Provider의 데이터를 받을 수 있다. 
  retunr (
    <p 
      style={{ color: theme === 'dark' ? 'gray' : 'green'}}
    >{`${username}님 안녕하세요`}</p>
  );
}

• 상위 컴포넌트에서 Provider 컴포넌트를 이용해서 데이터를 전달한다.
• 하위 컴포넌트에서는 useContext 훅을 이용해서 데이터를 사용한다.
• 위 예제처럼 여러 콘텍스트 객체를 중첩해서 사용할 수 있다.