[React]useContext

context란

• 부모 컴포넌트가 트리 아래에 있는 모든 컴포넌트에 prop drilling없이 사용할 수 있게 해줌
• 🚫context를 사용하면 컴포넌트를 재사용하기 어려워 질 수 있음

* prop drilling

https://ko.react.dev/learn/passing-data-deeply-with-context

useContext란🤔

컴포넌트에서 context를 읽고 구독할 수 있는 훅

 

context API  사용 및 개념

1. createContext : context를 생성

기본값 지정 : context providers를 찾을 수 없는 경우 기본값으로 반환

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

// Context 생성
const ThemeContext = createContext(null) // 기본값 : null

 

2. Provider : context를 하위 컴포넌트에게 전달

const ThemeProvider = ({ children }) => {
    const [theme, setTheme] = useState('light');

    const toggleTheme = () => {
        setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
    };

    return (
        <ThemeContext.Provider value={{ theme, toggleTheme }}>
            {children}
        </ThemeContext.Provider>
    );
};

 

3. useContext : context를 구독하고 해당 context의 현재 값을 읽음

const ThemedComponent = () => {
    const { theme, toggleTheme } = useContext(ThemeContext);

    return (
        <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
            <h1>{`현재 테마: ${theme}`}</h1>
            <button onClick={toggleTheme}>테마 전환</button>
        </div>
    );
};

 

 

🚫 주의🚫

• Provider에서 제공한 value가 변경될때마다 useContext가 사용된 모든 컴포넌트가 리랜더링됨☠️
• 리액트 dev에선 context를 사용하기전에 먼저 props를 전달 or jsx를 children으로 전달하는것을 권장 [참고]

Context를 사용해 데이터를 깊게 전달하기 – React