React 공식 문서로 디테일 잡기(고급)
Context
컴포넌트 트리를 넘어 데이터를 공유할 수 있는 방법으로, Props drilling 을 해결하기 위한 방법이다.
context를 사용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리에 데이터를 넘겨줄 수 있다.
전역적인 데이터를 관리할 때 유용하다. (로그인한 유저, 테마 ...)
context에 의존성을 갖기 때문에 context를 사용하면 재사용이 어렵다.
createContext
context 객체를 만든다. 컴포넌트를 렌더링할 때 트리 상위에 가장 가까이 있는 짝이 맞는 Provider로부터 현재값을 읽는다.
const MyContext = React.createContext(defaultValue);
provider
context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할을 한다.
provider의 value prop이 바뀔 때마다 다시 렌더링된다.
contextType
createContext()로 생성한 context 객체를 원하는 클래스의 contextType 프로퍼티로 지정할 수 있다.
이 프로퍼티를 활용하면 클래스 안에서 this.context를 이용해 해당 context의 가장 가까운 provider를 찾아 그 값을 읽을 수 있게 된다.
이 API를 사용하면 하나의 context만 구독할 수 있다.
consumer
context 변화를 구독하는 react 컴포넌트이다.
이 컴포넌트를 사용하면 함수 컴포넌트 안에서 contex를 구독할수 있다.
얘의 자식은 함수여야한다.
useContext
Consumer를 대체하여 hook 안에서도 바로 context 값을 꺼내서 사용할 수 있다.
Portal
DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 방법이다.
부모 컴포넌트 DOM 트리로부터 벗어나기.
예를 들어 어떤 요소가 z-index를 가지고 있어서 버튼을 누르면 다른 요소보다 위에 보여지게 하고 싶은데, 이 요소보다 뒤에 만들어진 요소는 덮어지지 않는 일이 생긴다.
이 때 portal을 사용할 수 있다.
index.html에 id가 poratl인 div 요소를 생성한다.
const Poratl = (props) => {
return createPortal(props.children, document.getElementById("portal"));
}
- createPortal(child, container)
첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React 자식. 두 번째 인자(container)는 DOM 엘리먼트.
이벤트 버블링
portal에 있는 요소여도 거기에서 일어나는 이벤트를 root에도 같이 전달해준다. (버블링)
Render Props
컨포넌트를 재사용하는 방법 중 하나이다. (composition, HOC, render props ...)
무엇을 렌더링할 지 알려주는 함수이다.
render 이외의 props 사용법
prop name 으로 render를 사용할 필요는 없다.
어떤 함수형 props이든 children이든 모든 가능하다. 이름만 render props
PureComponent
PureComponent는 props, state를 비교해서 얕은 비교를 구현해 성능을 최적화하는 컴포넌트이다.
render() 함수가 동일한 props와 state에 대하여 동일한 결과를 렌더링하면 purecomponent로 성능 향상을 누릴 수 있다.
하지만 render props를 사용하면 React.PureComponent를 이 이점이 사라질 수 있다.
왜냐면 함수로 props를 전달해주면 pureComponent가 비교를 계속 해야하기 때문이다.
