React에서 폼 제출 처리와 props를 통한 컴포넌트 간 데이터 전달

 

React에서 폼 제출 처리와, 컴포넌트 간 데이터를 전달할 때 사용하는 props에 대해 알아보겠습니다.
이 두 가지는 React를 구성하는 기본 요소 중 하나로, 기능적인 웹앱을 만들기 위해 꼭 필요한 개념입니다.

---

1. 폼 제출 처리하기

HTML에서 form 요소는 기본적으로 제출 시 페이지를 새로고침합니다. 하지만 React에서는 이를 막고 상태로 처리합니다.

예제: 간단한 로그인 폼

import { useState } from 'react';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault(); // 새로고침 방지
    console.log('로그인 정보:', { email, password });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="email" 
        value={email} 
        onChange={(e) => setEmail(e.target.value)} 
        placeholder="이메일" 
      />
      <input 
        type="password" 
        value={password} 
        onChange={(e) => setPassword(e.target.value)} 
        placeholder="비밀번호" 
      />
      <button type="submit">로그인</button>
    </form>
  );
}

폼의 onSubmit 이벤트에서 e.preventDefault()를 호출해 기본 동작을 막고, 필요한 로직을 처리합니다.

---

2. props로 컴포넌트 간 데이터 전달하기

React는 컴포넌트를 조합해서 UI를 구성합니다. 이때 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하려면 props를 사용합니다.

예제: 부모에서 메시지를 자식에게 전달

function Child({ message }) {
  return <p>전달받은 메시지: {message}</p>;
}

function Parent() {
  return <Child message="안녕하세요, 자식 컴포넌트!" />;
}

Parent 컴포넌트에서 Child 컴포넌트로 message라는 props를 전달했고,
Child 컴포넌트는 그 값을 화면에 출력하고 있습니다.

여러 개의 props 전달

function Profile({ name, age }) {
  return <p>{name} ({age}세)</p>;
}

function App() {
  return <Profile name="김철수" age={28} />;
}

props는 문자열, 숫자, 객체, 함수 등 다양한 형태로 전달할 수 있습니다.

---

props를 함수로 전달하기

부모 컴포넌트에서 자식 컴포넌트로 이벤트 처리 함수를 넘겨주는 것도 가능합니다.

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

function App() {
  const handleClick = () => {
    alert('자식 컴포넌트에서 부모 함수 호출!');
  };

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

이와 같이, props는 단순 데이터 전달뿐 아니라, 컴포넌트 간에 동작을 연결하는 중요한 수단이 됩니다.

---

마무리

폼 처리와 props를 이용한 컴포넌트 간 데이터 전달은 React 개발의 핵심입니다.
컴포넌트 구조를 잘 설계하고, 필요한 데이터나 함수를 props로 넘겨주는 방식은 규모가 커질수록 중요해집니다.