useObserver hook

useObserver hook

헷갈리는 부분?

그런데 어떤 예제에서는 useObserver() 안에 렌더링할 것을 반환하는 함수가 있었고, 어떤 예제에서는 observable의 변수를 리턴하는 함수가 있었다.

const Test = () => {

  const store = useContext(storeContext); 

  return useObserver(() => (
    <div> 
      <div>{store.num}</div>
    </div>
  ))

}

const Test = () => {

  const store = useContext(storeContext); 

  var num = useObserver(function (){
    return store.num;
  });

  return (
    <div> 
      <div>{num}</div>
    </div>
  )

}

공식 문서의 useObserver hook에 따르면 이것은 observer를 행동처럼 사용할 수 있도록 해주면서 원하는 방식으로 컴포넌트를 최적화할 수 있도록 해준다고 써있다.

또한 "useObserver hook이 컴포넌트의 중간에 있어도 observable의 변화에 따라서 전체 컴포넌트를 다시 렌더링한다. 만약 작은 단위로 렌더링하고 싶으면 <Observer />나 userForceUpdate 옵션을 사용해라"라고 써있다.

useObserver deprecated?

This API is deprecated in 3.*. It is often used wrong (e.g. to select data rather than for rendering, and better decouples the rendering from the component updates

이 api는 3.*에서 사라졌다. 이것은 종종 잘못 사용된다. 예를들어, rendering을 위해서가 아니라 데이터를 선택할 때, 그리고 <Observer>가 컴포넌트 업데이트로부터 렌더링을 더 잘 분리할 수 있다.

링크

그런데 만약 <Obserber>를 사용하도록 바꾸면 현재 사용하는 것처럼 한 번에 observer 처리를 못 해주는 단점이 있을 것 같고 각 컴포넌트에서 렌더링하는 부분에 <Obserber>를 달아줘야할 것 같다.

그래서 useObserver를 사용하는 것도 장점이 있을 것 같다.