React Hook : useState()

useState()는 React에서 가장 많이 사용되는 Hook 중 하나입니다. 이 Hook을 사용하면 함수형 컴포넌트에서도 상태를 관리할 수 있습니다. useState()를 사용하면 상태값과 그 상태를 업데이트할 수 있는 함수가 반환됩니다. 이 함수를 호출하면 React는 컴포넌트를 다시 렌더링합니다.

사용 방법은 아래와 같습니다.

import { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

위 코드에서 useState(0)은 상태의 초기값을 0으로 설정한다는 것을 의미합니다. count는 현재 상태값을, setCount는 상태를 변경하는 함수를 나타냅니다. handleClick 함수에서는 setCount 함수를 호출하여 count 상태값을 1 증가시킵니다. 그리고 return 구문에서는 현재 상태값을 보여주는 p 태그와 클릭할 수 있는 button 태그를 렌더링합니다.

useState()를 사용하면 여러 개의 상태값도 관리할 수 있습니다.

import { useState } from 'react';

function MyComponent() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);

  function handleNameChange(event) {
    setName(event.target.value);
  }

  function handleAgeChange(event) {
    setAge(event.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleNameChange} />
      <input type="number" value={age} onChange={handleAgeChange} />
      <p>Your name is {name} and your age is {age}</p>
    </div>
  );
}

위 코드에서는 name과 age 두 개의 상태값을 관리합니다. handleNameChange 함수와 handleAgeChange 함수에서는 각각 setName 함수와 setAge 함수를 호출하여 상태값을 변경합니다. return 구문에서는 두 개의 input 태그로 상태값을 입력받고, 현재 상태값을 보여주는 p 태그를 렌더링합니다.

React 18에서는 useState()를 사용할 때 새로운 방식으로 state를 업데이트할 수 있습니다. 이전에는 setState 함수를 호출할 때 새로운 state를 전달하거나, 이전 state를 참조하기 위해 콜백 함수를 사용하는 것이 일반적이었습니다. 그러나 이제는 setState 함수를 호출할 때 이전 state를 받아서 업데이트하는 방법이 가능해졌습니다. 이를 사용하면 불필요한 렌더링을 방지하고, 동시성 모드에서도 안정적으로 동작하는 state 관리가 가능해집니다.

새로운 방식으로 state를 업데이트하는 방법은 아래와 같습니다.

import { useState } from 'react';

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

  function handleClick() {
    setCount((prevCount) => prevCount + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

위 코드에서 setCount 함수를 호출할 때, 새로운 state 대신 이전 state를 받아서 업데이트하는 함수를 전달합니다. 이전 state는 prevCount 매개변수로 전달되며, 함수의 반환값이 새로운 state가 됩니다.

이전 state를 받아서 업데이트하는 방식을 사용하면 state 업데이트가 이전 state에 의존하는 경우, 예를 들어 이전 state에 1을 더하는 경우 등에 유용합니다. 이 방식은 React가 이전 state와 새로운 state를 비교해서 불필요한 렌더링을 방지하기 때문에 성능 개선에도 도움이 됩니다.

useState()를 사용할 때 주의할 점은, 상태값을 변경할 때 항상 이전 state를 사용해야 한다는 것입니다. 상태값을 직접 변경하거나, 이전 state를 참조하지 않고 새로운 state만 전달하면, React가 state 변경을 감지하지 못해 불필요한 렌더링이 발생할 수 있습니다. 따라서, 이전 state를 참조하여 state를 업데이트하는 방식을 권장합니다.

내저장소 바로가기 luxury515