React에서 변수 대신 useState를 사용하는 이유

React에서 변수 대신 useState를 사용하는 이유

React에서 변수 대신 useState를 사용하는 이유가 궁금하신가요? 간단한 반대 사례를 통해 이 개념을 살펴보겠습니다.

간단한 카운터 예

두 개의 버튼이 있는 기본 카운터가 있다고 가정해 보겠습니다. 하나는 카운트를 늘리고 다른 하나는 줄이는 버튼입니다. useState를 사용하여 이 카운터를 생성하면 완벽하게 작동합니다. 하지만 일반 변수만 사용하려고 하면 예상대로 작동하지 않습니다.

import React, { useState } from 'react';

function Counter() {
  // Using useState to create a state variable
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
    </div>
  );
}

export default Counter;

useState란 무엇입니까?

useState는 기능적 구성요소에 상태를 추가할 수 있게 해주는 React의 후크입니다. 상태는 구성 요소가 사물을 기억하고 시간이 지남에 따라 업데이트하는 데 사용하는 메모리와 같습니다.

변수가 작동하지 않는 이유

변수를 사용하는 것이 작동하지 않는 이유는 React가 useState에서 관리하는 상태와 마찬가지로 일반 변수의 변경 사항을 추적하지 않기 때문입니다. 증가 또는 감소 버튼을 클릭하면 useState는 상태가 변경되었음을 React에게 알립니다. 그런 다음 React는 구성 요소를 다시 렌더링하고 개수를 업데이트합니다.

그러나 일반 변수의 경우 React는 변경 사항을 인식하지 못하므로 개수를 업데이트하지 않습니다.

import React from 'react';

function Counter() {
  // Using a regular variable
  let count = 0;

  const increase = () => {
    count += 1;
  };

  const decrease = () => {
    count -= 1;
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
    </div>
  );
}

export default Counter;

결론

이제 React의 상태 관리에 useState가 필수적인 이유를 이해하셨기를 바랍니다. 이를 통해 React는 변경 사항을 추적하고 그에 따라 구성 요소를 업데이트할 수 있습니다. 시간 내주셔서 감사합니다. 곧 뵙겠습니다!

위 내용은 React에서 변수 대신 useState를 사용하는 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!