🔨 Props Drilling
- props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정
- props를 통해 데이터를 전달하는 과정에서 중간 컴포넌트는 그
데이터가 필요하지 않음에도자식 컴포넌트에 전달하기 위해 props를 전달해야하는 과정 - App.js에서 데이터를 하위컴포넌트까지 쭉 전달하면 데이터 하나가 변경되었을 때, 일일히 변경해줘야 하는 불편함이 있습니다.
Context API
"context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다." - 출처: React Docs
일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 이 과정이 번거로울 수 있습니다.
Context를 사용하게 되면 Context 라는 별도의 공간에 전역적으로 데이터를 저장하기 때문에 부모 컴포넌트에서 자식 컴포넌트로 매번 props를 전달하지 않아도 데이터를 필요로하는 컴포넌트에서만 Context 객체에서 필요한 데이터를 가져서 쓸 수 있게 되는 편리함을 갖게 된다. 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있습니다.
- 컴포넌트간에 props를 일일이 전달하는 props drilling 현상을 개선하기 위해 사용한다.
- 관련된 컴포넌트들의 최상단에서 데이터를 관리하고 자식 컴포넌트 중 필요할 때만 직접 가져다 사용하는 구조이다.
createContext : Context 객체를 만든다.
Provider : 생성된 Context 의 props 를 하위 컴포넌트에 전달하는 역할을 한다.
Consumer : Context 의 변화를 감시하는 역할을 한다.
Context 객체 생성
const MyContext = React.creatContext(defaultValue);Context Provider를 통한 데이터 공급
context 객체는 Provider라는 컴포넌트를 가지고 있기 때문에
<MyContext.Provider value={전역적(global)으로 전달하고자 하는 값}>
{이 Context 안에 위치 할 자식 컴포넌트들}
</MyContext.Provider>위와 같이 컴포넌트를 쓸 수 있음.
Provider 컴포넌트
- value라는 prop을 받아서 이 값을 하위에 있는 자식 컴포넌트들에게 전달한다.
- 값을 전달받을 수 있는 자식 컴포넌트 수 제한 없음
- Provider 하위에 또 다른 Provider를 배치하는 것도 가능하며, 이 경우 하위 Provider의 값이 우선시 된다.
참고문헌
