Skip to content

React:Context

context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다. 그러한 데이터로는 현재 로그인한 유저, 테마, 선호하는 언어 등이 있습니다.

Example 

import React from 'react';
export const UserContext = React.createContext();
export default function App() {
  return (
    <UserContext.Provider value="Reed">
      <User />
    </UserContext.Provider>
  )
}
function User() {
  const value = React.useContext(UserContext);  

  return <h1>{value}</h1>;
}

NextJS 에서 사용하는 방법

클라이언트 컴포넌트에서 사용해야 한다. 

'use client';

import { createContext } from 'react';

const Context = createContext();

See also

Favorite site