React에서 상호작용 추가하기: 이벤트 핸들링과 상태 관리

React는 동적인 웹 애플리케이션을 쉽게 만들 수 있도록 돕는 라이브러리입니다. 이번 글에서는 React에서 상호작용을 추가하는 방법을 살펴보겠습니다. 버튼 클릭, 입력 필드 값 변경 등 사용자와의 상호작용을 처리하는 방법을 배워보겠습니다.

---

1. 이벤트 핸들링 (Handling Events)

React에서는 이벤트를 처리하기 위해 이벤트 핸들러(Event Handler) 를 사용합니다. 예를 들어, 버튼 클릭 이벤트를 처리하는 방법을 살펴보겠습니다.

export default function Button() {
  function handleClick() {
    alert('버튼이 클릭되었습니다!');
  }

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

코드 설명

• onClick 속성에 handleClick 함수를 전달하여 버튼이 클릭될 때 실행되도록 설정합니다.
• 버튼을 클릭하면 alert('버튼이 클릭되었습니다!')가 실행됩니다.

---

2. 상태(state) 관리

React에서 UI를 동적으로 변경하려면 상태(state) 를 사용해야 합니다. useState 훅을 활용하면 쉽게 상태를 관리할 수 있습니다.

버튼 클릭 시 숫자가 증가하는 예제

import { useState } from 'react';

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

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

  return (
    <div>
      <p>현재 숫자: {count}</p>
      <button onClick={handleClick}>
        증가하기
      </button>
    </div>
  );
}

 코드 설명

• useState(0)을 사용하여 count 상태를 0으로 초기화합니다.
• setCount(count + 1)을 호출하면 count 값이 1씩 증가합니다.
• 버튼을 클릭할 때마다 화면이 업데이트되면서 숫자가 증가하는 걸 확인할 수 있습니다.

---

3. 이벤트 핸들러 함수 전달하기

이벤트 핸들러를 부모 컴포넌트에서 자식 컴포넌트로 전달할 수도 있습니다.

function Button({ onClick }) {
  return (
    <button onClick={onClick}>
      클릭하세요
    </button>
  );
}

export default function App() {
  function handleClick() {
    alert('부모에서 전달한 함수가 실행됨!');
  }

  return <Button onClick={handleClick} />;
}

코드 설명

• App 컴포넌트에서 handleClick 함수를 정의하고, 이를 Button 컴포넌트의 onClick 속성으로 전달합니다.
• Button 컴포넌트 내부에서 onClick을 실행하면 부모에서 전달한 함수가 실행됩니다.

---

4. 입력 필드와 상태 연결하기

입력 필드의 값을 상태와 연결하면, 사용자가 입력한 데이터가 실시간으로 반영됩니다.

import { useState } from 'react';

export default function TextInput() {
  const [text, setText] = useState('');

  function handleChange(event) {
    setText(event.target.value);
  }

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={handleChange}
      />
      <p>입력한 값: {text}</p>
    </div>
  );
}

📌 코드 설명

• useState('')을 사용하여 text 상태를 관리합니다.
• input 태그의 value 속성을 text 상태와 연결하여 입력한 값이 즉시 반영되도록 합니다.
• onChange 이벤트가 발생하면 setText(event.target.value)를 통해 상태가 업데이트됩니다.

---

정리

이벤트 핸들링: onClick, onChange 등의 속성을 사용하여 이벤트를 처리할 수 있습니다.
상태 관리: useState를 사용하면 React 컴포넌트의 상태를 쉽게 저장하고 변경할 수 있습니다.
이벤트 핸들러 전달: 부모 컴포넌트에서 자식 컴포넌트로 함수를 전달하여 재사용할 수 있습니다.
입력 필드 제어: input 태그와 useState를 연결하여 실시간으로 입력값을 반영할 수 있습니다.