React - Context Hook

Context

Context란 리액트 컴포넌트에서 props 없이 전역적으로 값을 공유할 수 있게 해 준다. 

 

 

Context 사용하기 

1. Context 생성

import React, { createContext, useContext, useState } from 'react';
const MyContext = createContext(); //createContext() 함수를 사용해 생성함

 

MyContext는 Provider와 Consumer를 제공한다.

근데 보통 Provider를 사용해 값을 공급하고, Consumer는 useContext를 대체할 수 있다.

 

2. Context Provider로 값 전달하기

Provider 컴포넌트를 사용해 하위 컴포넌트에게 값을 전달해준다.

value를 넣으면 그 값을 하위 컴포넌트들에서 사용할 수 있다.

export const MyProvider = ({ children }) => {
    const [user, setUser] = useState(null);

    return (
        <MyContext.Provider value={{ user, setUser }}> //값 전달
            {children}
        </MyContext.Provider>
    );
};

 

• user : Context에서 관리할 상태
• setUser : 그 상태를 변경하는 함수
• value를 Provider로 감싼 컴포넌트에서 사용할 수 있음

 

3. 값 사용하기

import { useContext } from 'react';
import { MyContext } from './MyContext';

const UserProfile = () => {
    const { user, setUser } = useContext(MyContext);

    return (
        <div>
            <h1>{user ? user.username : 'Guest'}</h1>
            <button onClick={() => setUser({ username: 'juyeon' })}>로그인</button>
        </div>
    );
};

• useContext를 사용해 하위 컴포넌트에서 Context의 값을 가져올 수 있다
• 즉, useContext(MyContext)를 통해 MyContext에서 전달된 user와 setUser를 사용할 수 있다.
• 삼항연산자를 사용해 user가 없으면 'Guest'를 출력하게 한다.

 

4. Context를 여러 컴포넌트에 적용하기

import { MyProvider } from './MyContext';
import UserProfile from './UserProfile';

function App() {
    return (
        <MyProvider>
            <UserProfile />
        </MyProvider>
    );
}

export default App;

• MyProvider로 감싸면 하위에 있는 UserProfile 같은 컴포넌트에서 useContext를 사용해 user 상태를 공유할 수 있다.