Context

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.

일반적으로 리액트에서 데이터는 props를 통해 부모 컴포넌트 -> 자식 컴포넌트 순서로 전달된다. 하지만 애플리케이션 안의 여러 컴포넌트들에 전해주려면 다음과 같이 과정이 복잡해질 수 있다.

<Color color={color} setColor={setColor}/>
	<Color color={color} setColor={setColor}/>
		<Color color={color} setColor={setColor}/>
        	<UseColor color={color} setColor={setColor} />
        </Color>
    </Color>
</Color>

이러한 현상을 Prop Drilling이라고 부르며, 이런 상황을 해결할 수 있는 방법이 ContextAPI이다.

하지만 contextAPI의 사용은 nested된 컴포넌트가 많은 경우에 사용하기 위함이며, contextAPI를 사용하면 컴포넌트가 재사용하기 어려워지니 꼭 필요할 때 쓰는 것을 권장한다.

API

1. React.createContext: Context 객체 생성

const MyContext = React.createContext(initValue);

---

2. Context.Provider

<MyContext.Provider value={전달하려는 값}>

• Provider 컴포넌트는 value prop을 받아 이 값을 하위에 있는 자식 컴포넌트에게 전달할 수 있다.
• ContextAPI를 사용하면 전역적으로 상태를 공유할 수 있고
  원하는 곳의 상태를 바꿔 하위 컴포넌트의 값을 편하게 바꿀 수 있다.

---

3. useContext : context 객체의 현재 값을 반환한다.

const value = useContext(MyContext);

사용예시

https://stackblitz.com/edit/react-fez2c1?embed=1&file=src/App.js

참고

• 생활코딩 유튜브
• 리액트 공식문서