React.js

[Dseok의 코딩스터디] React.js useState 한방에 끝내 – 기본 개념부터 15가지의 실전 예제 제공! React.js 19

Dseok 2025. 2. 28. 14:03
반응형
SMALL

React의 useState는 함수형 컴포넌트에서 상태(state)를 관리하는 가장 기본적인 Hook입니다. 이를 사용하면 컴포넌트 내부에서 동적인 값을 저장하고 업데이트할 수 있습니다. 예를 들어, 버튼 클릭 횟수, 입력 폼 데이터, 체크박스 상태 등을 관리할 때 사용됩니다.

 

화살표 함수가 아닌 function 함수로 사용한 이유가 있습니다!!
급하시면 복사붙혀넣기 해도 좋지만, 직접 따라치면서 function 함수를 화살표 함수로 바꿔보시라는 취지로 넣었습니다!!

 

✅ useState란?

useState는 React의 내장 Hook 중 하나로, 컴포넌트의 상태를 추가할 수 있도록 도와줍니다. 기본적으로 useState는 배열을 반환하며, 첫 번째 요소는 상태 값, 두 번째 요소는 상태를 변경하는 함수(setter 함수) 입니다.

 

📌 useState 사용법

import { useState } from "react";

function Example() {
  const [count, setCount] = useState(0); // 상태 변수 count, 상태 변경 함수 setCount

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1 증가</button>
    </div>
  );
}

🔍 주요 특징

  1. useState(초기값) : 초기 상태 값을 설정할 수 있음.
  2. setState(새로운 값) : 상태를 업데이트하면 컴포넌트가 다시 렌더링됨.
  3. 상태는 개별적으로 여러 개 선언할 수 있음.

🎯 useState 실전 예제 10개 🔥

1️⃣ 버튼 클릭 시 카운트 증가

import { useState } from "react";

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

  return (
    <div>
      <h2>카운터: {count}</h2>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

 

2️⃣ 입력 폼 값 관리하기

import { useState } from "react";

function InputForm() {
  const [text, setText] = useState("");

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <p>입력된 값: {text}</p>
    </div>
  );
}

 

3️⃣ 토글 기능 만들기 (ON/OFF)

import { useState } from "react";

function ToggleButton() {
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? "ON" : "OFF"}
    </button>
  );
}

 

4️⃣ 리스트에 항목 추가하기

import { useState } from "react";

function TodoList() {
  const [tasks, setTasks] = useState([]);
  const [task, setTask] = useState("");

  const addTask = () => {
    setTasks([...tasks, task]);
    setTask("");
  };

  return (
    <div>
      <input value={task} onChange={(e) => setTask(e.target.value)} />
      <button onClick={addTask}>추가</button>
      <ul>
        {tasks.map((t, index) => (
          <li key={index}>{t}</li>
        ))}
      </ul>
    </div>
  );
}

 

5️⃣ 다크모드 토글 기능

import { useState } from "react";

function DarkModeToggle() {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <div style={{ background: darkMode ? "black" : "white", color: darkMode ? "white" : "black" }}>
      <button onClick={() => setDarkMode(!darkMode)}>모드 변경</button>
    </div>
  );
}

 

6️⃣ 체크박스 상태 관리하기

import { useState } from "react";

function CheckboxExample() {
  const [checked, setChecked] = useState(false);

  return (
    <label>
      <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
      {checked ? "체크됨" : "체크 안됨"}
    </label>
  );
}

 

7️⃣ 드롭다운 메뉴 상태 관리

import { useState } from "react";

function Dropdown() {
  const [selected, setSelected] = useState("apple");

  return (
    <select value={selected} onChange={(e) => setSelected(e.target.value)}>
      <option value="apple">사과</option>
      <option value="banana">바나나</option>
      <option value="orange">오렌지</option>
    </select>
  );
}

 

8️⃣ 비밀번호 보이기/숨기기 기능

import { useState } from "react";

function PasswordToggle() {
  const [showPassword, setShowPassword] = useState(false);

  return (
    <div>
      <input type={showPassword ? "text" : "password"} />
      <button onClick={() => setShowPassword(!showPassword)}>
        {showPassword ? "숨기기" : "보이기"}
      </button>
    </div>
  );
}

 

9️⃣ 모달창 열고 닫기

import { useState } from "react";

function ModalExample() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>모달 열기</button>
      {isOpen && (
        <div style={{ background: "gray", padding: "20px", position: "absolute" }}>
          <p>모달창입니다.</p>
          <button onClick={() => setIsOpen(false)}>닫기</button>
        </div>
      )}
    </div>
  );
}

 

🔟 다중 상태 관리 (이름 & 나이)

import { useState } from "react";

function UserInfo() {
  const [user, setUser] = useState({ name: "", age: "" });

  return (
    <div>
      <input
        type="text"
        placeholder="이름"
        value={user.name}
        onChange={(e) => setUser({ ...user, name: e.target.value })}
      />
      <input
        type="number"
        placeholder="나이"
        value={user.age}
        onChange={(e) => setUser({ ...user, age: e.target.value })}
      />
      <p>{user.name} ({user.age}세)</p>
    </div>
  );
}

 

