React의 useState에서 피해야 할 4 가지 실수 🚫

소개

React.js는 구성 요소 내에서 상태를 관리하는 고유한 접근 방식을 통해 현대 웹 개발의 초석이 되었습니다. 일반적인 후크 중 하나 useState는 기본이지만 종종 오용됩니다. 이러한 일반적인 실수를 이해하고 피하는 것은 효율적이고 버그 없는 애플리케이션을 만드는 것을 목표로 하는 초보자와 숙련된 개발자 모두에게 중요합니다.

useState이 블로그에서는 React에서 사용할 때 피해야 할 네 가지 중요한 실수에 대해 알아볼 것입니다 . 함께 React 기술을 향상시켜 봅시다!

실수 1: 이전 상태를 고려하는 것을 잊음 😨

React의 useState후크로 작업할 때 흔히 저지르는 실수는 업데이트할 때 가장 최근 상태를 고려하지 않는 것입니다. 이러한 방식은 특히 신속하거나 여러 상태 업데이트를 처리할 때 예기치 않은 동작으로 이어질 수 있습니다.

❌ 문제 이해

React에서 카운터를 구축한다고 가정해 보겠습니다. 당신의 목표는 버튼을 클릭할 때마다 횟수를 늘리는 것입니다. 간단한 접근 방식은 단순히 현재 상태 값에 1을 추가하는 것입니다. 그러나 이는 문제가 될 수 있습니다.

import React, { useState } from 'react';

const CounterComponent = () => {
  const [counter, setCounter] = useState(0);

  const incrementCounter = () => {
    setCounter(counter + 1); // Might not always work as expected
  };

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={incrementCounter}>Increment</button>
    </div>
  );
};

export default CounterComponent;

위 코드에서는 incrementCounter현재 값을 기준으로 카운터를 업데이트합니다. 이는 간단해 보이지만 문제가 발생할 수 있습니다. React는 여러 setCounter호출을 일괄적으로 일괄 처리하거나 다른 상태 업데이트가 방해를 받아 counter매번 올바르게 업데이트되지 않을 수 있습니다.

✅ 수정사항:

이 문제를 방지하려면 메서드의 기능적 형식을 사용하세요 setCounter. 이 버전은 React가 가장 최근의 상태 값으로 호출하는 함수를 인수로 사용합니다. 이렇게 하면 항상 최신 상태 값으로 작업할 수 있습니다.

import React, { useState } from 'react';

const CounterComponent = () => {
  const [counter, setCounter] = useState(0);

  const incrementCounter = () => {
    setCounter(prevCounter => prevCounter + 1); // Correctly updates based on the most recent state
  };

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={incrementCounter}>Increment</button>
    </div>
  );
};

export default CounterComponent;

이 수정된 코드에서는 incrementCounter함수를 사용하여 상태를 업데이트합니다. 이 함수는 가장 최근 상태( prevCounter)를 수신하고 업데이트된 상태를 반환합니다. 이 접근 방식은 특히 업데이트가 빠르게 또는 연속해서 여러 번 발생할 때 훨씬 더 안정적입니다.

실수 2: 상태 불변성 무시 🧊

❌ 문제 이해

React에서 상태는 불변으로 취급되어야 합니다. 일반적인 실수는 특히 객체 및 배열과 같은 복잡한 데이터 구조의 경우 상태를 직접 변경하는 것입니다.

상태 저장 객체에 대한 다음과 같은 잘못된 접근 방식을 고려해보세요.

import React, { useState } from 'react';

const ProfileComponent = () => {
  const [profile, setProfile] = useState({ name: 'John', age: 30 });

  const updateAge = () => {
    profile.age = 31; // Directly mutating the state
    setProfile(profile);
  };

  return (
    <div>
      <p>Name: {profile.name}</p>
      <p>Age: {profile.age}</p>
      <button onClick={updateAge}>Update Age</button>
    </div>
  );
};

export default ProfileComponent;

이 코드는 profile개체를 직접 잘못 변경합니다. 이러한 변형은 다시 렌더링을 유발하지 않으며 예측할 수 없는 동작으로 이어지지 않습니다.

✅ 수정사항:

불변성을 유지하기 위해 상태를 업데이트할 때 항상 새 개체나 배열을 만듭니다. 이 목적으로 스프레드 연산자를 사용하십시오.

