리액트 컨텍스트란?

리액트에서 Context는 컴포넌트 트리에서 전역적으로 데이터 공유할 수 있는 방법을 제공한다.

일반적으로 React에서는 데이터를 props를 통해 자식 컴포넌트에 전달하지만, 중첩된 컴포넌트가 많을 경우, props drilling(여러 컴포넌트를 거쳐 데이터를 전달하는 문제)이 발생할 수 있다.

이 문제를 해결하기 위해 React는 Context API를 제공한다.

Context는 전역 상태를 관리하거나 여러 컴포넌트 간에 데이터를 간편하게 공유할 수 있도록 도와준다.

예를 들어, 테마 설정, 로그인 상태, 다국어 지원 등 여러 컴포넌트에서 공통적으로 사용되는 데이터를 다룰 때 유용하다.

---

리액트 컨텍스트의 구성 요소

리액트의 Context는 다음과 같은 3가지 주요 요소로 구성된다.

 

1. React.createContext():

• 컨텍스트를 생성하는 함수
• createContext()를 사용하여 Provider와 Consumer를 생성한다.
• createContext()는 기본 값을 인자로 받을 수 있으며, 이 값은 컨텍스트를 제공하는 Provider가 없을 때 기본값으로 사용된다.

2. Context.Provider

• Provider는 하위 컴포넌트들이 컨텍스트 값을 구독할 수 있도록 데이터를 전달하는 역할을 한다.
• Provider는 value prop을 통해 데이터를 전달한다.
• 이 컴포넌트는 트리에서 특정 위치에 두어 그 아래의 컴포넌트들에게 값을 제공한다.

3. Context.Consumer

• Consumer는 Provider에서 전달된 값을 사용하기 위해 컨텍스트 값을 구독하는 컴포넌트이다.
• 이 컴포넌트는 함수형 컴포넌트를 사용하여 컨텍스트의 값을 받을 수 있다.

4. useContext()훅

• Consumer 컴포넌트를 사용하지 않고, 훅을 이용하면 더 간편하게 컨텍스트 값을 사용할 수 있다.
• useContext()훅은 컨텍스트 값을 직접 반환한다.

---

컨텍스트 사용 예시

 

1. 컨텍스트 생성

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

// 1. Context 생성
const ThemeContext = createContext('light'); // 기본값은 'light'

 

2. Provider로 데이터 전달

function App() {
    const [theme, setTheme] = useState('dark'); // 상태 관리

    return (
        // 2. ThemeContext.Provider로 하위 컴포넌트에 값 전달
        <ThemeContext.Provider value={theme}>
            <Header />
            <Content />
        </ThemeContext.Provider>
    );
}

 

3. Consumer로 데이터 사용

Consumer를 사용하여 컨텍스트 값을 구독할 수 있다.

function Header() {
    return (
        <ThemeContext.Consumer>
            {theme => (
                <header style={{ background: theme === 'dark' ? 'black' : 'white' }}>
                    <h1>{theme === 'dark' ? 'Dark Mode' : 'Light Mode'}</h1>
                </header>
            )}
        </ThemeContext.Consumer>
    );
}

 

4. useContext훅을 이용한 사용 (추천)

useContext 훅을 사용하여 더 간편하게 컨텍스트 값을 구독할 수 있다.

import React, { useContext } from 'react';

function Header() {
    const theme = useContext(ThemeContext); // useContext로 컨텍스트 값 받아오기

    return (
        <header style={{ background: theme === 'dark' ? 'black' : 'white' }}>
            <h1>{theme === 'dark' ? 'Dark Mode' : 'Light Mode'}</h1>
        </header>
    );
}

---

리액트 컨텍스트의 주요 활용 예시

1. 다국어 지원 : 여러 콤포넌트에서 사용할 수 있는 언어 정보를 전역 상태로 관리 할 때 유용하다.
2. 테마 관리 : 다크모드와 라이트 모드 등의 테마를 여러 컴포넌트에서 사용할 수 있도록 할 때 유용하다.
3. 사용자 인증 상태 : 로그인 상태나 인증 정보를 여러 컴포넌트에서 쉽게 공유할 수 있다.

---

컨텍스트 사용 시 주의 사항

1. 리렌더링 성능:

• Context의 값이 변경되면, 해당 값을 구독하는 모든 컴포넌트가 다시 렌더링된다. 따라서 너무 자주 변경되는 값을 Context로 전달하면 성능 문제가 발생할 수 있다.
• 값을 자주 업데이트해야 하는 경으, useMemo나 React.memo와 같은 최적화 기법을 사용할 수 있다.

2. 상태 관리의 복잡도:

• 리액트의 상태 관리 방법 중 Context는 주로 전역 상태를 처리하는데 사용된다. 하지만 너무 많은 상태를 Context로 관리하면 코드가 복잡해질 수 있다.
• Context는 간단한 전역 상태 공유에는 유용하지만, 복잡한 상태 관리에는 Redux나 Recoil과 같은 외부 라이브러리를 사용하는 것이 더 좋을 수 있다.