React 학습 Context

context

: react 컴포넌트 트리 안에서 전역적으로 필요한 데이터(state, function)를 props대신 사용하며 react 16버전 부터 사용 할 수 있는 내장 api이다.

하지만 꼭 전역적일 필요는 없고 컴포넌트간에 데이터를 전달하는 방법이라고 생각하면 된다.

그렇지만 context는 전체적인 상태관리를 위해 만들어진게 아니다.

데이터를 쉽게 사용하기 위해 만들어졌다.

 

context를 사용 할 경우 props가 가지고 있던 문제 props drilling을 해결 할 수 있다.

 

 

[ context를 자주 사용하는 데이터 종류 ]

 

1. 테마 데이터 (다크모드 & 라이트 모드)

2. 사용자 데이터 (현재 인증된 사용자)

3. 로케일 데이터 (언어, 지역)

 

[ 사용방법 ]

1. createContex

import { createContext } from 'react';
const MyContext = createContext();

- context 객체를 만든다.

- 컴포넌트가 이 context를 가지려면 해당 컴포넌트 상위에 provider로 부터 context를 정의한 변수 MyContext를 감싸면 된다

 

2. provider, useContext

// 필요한 함수 불러오기
import { createContext, useContext, useState } from 'react';

// context만들기
const CounterContext = createContext();

function CounterProvier({children}){
	const [counter, setCounter] = useState(1)
    
	return (
    	<Countercontext.Provider value={counter}>
        	{children}
        </Countercontext.Provider>
    )
}

function useCounter() {
	// useContext라는 hook을 사용하여 context에서 넣은 값에 접근가능
	const value = useContext(CounterContext)
    
    // value값이 없는 경우는 프로바이더에서 값을 못받은것이므로 에러처리
    if(value === undefined){
    	throw new Error('useCounterState에 프로바이더를 설정 하세요')
    }
    return value
}

function App() {
	return (
    	<CounterProvider>
            <Value />
        </CounterProvider>
    )
}

function Value() {
	// 여기서 받아서 사용
	const counter = useCounter()
    
	return <h1>{counter}</h1>
}