데이터가 필요하지 않음에도
자식 컴포넌트에 전달하기 위해 props를 전달해야하는 과정"context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다." - 출처: React Docs
일반적인 React 애플리케이션에서 데이터는 위에서 아래로
(즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 이 과정이 번거로울 수 있습니다.
Context를 사용하게 되면 Context 라는 별도의 공간에 전역적으로 데이터를 저장하기 때문에 부모 컴포넌트에서 자식 컴포넌트로 매번 props를 전달하지 않아도 데이터를 필요로하는 컴포넌트에서만 Context 객체에서 필요한 데이터를 가져서 쓸 수 있게 되는 편리함을 갖게 된다. 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유
하도록 할 수 있습니다.
createContext : Context 객체를 만든다.
Provider : 생성된 Context 의 props 를 하위 컴포넌트에 전달하는 역할을 한다.
Consumer : Context 의 변화를 감시하는 역할을 한다.
const MyContext = React.creatContext(defaultValue);
context 객체는 Provider라는 컴포넌트를 가지고 있기 때문에
<MyContext.Provider value={전역적(global)으로 전달하고자 하는 값}>
{이 Context 안에 위치 할 자식 컴포넌트들}
</MyContext.Provider>
위와 같이 컴포넌트를 쓸 수 있음.
참고문헌