React의 useState: 프론트엔드 개발자를 위한 완벽 가이드 🌟

React의 useState: 프론트엔드 개발자를 위한 완벽 가이드 🌟

React의 useState는 함수형 컴포넌트에서 상태(state)를 관리할 수 있게 해주는 Hook입니다.

함수형 컴포넌트가 클래스 컴포넌트의 state 기능을 가지게 만들어주는 핵심 기능 중 하나죠!

초보 개발자부터 베테랑까지, useState를 제대로 이해하면 React 개발이 훨씬 수월해집니다.

---

useState란?

useState는 React가 제공하는 Hook 중 하나로, 함수형 컴포넌트에서 상태를 관리할 수 있게 해줍니다.

const [state, setState] = useState(initialState);

• state: 현재 상태 값입니다.
• setState: 상태를 업데이트하는 함수입니다.
• initialState: 상태의 초기값으로, 숫자, 문자열, 객체, 배열 등 모든 값이 가능합니다.

---

왜 useState를 사용할까?

1. 간결함:

• 클래스 컴포넌트에서 state와 setState를 사용하는 방식보다 훨씬 간단하고 직관적이에요.

2. 함수형 컴포넌트의 장점 극대화:

• 클래스 컴포넌트와 달리, 상태 관리를 위해 복잡한 메서드를 작성할 필요가 없습니다.

3. 코드 재사용성:

• Custom Hook과 결합하면 로직을 쉽게 재사용할 수 있습니다.

---

useState 사용법: 기본 예제

숫자 상태 관리하기

import React, { useState } from "react";

function Counter() {

  const [count, setCount] = useState(0); // 초기값 0
  
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

---

useState의 핵심 기능과 동작 원리

1. 상태 초기값 설정

useState(initialState)에서 initialState는 상태의 초기값이에요.

숫자, 문자열, 객체, 배열 등 모든 값을 초기값으로 사용할 수 있습니다.

 

예제: 문자열 초기값

const [name, setName] = useState("Alice");

 

2. 상태 업데이트

상태를 업데이트하려면 setState를 호출합니다.

• 기존 상태는 교체됩니다. (병합되지 않음)
• React는 상태가 변경되면 컴포넌트를 다시 렌더링합니다.

예제: 상태 업데이트

setName("Bob"); // 기존 name 상태가 "Bob"으로 변경

 

3. 함수형 업데이트

setState를 호출할 때 이전 상태 값을 기반으로 새 상태를 계산해야 한다면, 함수형 업데이트를 사용하는 것이 안전합니다.

 

예제: 함수형 업데이트

setCount((prevCount) => prevCount + 1);

• 함수형 업데이트는 상태 변경이 비동기로 처리될 때도 정확한 결과를 보장합니다.

 

4. 초기값 함수 사용

복잡한 계산을 통해 초기값을 설정해야 한다면, 초기값을 함수로 전달할 수 있습니다.

이 함수는 컴포넌트가 처음 렌더링될 때만 호출됩니다.

 

예제: 초기값 함수 전달

const [expensiveValue, setExpensiveValue] = useState(() => {
  console.log("Initial value calculated");
  return performHeavyCalculation();
});

---

useState의 활용 예제

1. 문자열 상태 관리

function Greeting() {

  const [name, setName] = useState("Guest");
  
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}

 

2. 배열 상태 관리

배열의 항목을 추가하거나 삭제하려면 상태를 업데이트하는 방식으로 처리합니다.

 

예제: To-Do 리스트

function TodoList() {

  const [todos, setTodos] = useState([]);
  const addTodo = (todo) => setTodos([...todos, todo]);
  const removeTodo = (index) =>
    setTodos(todos.filter((_, i) => i !== index));

  return (
    <div>
      <button onClick={() => addTodo("New Task")}>Add Task</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => removeTodo(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

---

주의해야 할 점

1. State를 직접 변경하지 말 것

state = newState; // ❌ 절대 이렇게 하면 안 돼요!

 

React는 상태를 직접 변경하면 컴포넌트를 다시 렌더링하지 않아요.

항상 setState를 사용하세요.

 

2. 비동기 업데이트 이해하기

setState는 비동기로 동작하기 때문에, 상태가 즉시 업데이트되지 않을 수 있어요.

함수형 업데이트를 활용해 문제를 방지하세요!

 

잘못된 예제

setCount(count + 1);
setCount(count + 1); // 결과는 1만 증가

 

올바른 예제

setCount((prevCount) => prevCount + 1);
setCount((prevCount) => prevCount + 1); // 결과는 2 증가

---

useState로 할 수 있는 더 많은 것들

• 객체 상태 관리: 객체 상태를 업데이트할 때는 기존 상태를 복사하고 변경된 값만 덮어씁니다.

const [user, setUser] = useState({ name: "Alice", age: 25 });
setUser((prevUser) => ({ ...prevUser, age: 26 }));

 

• 다중 상태 관리: 하나의 컴포넌트에서 여러 개의 상태를 관리할 수 있습니다.

const [count, setCount] = useState(0);
const [name, setName] = useState("Guest");

---

마무리: useState로 상태 관리 마스터하기! 🥳

useState는 React에서 가장 기본적이면서도 강력한 Hook입니다.

잘 이해하고 활용한다면, 복잡한 사용자 인터페이스도 효율적이고 가독성 높게 관리할 수 있어요!

🌷전설의 개발자가 되어봅시당! 🌷