연속된 커스텀 훅(훅인마)

어떻게 보면 당연한 건데 나 혼자 오해한 듯.

사건의 발단은 두 개의 커스텀 훅이 있다.

하나는 state값을 1초마다 증가해서 return 하는 훅

 

export default function useTest2() {
  const [state, setState] = useState(1);

  setTimeout(() => setState((f) => f + 1), 1000);
  return state;
}

 

하나는 받은 값으로 다시 스테이트에 넣는 모습

 

export default function useTest1() {
  const data = useTest2();
  const [test, setTest] = useState(data);
  console.log(data);
  console.log(test);
  return data;
}

 

아니 어찌 보면 당연한 건데 난 뭐지

아래 컴포난토를 보면 카운터가 1씩 증가하면 화면에 증가된 값을 보여주는 카운터 컴포난또이다.

카운터를 증가해서 Counter가 재렌더링이 되지만 state 값은 0으로 다시 할당되는 게 아니라 1 증가하여 할당시킨다. 이유는 state내부적으로 한번 만들면 setState를 하지 않는 이상 변하지 않기 때문

 

function Counter() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

 

다시 본론으로 들어가

아래 코드에서 나는 useTest2()로 data가 1초마다 값이 증가되니깐 useTest1도 다시 호출되어서 test 값이 알아서 증가된다는 착각을 했다. 왜지? 왜?? 왜 그렇게 생각했지?????

export default function useTest1() {
  const data = useTest2();
  const [test, setTest] = useState(data);
  console.log(data);
  console.log(test);
  return data;
}

 

변경된 test값을 출력하고 싶다면 아래처럼 useEffect를 사용해 주면 된다.

 

export default function useTest1() {
  const data = useTest2();
  const [test, setTest] = useState(data);
  console.log(test);

  useEffect(() => {
    setTest(data);
  }, [data]);

  return data;
}

 

결론은 useState는 똑똑하다.