useContext

이 Hook 을 사용하면 함수형 컴포넌트에서 Context 를 보다 더 쉽게 사용 할 수 있습니다.

src 디렉터리에 ContextSample.js 이라는 컴포넌트를 만들어보세요.

ContextSample.js

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

const ThemeContext = createContext('black');
const ContextSample = () => {
  const theme = useContext(ThemeContext);
  const style = {
    width: '24px',
    height: '24px',
    background: theme
  };
  return <div style={style} />;
};

export default ContextSample;

다 만드셨으면 App 컴포넌트에서 렌더링도 해주세요.

App.js

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

const App = () => {
  return <ContextSample />;
};

export default App;

다 작성하셨으면 브라우저를 확인해보세요. 검정색 사각형이 나타났나요?