[TIL] 2022/10/25

yongkini ·2022년 10월 25일
0

Today I Learned

목록 보기
133/173
  • 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 내부의 로직 실행에 대한 리소스를 줄이기 위해 위에처럼 명확히 사용할 프로퍼티를 타겟팅 해주는게 좋다.

profile
완벽함 보다는 최선의 결과를 위해 끊임없이 노력하는 개발자

0개의 댓글