useState

포트폴리오에서 불필요한 코드를 수정하던 중
처음 코드는 이랬다.

useEffect(() => {
    setGnbName(
      gnbName.map((gnb) =>
        gnb.id === index ? { ...gnb, active: true } : { ...gnb, active: false }
      )
    );
  }, [index]);

궁금증과 해결

useEffect의 쓰임새가 맞는지?

useEffect의 쓰임새가 맞는지 궁금해서 useMemo, useCallback을 활용한 결과 오히려 단순 setState에는 useEffect가 맞다는 결론이 났다. useMemo, useCallback은 자식컴포넌트 전달시 리렌더링을 막는 용도로 사용하는 것이 적절하다. 나는 해당 컴포넌트에서 state를 업데이트 하는 것만 필요했고, setState만 사용할시 infinite loop가 일어난다.

React Hook useEffect has a missing dependency: 'gnbName'

앞에서 공부하면서 배웠던 것으로, 함수형 업데이트를 하면 된다.

  useEffect(() => {
    setGnbName((gnbName) =>
      gnbName.map((gnb) =>
        gnb.id === index ? { ...gnb, active: true } : { ...gnb, active: false }
      )
    );
  }, [index]);