React - props, 이벤트 핸들러

props와 이벤트 핸들러 정리

React에서 컴포넌트 간 데이터 전달(props)과 사용자 입력 처리(이벤트 핸들러)는 가장 기본적이면서도 중요한 개념입니다.
이 글에서는 props의 개념과 사용법, 그리고 이벤트 핸들러 작성 및 최적화 방법까지 예제 중심으로 정리합니다.

props란?

props는 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 속성입니다.
함수의 매개변수처럼 컴포넌트에 값을 전달하고 사용할 수 있으며, 읽기 전용입니다.

// App.jsx
function App() {
  return (
    <>
      <User name="홍길동" age={30} />
    </>
  );
}

// User.jsx
function User({ name, age }) {
  return (
    <>
      <p>이름: {name}</p>
      <p>나이: {age}</p>
    </>
  );
}

※ props는 부모 → 자식 방향으로만 전달됩니다.
※ 구조 분해 할당으로 { name, age }처럼 props 값을 꺼내 쓸 수 있습니다.

props를 반복해서 전달하기

const users = [
  { name: "홍길동", age: 20 },
  { name: "고길동", age: 40 },
  { name: "신길동", age: 60 }
];

return (
  <>
    {users.map((user) => (
      <User key={user.name} name={user.name} age={user.age} />
    ))}
  </>
);

※ 배열의 map 함수를 활용하면 props를 반복적으로 전달하여 컴포넌트를 여러 개 출력할 수 있습니다.
※ key는 React가 내부에서 효율적으로 렌더링을 관리하기 위해 필요합니다.

---

이벤트 핸들러 - 각각의 상태와 조건문으로 처리한 코드

아래는 가장 기본적인 방식으로, 각각의 입력값에 대해 별도의 상태를 선언하고
onChange 이벤트 안에서 name 값을 조건문으로 분기하여 상태를 업데이트하는 코드입니다.

import { useState } from "react";

const EventPractice = () => {
  const [message, setMessage] = useState("");
  const [name, setName] = useState("");

  const handleChange = (e) => {
    if (e.target.name === "message") {
      setMessage(e.target.value);
    } else if (e.target.name === "name") {
      setName(e.target.value);
    }
  };

  const handleConfirm = () => {
    alert(`메시지: ${message} 이름: ${name}`);
  };

  return (
    <>
      <h1>이벤트 핸들러 연습</h1>
      <input
        type="text"
        name="message"
        value={message}
        onChange={handleChange}
        placeholder="메시지를 입력하세요."
      />
      <input
        type="text"
        name="name"
        value={name}
        onChange={handleChange}
        placeholder="이름을 입력하세요."
      />
      <h2>메시지: {message}</h2>
      <h2>이름: {name}</h2>
      <button onClick={handleConfirm}>확인</button>
    </>
  );
};

export default EventPractice;

※ 이 코드는 처음 React를 배울 때 이해하기 쉬운 구조입니다.
※ 하지만 입력 필드가 많아질 경우 useState와 setXXX 함수가 계속 늘어나고, handleChange 내부도 길어져 코드가 복잡해질 수 있습니다.

이벤트 핸들러 - 상태를 통합하고 공통 이벤트 핸들러로 관리

React에서 여러 개의 input 요소를 처리할 때, 각 요소마다 별도의 상태와 이벤트 핸들러를 작성하면 코드가 길어지고 복잡해질 수 있습니다.
이럴 때는 상태를 하나의 객체로 통합하고, 공통 이벤트 핸들러를 사용하는 방식으로 코드의 가독성과 유지보수성을 높일 수 있습니다.

줄인 후 코드

import React, { useState } from 'react';

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

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

  const handleConfirm = () => {
    alert(`메시지: ${form.message}\n이름: ${form.name}`);
  };

  return (
    <>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="message"
        placeholder="메시지를 입력하세요."
        value={form.message}
        onChange={handleChange}
      />
      <input
        type="text"
        name="name"
        placeholder="이름을 입력하세요."
        value={form.name}
        onChange={handleChange}
      />
      <button onClick={handleConfirm}>확인</button>

      <h2>메시지: {form.message}</h2>
      <h2>이름: {form.name}</h2>
    </>
  );
}

export default EventPractice;

요약

• useState를 객체로 선언하여 여러 입력값을 하나의 상태로 관리할 수 있습니다.
• name 속성을 기준으로 어떤 필드인지 구분하고, 그에 따라 상태를 업데이트합니다.
• 스프레드 문법 ...form을 사용해 기존 값을 복사한 뒤 필요한 필드만 덮어씌웁니다.
• 공통 이벤트 핸들러를 활용하면 코드가 짧고 깔끔해집니다.