[LG CNS AM Inspire Camp] 5. 이벤트 핸들링 및 컴포넌트 상태 관리

1. 이벤트 핸들링이란?

이벤트 핸들링(event handling)은 사용자의 입력(클릭, 키 입력 등)에 대한 반응을 처리하는 방법입니다. React에서는 기존 HTML과 달리 JSX 문법을 활용하며, 이벤트 이름이 camelCase 형식을 따릅니다.

예제

import { Component } from "react";

class EventPractice extends Component {
  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input type="text" name="message" placeholder="입력해 보세요." onChange={e => console.log(e.target.value)} />
      </div>
    );
  }
}

export default EventPractice;

위 코드에서는 onChange 이벤트가 발생할 때, 입력된 값을 콘솔에 출력하는 기능을 추가했습니다.

2. 컴포넌트란?

컴포넌트(Component)는 React에서 UI를 구성하는 기본 단위입니다. 컴포넌트는 재사용 가능하며, 독립적인 기능을 수행할 수 있습니다. React에서는 클래스형 컴포넌트와 함수형 컴포넌트 두 가지 방식으로 구현할 수 있습니다.

3. 상태(state) 관리란?

상태(State)는 컴포넌트 내부에서 관리되는 데이터입니다. React에서 상태를 변경하면 컴포넌트가 자동으로 리렌더링되며, UI가 최신 상태를 유지합니다.

state를 사용한 이벤트 처리

import { Component } from "react";

class EventPractice extends Component {
  state = {
    message: ""
  };

  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="message"
          placeholder="입력해 보세요."
          onChange={e => {
            console.log(e.target.value);
            this.setState({ message: e.target.value });
          }}
        />
        <h2>입력창 내용: {this.state.message}</h2>
      </div>
    );
  }
}

export default EventPractice;

위 코드에서는 입력한 값이 message라는 state에 저장되도록 설정되었습니다.

4. 이벤트 핸들러 함수 분리

이벤트 핸들러 함수를 미리 정의해두고 컴포넌트에서 호출하면 코드의 가독성이 향상됩니다.

import { Component } from "react";

class EventPractice extends Component {
  state = {
    message: ""
  };

  handleChange = e => {
    this.setState({ message: e.target.value });
  };

  handleClick = () => {
    this.setState({ message: "" });
  };

  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="message"
          placeholder="입력해 보세요."
          value={this.state.message}
          onChange={this.handleChange}
        />
        <h2>입력창 내용: {this.state.message}</h2>
        <button onClick={this.handleClick}>삭제</button>
      </div>
    );
  }
}

export default EventPractice;

이제 입력창의 값이 message state에 저장되며, 버튼을 클릭하면 입력된 값이 초기화됩니다.

5. 복수의 입력 필드 관리

입력창이 여러 개일 경우, 각각의 상태를 개별적으로 관리할 수도 있지만, 객체 형태로 통합하여 관리하면 더욱 효율적입니다.

import { useState } from "react";

function EventPractice() {
  const [form, setForm] = useState({
    message: "",
    username: ""
  });

  const handleChange = e => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleClick = () => {
    setForm({ message: "", username: "" });
  };

  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="message"
        placeholder="메시지를 입력하세요"
        value={form.message}
        onChange={handleChange}
      />
      <input
        type="text"
        name="username"
        placeholder="이름을 입력하세요"
        value={form.username}
        onChange={handleChange}
      />
      <h2>메시지: {form.message}</h2>
      <h2>이름: {form.username}</h2>
      <button onClick={handleClick}>초기화</button>
    </div>
  );
}

export default EventPractice;

마무리

이번 강의를 통해 React에서 이벤트를 다루는 다양한 방법을 익힐 수 있었습니다. 특히, 이벤트 핸들러를 따로 정의해두면 코드의 가독성이 높아지고 유지보수성이 향상됨을 실감했습니다.

 

또한, 상태(state)를 활용하여 입력된 값을 동적으로 관리하는 과정에서 클래스형 컴포넌트와 함수형 컴포넌트의 차이점을 비교하며 각 방식의 장단점을 이해할 수 있었습니다. 앞으로 프로젝트에서 이러한 개념을 적극 활용하여 보다 효율적인 UI 개발을 진행해야겠다고 느꼈습니다.

 

---

이 글은 LG CNS AM Inspire Camp 1기 진행 중 Obsidian에 정리해뒀던 글을 블로그에 옮긴 글입니다.