[TIL] 2022/10/25

• useEffect의 dependency로 static한 데이터를 넣었을 때, 만약 다른 setStateAction과 엮인 state가 업데이트 돼서 컴포넌트가 리렌더링되면 state에서 특정 객체 내의 특정 값을 dependency에 넣었을 때와 마찬가지로 특정 값이 변했을 때를 구독할 수 있다. 무슨 말인가를 정확한 예시로 보면,

  let dirty = useMemo(
    () => ({
      depth1: {
        depth2: {
          value: "hello",
          depth3: {
            value: "hello",
          },
        },
      },
    }),
    []
  );

위와 같은 스태틱한 데이터가 있다고 해보자.

  useEffect(() => {
    console.log(dirty.depth1.depth2.value);
  }, [dirty.depth1.depth2.value]);

거기에 위와 같은 코드를 작성해놓고

        <button
          onClick={() => {
            dirty.depth1.depth2.value = "test";
          }}
        >
          setDirty2
        </button>

이런 버튼을 만들어서 백번 눌러봐야 useEffect는 발동하지 않음을 안다. 하지만 임의로 다른 state를 만들고, setStateAction을 호출하면 일단 해당 component는 리렌더링되고, 위에서 static한 데이터를 담은 useEffect가 activate 된다. 이 때, setStateAction 전에

dirty.depth1.depth2.value

위의 같이 바뀌었다면, 해당 useEffect는 발동하여 console.log를 찍게 된다.
하지만 위의 값이 바뀌지 않았다면 useEffect 내부 로직이 발동하지 않는다. 즉, console.log를 찍지 않는다. 그래서 만약 useEffect를 쓸 때 static한 데이터를 넣을 일이 있다면 리렌더링 혹은 useEffect 내부의 로직 실행에 대한 리소스를 줄이기 위해 위에처럼 명확히 사용할 프로퍼티를 타겟팅 해주는게 좋다.