[React] Context란? | Context 사용방법과 예시

 

Context란?

리액트에서는 값을 관리할 때 useState를 사용해서 값을 선언하고 상태를 관리한다.

const [a,setA] = useState('');

 

useState는 컴포넌트 안에서 선언하고, 이렇게 선언한 값은 컴포넌트 내에서만 사용이 가능하다

만약 컴포넌트에게 자식이 있다면 자식에게 props를 사용해서 값을 전달 해 주는 것이 가능하다

 

 

만약 위와 같이 컴포넌트들을 만들었다고 가정하자

컴포넌트 A에서도 쓰고 B에서도 쓰고 C, D, E에서도 써야하는 값이 있다면 어떻게 해야할까?

 

최상위 컴포넌트인 App에서 useState로 상태를 만든 다음

A에게 Props로 전달해주고, B에게 Props로 전달해주고, B의 자식 컴포넌트인 C와 D에도 Props로 전달해주고, C의 자식 컴포넌트인 E에도 Props로 전달해주고...

 

이렇게 여러번의 Props를 거쳐 상태를 전달해줘야한다.

만약 B의 자식이 C, E 뿐만 아니라 F, G, H, I... 까지 있다면?!

계속계속 아래로 아래로 Props를 전달해줘야 한다.

 

이러한 상태를 Props Drilling이라고 한다.

 

이 문제는 바로 Context를 사용해 해결할 수 있다!

 

Context 사용 방법

1. context 폴더를 만든 다음 그 안에 context.jsx 파일을 만든다. ex) ThemeContext.jsp 이런식으루

2. createContext()를 사용해 ThemeContext를 만든다

3. Provider를 만든다

4. Provider 안에는 상태와 기능을 만들 수 있고

5. return 에서는 반드시 자식 {children}을 담을 수 있는 형태로 만든다음 value={}에 4.에서 만든 상태와 기능을 넣는다.

 

import { createContext, useState } from "react";

export const ThemeContext = createContext();

export function ThemeProvider({children}){

    const [mode, setMode] = useState(false);
    
    const changeMode = () => {
        setMode((mode) => !mode)
    }

    return(
        <ThemeContext.Provider value={{mode, changeMode}}>
            {children}
        </ThemeContext.Provider>
    )
}

 

이렇게 Context를 만들었다면 이제 컴포넌트를 context provider로 감싸줘야 한다.

위의 컴포넌트를 예시로 들자면

 

function App() {

  return (
    <ThemeProvider>
    	<ComponentA/>
        <ComponentB/>
    </ThemeProvider>
  );
}

export default App;

 

이렇게 되면 이제 ThemeContext에서 만들어둔 mode와 changeMode를

컴포넌트 A, B, C, D, E에서 모두 사용할 수 있다.

어떻게 사용하냐면

이제 useState()대신 useContext()를 쓰는것이다.

 

export default function ComponentB(){

	const {mode, changeMode} = useContext(ThemeContext);

	return(
    	<>
        	<ComponentC/>
            <ComponentE/>
        </>
    )
}

 

간단하쥬?