Context API
React.createContext()
const MyContext = React.createContext(defaultValue);Context 객체를 생성한다
Context 객체를 구독하고 있는 컴포넌트를 렌더링할 때
React는 트리 사이에서 가장 가까이있는
paired Provider로 부터 현재값을 읽는다
defaultValue 매개변수는 트리 안에서 적절한 Provider를
찾지 못했을 때만 쓰이는 값으로 컴포넌트를 독립적으로 테스트할 때 유용한 값이다
Provider 를 통해 undefined 값을 보내도 구독한 컴포넌트들이
defaultValue를 사용하진 않는다
Context.Provider
<MyContext.Provider value={값}>Context 객체에 포함된 React 컴포넌트인 Provider는
context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할을 한다
Provider 컴포넌트는 value prop을 받아서
하위의 컴포넌트에 전달한다
전달받을 수 있는 컴포넌트 수에 제한은 없다
Provider 하위에 Provider를 배치하는 것도 가능하고
작은 범위의 Provider 값이 우선 순위를 갖는다
Provider 하위의 context를 구독하는 모든 컴포넌트는 Procider의 value prop 이 바뀔 때마다 재렌더링 된다
Provider로부터 하위 consumer로의 전파는
sholdComponentUpdate() 메소드가 적용되지 않는다
때문에 상위 컴포넌트가 업데이트를 건너 뛰더라도
consumer가 업데이트 된다
context 값이 바뀌었는지 여부는 Objext.is 와 동일한 알고리즘을 사용해 이전 값과 새로운 값을 비교하여 측정
때문에 객체를 value로 보내는 경우 문제가 생길 수 있다
Class.contextType
class MyClass extends React.Component {
componentDidMount() {
let value = this.context;
}
componentDidUpdate() {
let value = this.context;
}
componentWillUnmount() {
let value = this.context;
}
}
MyClass.cont4extType = MyContext;