TIL-2024.05.03 - React - 009. Context API

 

 

 

질문

1.  React 에서 전역 상태 관리를 하는 방법이 뭐가 있을까 ?

 

 

 

Context API

- React 에서 전역적으로 사용할 데이터가 있을 때 사용되며, 중첩된 컴포넌트 간에 데이터를 전달하는 데 사용

 

 

Context 생성 

- createContext 함수를 사용

 

 

예제

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

const MyContext = createContext();

 

Provider & Consumer

- Context를 사용하기 위해 Provider 및 Consumer를 정의 필요.

• Provider: 데이터를 제공하는 컴포넌트. value prop을 통해 데이터를 제공.
• Consumer: 데이터를 소비하는 컴포넌트.

 

 

Provider 설정

- 데이터를 제공하는 컴포넌트

 

예제

import React from "react";
import ColorBox from "./000.basic/ColorBox";
import ColorContext from "./000.basic/color";

const App = () => {
    return (
        <div className="App">
            {/* Provider 를 사용하면 Context 의 value 를 변경 */}
            {/* Provider 를 사용하는 경우, 반드시 value를 명시  */}
            <ColorContext.Provider value={{color: 'red'}}>
                <ColorBox/>
            </ColorContext.Provider>
        </div>
    );
}

export default App;

 

 

 

Consumber 설정

- 데이터를 소비하는 컴포넌트

 

예제

import React from "react";
import ColorContext from "./color";

const ColorBox = () => {
    return (
        <div>
            <ColorContext.Consumer>
                {value => (
                    <div style={{width: '64px', height: '64px', background: value.color}}/>
                )}
            </ColorContext.Consumer>
        </div>
    );
};


export default ColorBox;

 

 

 

useContext 사용

- useContext 훅을 사용하여 간편하게 Context 데이터에 접근

 

 

예제

import React, {useContext} from "react";
import ColorContext from "./color";

const ColorBox = () => {
    const { state } = useContext(ColorContext);

    return (
        <div>
            <div style={{width: '64px', height: '64px', background: state.color}}/>
            <div style={{width: '32px', height: '32px', background: state.subcolor}}/>
        </div>
    );
};


export default ColorBox;

 

 

 

실효성

1. 성능 문제:
- Context를 사용하면 컴포넌트 트리의 많은 부분이 리렌더링 됨 .
- 이는 컨텍스트의 값이 변경될 때마다 해당 컨텍스트를 사용하는 모든 하위 컴포넌트가 다시 렌더링됨.
- 이러한 리렌더링은 성능에 영향.

2. 컴포넌트의 재사용성 감소:
- 컨텍스트를 사용하여 데이터를 공유하면 해당 컨텍스트를 사용하는 컴포넌트를 재사용 힘듬.
- 컨텍스트에 종속된 컴포넌트는 해당 컨텍스트가 없는 환경에서 재사용 힘듬.

3. 컴포넌트 간의 결합도 증가:
- 컨텍스트를 사용하면 컴포넌트 간의 의존성 상승.
- 이는 컴포넌트를 재사용하기 어렵게 만들고, 코드의 복잡성을 증가.

4. 디버깅의 어려움:
- 컨텍스트를 사용하여 데이터를 전역적으로 공유하면 코드의 흐름을 추적하기 어려움.
- 특히 큰 애플리케이션에서는 컨텍스트를 사용한 데이터 흐름을 이해하기 어려움.

5. 지나친 사용으로 인한 복잡성:
- Context API를 남용하면 애플리케이션의 복잡성이 증가.
- 많은 컨텍스트를 사용하면 코드의 유지보수가 어려워짐.

 

 

 

답변

1.  React 에서 전역 상태 관리를 하는 방법이 뭐가 있을까 ?

- Context API 를 통해, 전역에서 상태 관리를 할 수 있으나, 컴포넌트 간의 결합도 증가 및 성능 이슈가 존재.

- 차라리 전역에서 상태 관리 (Redux 사용) 고민