[React] useContext ♦︎

# Context API

: 컴포넌트 트리에서 전역 상태를 관리하고 공유할 수 있도록 도와주는 도구 (전체적인 시스템)

- 사용 이유 : props drilling 없이 데이터를 공유할 수 있다.

useContext 훅은 이 Context API 를 함수형 컴포넌트에서 간편하게 사용하는 방법이다.

 

 

# useContext

: Context API를 사용하는 함수형 컴포넌트에서 Context 값을 쉽게 가져오기 위해 제공되는 훅(hook)

- useContext를 사용하여 컨텍스트 값을 가져올 수 있으며, 이를 통해 컴포넌트에서 컨텍스트에 저장된 데이터에 접근할 수 있다

 

[ 특징 ]

- 전역 상태 관리: 테마, 인증 상태, 사용자 정보 등 전역적으로 공유되는 데이터를 관리

- Prop Drilling 방지: 깊게 중첩된 컴포넌트에 동일한 데이터를 전달할 때 효율적

 

[ 사용 방법 ]

1. Context 생성 

- createContext 사용

import React, { createContext } from 'react';

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

- 'light'은 context 기본값

 

2. Provider로 값 전달

const App = () => {
    return (
        <ThemeContext.Provider value="light">
            <ChildComponent />
        </ThemeContext.Provider>
    );
};

 

3. useContext로 값 가져오기

import { useContext } from 'react';

const ChildComponent = () => {
    const contextValue = useContext(ThemeContext);

    return <div>{contextValue}</div>; // "light" 출력
};

 

 

# Context

: React에 내장된 Context 객체

- 컴포넌트 간에 전역적으로 데이터를 공유할 수 있도록 기능을 제공한다.

 

[ 구성 요소 ]

# Context 객체의 주요 속성

1. Provider

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

- value 속성을 통해 하위 컴포넌트들이 접근할 context 값을 설정

- Context의 값이 변경되면 Provider로 감싼 모든 하위 컴포넌트들이 리렌더링 된다.

 

2. Consumer

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

- 하위 컴포넌트에서 Context의 값을 읽기 위해 사용된다.

- 함수형을 사용하여 Context 값을 반환한다.

 

[ React Context의 동작 방식 ]

 

1. Context 생성: createContext로 기본 Context 값을 가진 Context를 만든다.

2. Provider 제공: Context.Provider를 통해 값을 설정하고 자식 컴포넌트에 전달한다.

3. Context 값 소비: useContext 또는 Consumer를 사용해 Context 값을 읽어온다.

 

// 1. Context 생성
const MyContext = createContext(defaultValue);

// 2. Provider를 통해 값 제공
<MyContext.Provider value={value}>
    {children}
</MyContext.Provider>

// 3. Consumer 또는 useContext로 값 소비
const value = useContext(MyContext);
<MyContext.Consumer>{value => /* ... */}</MyContext.Consumer>