[React] React는 왜 Hook를 쓰는가?

React에서 일반 변수 대신 Hook(useState)을 사용하는 이유가 뭘지, 처음 들었을 땐 당황스러웠다. 쓰다보니 당연했던 점을 잊을까 적어보려한다.

리렌더링과 상태 유지

• 일반 변수를 사용하면, 컴포넌트가 리렌더링될 때마다 변수가 초기화 됨

예를 들어, 위 코드에서 let number = 1로 했다면:

const App061 = () => {
  let number = 1;  // 컴포넌트가 리렌더링될 때마다 다시 1로 초기화됨
  
  const add = () => {
    number++;  // 값은 증가하지만 리렌더링되면 다시 1로 돌아감
    console.log(number);  // 콘솔에는 증가된 값이 보이지만
    // UI는 업데이트되지 않음
  };
  
  return <h1>숫자: {number}</h1>;  // 항상 1만 표시됨
};

리렌더링 트리거

• useState의 setState 함수(여기서는 setNumber)는 React에게 "상태가 변경되었으니 화면을 다시 그려야 해"라고 알려줌
• 일반 변수는 값이 변경되어도 React는 이를 모르기 때문에 화면이 업데이트되지 않음

비동기적 업데이트 처리

• React는 성능 최적화를 위해 여러 상태 업데이트를 배치(batch)로 처리
• useState는 이러한 비동기적 업데이트를 안전하게 처리할 수 있음

// 이전 상태를 기반으로 안전하게 업데이트
setNumber(prev => prev + 1);

그 차이점을 예시로 보자면,

// 일반 변수를 사용한 경우
let normalVar = 0;
const handleClick = () => {
  normalVar += 1;  // 값은 변경되지만
  console.log(normalVar);  // 콘솔에만 보이고
  // 화면은 업데이트되지 않음
};

// useState를 사용한 경우
const [stateVar, setStateVar] = useState(0);
const handleClick = () => {
  setStateVar(prev => prev + 1);  // 값이 변경되고
  // React가 컴포넌트를 다시 렌더링하여
  // 화면도 업데이트됨
};

따라서 Hook(useState)을 사용하는 것은:

컴포넌트의 상태를 안정적으로 유지하고 UI를 자동으로 업데이트하며, React의 렌더링 사이클과 조화롭게 동작하기 위해서!

그러니까 react가 처리를 하면 화면 업데이트가 안되니까 변수말고 hook을 쓴다는거다. React의 핵심 특징 중 하나는 "상태가 변경되면 화면을 자동으로 다시 그린다"는 점인데, 근데 React가 일반 변수의 변경은 감지할 수 없으므로 화면 업데이트가 필요한 값들은 항상 useState같은 Hook으로 관리하는 것이 좋다.