React Context API로 상태 전역 관리하기

React Context API는 React 애플리케이션에서 전역적으로 상태를 관리하기 위한 방법을 제공하는 기능입니다. 이 글에서는 React Context API의 개념과 기본적인 사용법을 소개하고, 간단한 예제를 통해 실제로 구현하는 방법을 살펴보겠습니다.

 

React Context API란 무엇인가?

• React Context API는 React 애플리케이션에서 전역적으로 데이터를 공유하고 상태를 관리하기 위한 기능입니다. 주로 컴포넌트 간의 상태 전달이 번거로운 경우에 사용됩니다.

React Context의 주요 개념:

• Context: React 컴포넌트 트리 내에서 전역적으로 공유되는 데이터를 저장하는 컨테이너입니다.
• Provider: Context의 값을 설정하는 컴포넌트로, 하위 컴포넌트에 값을 전달합니다.
• Consumer: Context의 값을 읽는 컴포넌트로, Provider에서 설정한 값을 사용할 수 있습니다.

728x90

React Context API 예제:

• 아래는 React Context API를 사용하여 전역 상태를 관리하는 간단한 예제입니다.

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

// Context 생성
const MyContext = createContext();

// Provider 컴포넌트
const MyProvider = ({ children }) => {
    const [state, setState] = useState(0);

    return (
        <MyContext.Provider value={{ state, setState }}>
            {children}
        </MyContext.Provider>
    );
};

// Consumer 컴포넌트
const MyComponent = () => {
    const { state, setState } = useContext(MyContext);

    return (
        <div>
            <p>전역 상태: {state}</p>
            <button onClick={() => setState(state + 1)}>상태 증가</button>
        </div>
    );
};

// 애플리케이션 렌더링
const App = () => (
    <MyProvider>
        <MyComponent />
    </MyProvider>
);

export default App;

 

주의사항:

• Context를 사용할 때에는 상태를 공유할 범위를 신중하게 선택해야 합니다. Context가 필요한 컴포넌트 범위를 최소화하는 것이 좋습니다.

React Context API를 사용하면 React 애플리케이션에서 전역적으로 상태를 관리할 수 있어 개발자들에게 편의를 제공합니다. Provider와 Consumer를 활용하여 데이터를 공유하고 상태를 관리하는 방법을 익혀두면, 복잡한 컴포넌트 간의 데이터 전달을 간편하게 처리할 수 있습니다.

반응형