1️⃣1️⃣ 배열에 새로운 요소 추가하기 (할 일 목록)

import { useState } from "react";

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [task, setTask] = useState("");

  const addTodo = () => {
    if (task.trim()) {
      setTodos([...todos, task]); // 기존 배열에 새로운 항목 추가
      setTask("");
    }
  };

  return (
    <div>
      <input value={task} onChange={(e) => setTask(e.target.value)} />
      <button onClick={addTodo}>추가</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

✅ setTodos([...todos, task]) : 기존 배열을 복사한 후 새로운 항목을 추가하는 방식으로 업데이트합니다.

 

1️⃣2️⃣ 배열에서 특정 요소 삭제하기 (리스트 삭제 기능)

import { useState } from "react";

function RemoveItem() {
  const [items, setItems] = useState(["사과", "바나나", "포도"]);

  const removeItem = (index) => {
    setItems(items.filter((_, i) => i !== index)); // 선택한 요소 제외하고 새로운 배열 생성
  };

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item} <button onClick={() => removeItem(index)}>삭제</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

✅ filter()를 사용하여 삭제할 요소를 제외한 새로운 배열을 만들어 setItems()로 업데이트합니다.

 

1️⃣3️⃣ 배열 내 특정 요소 수정하기 (이름 변경)

import { useState } from "react";

function UpdateItem() {
  const [users, setUsers] = useState([
    { id: 1, name: "John" },
    { id: 2, name: "Alice" },
    { id: 3, name: "Bob" },
  ]);

  const updateUser = (id, newName) => {
    setUsers(
      users.map((user) =>
        user.id === id ? { ...user, name: newName } : user
      )
    );
  };

  return (
    <div>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name}
            <button onClick={() => updateUser(user.id, "변경됨")}>이름 변경</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

✅ map()을 사용하여 특정 요소의 데이터를 변경하는 방식입니다.

 

1️⃣4️⃣ 배열을 활용한 좋아요 기능 (좋아요 토글)

import { useState } from "react";

function LikeFeature() {
  const [likedItems, setLikedItems] = useState([]);

  const toggleLike = (item) => {
    if (likedItems.includes(item)) {
      setLikedItems(likedItems.filter((i) => i !== item)); // 삭제
    } else {
      setLikedItems([...likedItems, item]); // 추가
    }
  };

  return (
    <div>
      {["🍕 피자", "🍔 햄버거", "🍣 초밥"].map((food) => (
        <button key={food} onClick={() => toggleLike(food)}>
          {likedItems.includes(food) ? `❤️ ${food}` : `🤍 ${food}`}
        </button>
      ))}
      <p>좋아요: {likedItems.join(", ")}</p>
    </div>
  );
}

✅ includes()를 활용해 특정 항목이 배열에 존재하는지 확인한 후 추가/삭제를 수행합니다.

 

1️⃣5️⃣ 다중 선택 체크박스 관리하기

import { useState } from "react";

function MultiSelect() {
  const [selected, setSelected] = useState([]);

  const toggleSelect = (value) => {
    if (selected.includes(value)) {
      setSelected(selected.filter((item) => item !== value)); // 삭제
    } else {
      setSelected([...selected, value]); // 추가
    }
  };

  return (
    <div>
      {["React", "Vue", "Angular"].map((framework) => (
        <label key={framework}>
          <input
            type="checkbox"
            checked={selected.includes(framework)}
            onChange={() => toggleSelect(framework)}
          />
          {framework}
        </label>
      ))}
      <p>선택한 항목: {selected.join(", ")}</p>
    </div>
  );
}

✅ 체크박스 선택/해제를 배열을 활용해 관리하는 방식입니다.

 

🎉 마무리 – useState 완벽 이해하고 React 개발에 적용해보자!

지금까지 useState Hook의 개념과 다양한 실전 예제들을 살펴보았습니다.

useState는 React에서 가장 기본적이면서도 중요한 상태 관리 Hook이며, 이를 잘 활용하면 컴포넌트의 동적인 UI를 쉽게 만들 수 있습니다.
특히, 입력 값 관리, 버튼 토글, 리스트 추가, 모달창 열기 등 실생활에서 자주 쓰이는 기능들을 구현할 때 아주 유용하죠!

앞으로 React 프로젝트를 진행할 때 useState를 적절히 활용하여 더 깔끔하고 효율적인 코드를 작성해보세요!
또한, Context API, useReducer와 같은 다른 상태 관리 방법과도 조합하여 더 복잡한 상태 관리 패턴도 배워보는 것을 추천합니다. 🚀

🔥 React 공부를 이어가려면?

👉 useEffect Hook을 활용한 비동기 처리 방법
👉 useReducer를 활용한 상태 관리 심화
👉 Context API를 이용한 전역 상태 관리

이제 실전 프로젝트에서 useState를 적극적으로 활용해보세요!
이 글이 도움이 되셨다면 공유 & 댓글 부탁드립니다! 😊
더 좋은 React 콘텐츠로 다시 찾아오겠습니다. 💡

 

반응형
LIST
저작자표시 (새창열림)