- React Context API는 무엇인가요?
React에선 상위 컴포넌트에서 하위 컴포넌트로 데이터를 넘겨주기 위해 그 사이 컴포넌트를 다 거쳐야합니다. 사이즈가 작은 로직에선 문제가 되지 않지만 로직이 커지면 모든 컴포넌트를 거쳐야 하기에 코드가 복잡해집니다. 이런 문제를 해결하기 위해 React에선 Context를 제공해줍니다. Context는 모든 레벨의 컴포넌트를 통해 전달하지 않아도 데이터를 전달할 수 있는 방법을 제공해줍니다.
- Context를 사용하는 경우
Context는 리액트 컴포넌트에서 전역으로 사용되는 데이터를 공유하기 위해 사용됩니다. 예를 들면, 로그인 상태나 UI 테마 등등에 사용됩니다. Context를 사용하면 중간 컴포넌트에 전달하는 방식을 피할 수 있습니다.
Context를 사용하기 전에 알아야 할 것.
Context는 여러 레벨에 존재하는 다양한 컴포넌트에서 임의의 데이터를 사용하고자 할 때 사용합니다. 다만, Context를 많이 사용하게 되면 컴포넌트의 재사용성이 떨어지기 때문에 꼭 필요한 곳에 사용하는게 좋습니다.
- API
- React.createContext
const MyContext = React.createContext(defaultValue)
createContext는 Context 객체를 만드는데 React가 렌더링될 때 가장 가까운 Provider로부터 current context를 읽습니다.
defaultValue는 매칭되는 provider가 없는 경우에만 읽히게 되는 값입니다.
- Context.Provider
<MyContext.Provider value={some value}>
Provider는 value를 전달할 수 있는데 Provider의 자식 컴포넌트로 전달됩니다. Provider의 자식 컴포넌트들은 Provider value에 변경이 있을때마다 리렌더링됩니다.