import React, { useState } from 'react';

const ProfileComponent = () => {
  const [profile, setProfile] = useState({ name: 'John', age: 30 });

  const updateAge = () => {
    setProfile({...profile, age: 31}); // Correctly updating the state
  };

  return (
    <div>
      <p>Name: {profile.name}</p>
      <p>Age: {profile.age}</p>
      <button onClick={updateAge}>Update Age</button>
    </div>
  );
};

export default ProfileComponent;

수정된 코드에서는 updateAge스프레드 연산자를 사용하여 profile상태 불변성을 유지하면서 업데이트된 수명으로 새 개체를 만듭니다.

실수 3: 비동기 업데이트에 대한 오해 ⏳

❌ 문제 이해

React의 상태 업데이트는 useState비동기식입니다. 이는 특히 여러 상태 업데이트가 빠르게 연속적으로 이루어질 때 혼란을 야기하는 경우가 많습니다. 개발자는 호출 직후 상태가 변경될 것으로 예상할 수 있지만 setState실제로 React는 성능상의 이유로 이러한 업데이트를 일괄 처리합니다.

이러한 오해로 인해 문제가 발생할 수 있는 일반적인 시나리오를 살펴보겠습니다.

import React, { useState } from 'react';

const AsyncCounterComponent = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
    setCount(count + 1);
    // Developer expects count to be incremented twice
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment Count</button>
    </div>
  );
};

export default AsyncCounterComponent;

이 예에서 개발자는 count두 배로 증가시키려고 합니다. 그러나 상태 업데이트의 비동기적 특성으로 인해 두 setCount호출 모두 동일한 초기 상태를 기반으로 하므로 결과는 count한 번만 증가됩니다.

✅ 수정사항:

비동기 업데이트를 올바르게 처리하려면 의 기능 업데이트 형식을 사용하세요 setCount. 이렇게 하면 각 업데이트가 가장 최근 상태를 기반으로 합니다.

import React, { useState } from 'react';

const AsyncCounterComponent = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
    // Now each update correctly depends on the most recent state
  };
  // Optional: Use useEffect to see the updated state
  useEffect(() => {
    console.log(count); // 2
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment Count</button>
    </div>
  );
};

export default AsyncCounterComponent;

위 코드에서 각 호출은 setCount최신 상태 값을 사용하여 정확하고 순차적인 업데이트를 보장합니다. 이 접근 방식은 현재 상태에 의존하는 작업, 특히 여러 상태 업데이트가 빠르게 연속적으로 발생할 때 매우 중요합니다.

실수 4: 파생 데이터의 상태 오용 📊

❌ 문제 이해

자주 발생하는 오류는 기존 상태나 소품에서 파생될 수 있는 데이터에 상태를 사용하는 것입니다. 이러한 중복 상태는 복잡하고 오류가 발생하기 쉬운 코드로 이어질 수 있습니다.

예를 들어:

import React, { useState } from 'react';

const GreetingComponent = ({ name }) => {
  const [greeting, setGreeting] = useState(`Hello, ${name}`);

  return (
    <div>{greeting}</div>
  );
};

export default GreetingComponent;

여기서 greeting상태는 에서 직접 파생될 수 있으므로 필요하지 않습니다 name.

✅ 수정사항:

상태를 사용하는 대신 기존 상태나 소품에서 직접 데이터를 파생하세요.

import React from 'react';

const GreetingComponent = ({ name }) => {
  const greeting = `Hello, ${name}`; // Directly derived from props

  return (
    <div>{greeting}</div>
  );
};

export default GreetingComponent;

수정된 코드에서는 greeting가 prop에서 직접 계산되어 name구성 요소를 단순화하고 불필요한 상태 관리를 방지합니다.

결론 🚀

안정적이고 효율적인 애플리케이션을 구축하려면 React에서 후크를 효과적으로 사용하는 것이 useState중요합니다. 이전 상태 무시, 상태 불변성 관리 잘못, 비동기 업데이트 간과, 파생 데이터의 중복 상태 방지와 같은 일반적인 실수를 이해하고 방지함으로써 구성 요소 동작을 보다 원활하고 예측 가능하게 보장할 수 있습니다. 도움이 되었길 바랍니다!