Context API와 전역 상태 관리, Context API로 상태 공유하기

리액트(React)에서는 컴포넌트 간의 상태(state)를 전달하고 관리하는 데 여러 방법이 있습니다. 그중에서도 Context API는 전역 상태 관리의 중요 도구로 자리잡았습니다. 이 글에서는 Context API의 기본 개념을 소개하고, 이를 활용하여 상태를 관리하고 공유하는 방법에 대해 자세히 설명하겠습니다.

1. Context API란?

Context API는 리액트에서 전역적으로 데이터를 공유할 수 있도록 도와주는 시스템입니다. 컴포넌트 트리 전체에서 상태(state)나 함수를 쉽게 전달할 수 있으며, props drilling을 피할 수 있는 유용한 방법입니다. 이는 특정 컴포넌트에 속하지 않은 데이터나 함수를 다른 컴포넌트에서 사용할 수 있게 해줍니다.

2. Context API의 장점

상태 관리 편리성: 컴포넌트 트리에 깊게 위치한 하위 컴포넌트에서도 상위 컴포넌트의 상태를 쉽게 접근할 수 있습니다.
props drilling 방지: 여러 레벨의 컴포넌트에서 props를 전달할 필요 없이 필요한 컴포넌트에서 직접 데이터에 접근할 수 있습니다.
재사용 가능성: Context를 통해 정의한 상태와 함수를 여러 컴포넌트에서 재사용할 수 있습니다.

3. Context API 사용법

3.1 Context 생성하기

Context API를 사용하려면 먼저 createContext 함수를 사용하여 Context를 생성해야 합니다. 아래의 예시를 통해 이해해보겠습니다.

import React, { createContext } from 'react';

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

3.2 Provider와 Consumer

생성한 Context는 두 가지 주요 컴포넌트, Provider와 Consumer를 가지고 있습니다. Provider는 Context의 값을 하위 컴포넌트에 제공하고, Consumer는 제공된 값을 사용할 수 있게 해줍니다.

const MyProvider = ({ children }) => {
    const [state, setState] = React.useState({ name: '리액트', version: '18.0' });

    return (
        
            {children}
        
    );
};

const MyComponent = () => {
    return (
        
            {({ state }) => 이름: {state.name}, 버전: {state.version}}
        
    );
};

3.3 Context 사용 예시

이제 Context API의 생성 및 사용 방법에 대해 알아보았으니, 이를 활용하여 상태를 공유하는 예시를 보여드리겠습니다.

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

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

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

    return (
        
            {children}
        
    );
};

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

    return (
        
            Hello, Themed World!
            
        
    );
};

const App = () => {
    return (
        
            
        
    );
};

ReactDOM.render(, document.getElementById('root'));

4. 전역 상태 관리의 필요성

리액트 애플리케이션의 규모가 커질수록 상태 관리의 중요성이 증가합니다. 특히 여러 컴포넌트에서 상태를 공유해야 할 때 Context API는 매우 유용합니다. 상급 컴포넌트에서 하급 컴포넌트로 상태를 전달하다 보면, 컴포넌트가 깊어질수록 props drilling이 발생하므로 코드가 복잡해질 수 있습니다. 이런 경우 Context를 사용하여 상태 관리를 단순화할 수 있습니다.

5. Context API의 한계점

Context API는 매우 유용하지만, 몇 가지 한계점도 존재합니다.

불필요한 리렌더링: Context를 사용하는 컴포넌트는 Context의 값이 변경되면 리렌더링 됩니다. 이를 피하고자 memo화 또는 최적화 기술을 사용해야 할 수 있습니다.
성능 문제: 너무 많은 상태를 Context에 저장하면 성능 저하를 유발할 수 있습니다. 이럴 때는 Redux와 같은 외부 상태 관리 라이브러리를 고려하는 것이 좋습니다.

6. 결론

Context API는 리액트 애플리케이션에서 상태를 효율적으로 관리하고 공유할 수 있는 강력한 도구입니다. 적절히 사용한다면, 컴포넌트 간의 데이터 전송을 간단하고 직관적으로 만들어 줄 수 있습니다. 그러나 항상 성능 저하와 불필요한 리렌더링을 고려하여 사용해야 합니다.

이 글을 통해 Context API의 기본적인 개념과 예제를 이해하셨기를 바랍니다. 앞으로의 리액트 개발에 많은 도움이 되기를 바랍니다. 더 나아가 Redux 같은 외부 상태 관리 도구를 도전해보시면, 상태 관리의 다양한 방법을 경험해보실 수 있을 것입니다.