리액트 useState 완전정복｜이벤트 처리부터 상태 기반 UI 만들기까지

📘 리액트 스터디 시리즈 4편

이벤트 처리와 상태 관리｜useState로 동적인 UI 만들기

안녕하세요! 리액트 스터디 시리즈 4편에서는 이벤트 처리와 상태(state) 관리를 다뤄볼 거예요.

드디어 리액트의 진짜 힘!

사용자와 상호작용하는 UI

를 만들 수 있게 됩니다 🚀

---

🖱️ 리액트에서 이벤트 처리하기

HTML에서 버튼 클릭은 onclick="..."처럼 쓰지만, React에서는 onClick={함수}처럼 카멜케이스와 중괄호를 사용합니다.

function App() {
  function handleClick() {
    alert('버튼이 클릭되었어요!');
  }

  return (
    <button onClick={handleClick}>
      클릭하기
    </button>
  );
}

• ✅ 이벤트 이름은 onClick, onChange 등 카멜케이스로!
• ✅ 이벤트 핸들러는 함수로 정의

---

⚙️ useState로 상태(state) 관리하기

상태(state)는 컴포넌트 안에서 바뀔 수 있는 값입니다. React에서는 useState 훅을 통해 상태를 관리할 수 있어요.

import { useState } from 'react';

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

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

• 🟡 useState(초기값)으로 상태 선언
• 🟡 count: 현재 상태 값
• 🟡 setCount: 상태를 변경하는 함수

---

📌 상태는 어떻게 작동하나요?

상태가 변경되면 리액트는 해당 컴포넌트를 자동으로 다시 렌더링합니다.

setCount(count + 1);

이 코드를 실행하면 화면이 갱신되고 최신 count 값이 보여요.

---

📋 실습 - 좋아요 버튼 만들기

import { useState } from 'react';

function LikeButton() {
  const [liked, setLiked] = useState(false);

  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? '❤️ 좋아요 취소' : '🤍 좋아요'}
    </button>
  );
}

✅ 상태에 따라 버튼 텍스트가 바뀌는 동적 UI 완성!

---

💡 input과 상태 연결 - Controlled Component

React에서는 input 입력값도 상태로 관리할 수 있어요.

function NameInput() {
  const [name, setName] = useState('');

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

🎯 value와 onChange가 함께 사용되면 이를 “

Controlled Component

”라고 합니다.

---

🧠 정리 - 오늘 배운 핵심 포인트

• ✔️ React 이벤트는 카멜케이스로 작성하고 함수로 처리
• ✔️ useState는 상태 값을 만들고, 업데이트할 수 있게 함
• ✔️ 상태 변경 시 자동으로 UI 업데이트
• ✔️ input 등 사용자 입력도 상태와 연결 가능 (Controlled Component)

---

📌 다음 편 예고

다음 5편에서는 리스트 렌더링과 조건부 렌더링을 배웁니다.
map과 조건문을 이용해 더 복잡한 UI를 만들 준비가 되셨나요? 😎

---

💬 궁금한 점은 댓글로 남겨주세요. 함께 성장하는 리액트 스터디, 계속 이어집니다! 🙌