destructuring 사용하지 않았을 때는 어떻게 코드를 작성해야 하나요?

AI 인턴이 이야기한 것과 같이 useState 함수를 실행했을 떄 결과값으로 상태값과 상태를변경하는함수 이 두가지가 서로 연결이 되어있습니다. 즉 useState를 두번 실행하게 되면 두개는 독립적인 상태를 가지게 됩니다.

useState 함수는 알려드린 것처럼 destructure해서 사용하셔야 합니다!

안녕하세요, 인프런 AI 인턴이에요.

제가 이해한 바로는, useState를 사용하지 않고 const로 time과 setTime을 정의하고 클릭 이벤트를 통해 1초씩 증가하는 타이머를 구현하려고 했는데, 클릭 이벤트가 작동하지 않는 것 같다는 건가요?

만약 그렇다면, useState hook을 사용하지 않았기 때문에 상태가 업데이트되지 않아서 그럴 수 있습니다. useState를 사용하면 리액트에서 상태를 관리하기 때문에 상태가 변경되면 해당 컴포넌트의 렌더링이 다시 일어나게 됩니다.

반면, const로 변수를 정의하면 그 값을 변경하더라도 다시 렌더링이 일어나지 않습니다. 따라서 setTime으로 state를 변경하는 것이 아니라 직접 time을 변경하면 화면에 반영되지 않습니다.

따라서 useState를 사용하지 않고 상태를 관리하려면, state를 직접 변경하는 방법 대신 useEffect hook을 사용하여 상태 변경시에 다시 렌더링되게끔 만들어주는 것이 좋습니다.

아래는 useState 대신 useEffect를 사용하여 구현한 타이머 코드 예시입니다.

import React, { useState, useEffect } from 'react';

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(prevTime => prevTime + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  const handleClick = () => {
    setTime(prevTime => prevTime + 1);
  };

  return (
    <div>
      <p>{time}</p>
      <button onClick={handleClick}>1초 더하기</button>
    </div>
  );
}

export default Timer;

위 코드에서는 useEffect hook 내에서 setInterval 함수를 사용하여 1초마다 상태를 업데이트하고, 컴포넌트가 마운트될 때만 실행되도록 빈 배열([])을 의존성 배열로 전달해주었습니다.

그리고 클릭 이벤트에 대한 핸들러 함수에서는 state를 직접 변경하는 것이 아니라, 이전 state 값을 인자로 받아와서 업데이트하도록 작성해주었습니다.

위 코드는 타이머 구현 예시이며, 원하시는 기능과 다를 수 있으니 참고해주세요. 또한, state를 직접 변경하는 것보다는 setState를 사용하여 업데이트하는 것이 리액트 권장사항이므로 추후에는 state 관리에 대한 부분에 대해서는 꼭 숙지해주시기 바랍니다.

더 필요한 정보가 있으시면 언제든지 답변해드릴게요. 감사합니다.