props를 이용한 데이터 전달

React에서 props (properties의 줄임말)는 컴포넌트 간에 데이터를 전달하는 주요 방법입니다.

props를 통해 부모 컴포넌트는 자식 컴포넌트에게 정보를 전달할 수 있습니다.

이는 컴포넌트의 재사용성과 유연성을 높이는 데 중요한 역할을 합니다.

props의 개념과 사용 목적

props는 컴포넌트에 전달되는 읽기 전용 데이터입니다.

주요 특징과 사용 목적은 다음과 같습니다.

데이터 전달 : 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달합니다.
컴포넌트 구성 : 동일한 컴포넌트를 다양한 데이터로 재사용할 수 있게 합니다.
불변성 : props는 읽기 전용으로, 자식 컴포넌트에서 직접 수정할 수 없습니다.
타입 체크 : PropTypes를 사용하여 props의 타입을 검증할 수 있습니다.

props를 통한 데이터 전달 방법

부모 컴포넌트에서 자식 컴포넌트로 props를 전달하는 기본적인 방법은 다음과 같습니다.

Props 전달 예제

// 부모 컴포넌트
function ParentComponent() {
  return <ChildComponent name="John" age={30} />;
}
 
// 자식 컴포넌트
function ChildComponent(props) {
  return <p>Hello, {props.name}! You are {props.age} years old.</p>;
}

이 예제에서 ParentComponent는 ChildComponent에 name과 age라는 두 개의 props를 전달합니다.

props의 단방향 데이터 흐름

React에서 데이터는 항상 부모 컴포넌트에서 자식 컴포넌트로 흐릅니다. 이를 "단방향 데이터 흐름"이라고 합니다. 이 원칙은 애플리케이션의 데이터 흐름을 예측 가능하게 만들어 디버깅을 용이하게 합니다.

단방향 데이터 흐름 예제

function ParentComponent() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent count={count} onIncrement={() => setCount(count + 1)} />
    </div>
  );
}
 
function ChildComponent({ count, onIncrement }) {
  return (
    <button onClick={onIncrement}>
      Increment Count (Current: {count})
    </button>
  );
}

이 예제에서 count 상태는 ParentComponent에 있지만, 그 값과 업데이트 함수를 props를 통해 ChildComponent에 전달합니다.

props를 통한 함수 전달

위 예제에서 볼 수 있듯이, props를 통해 함수도 전달할 수 있습니다.

이는 자식 컴포넌트가 부모 컴포넌트의 상태를 간접적으로 변경할 수 있게 해줍니다.

함수 전달 예제

function ParentComponent() {
  const [message, setMessage] = useState('Hello');
 
  const handleClick = () => setMessage('Goodbye');
 
  return <ChildComponent message={message} onClick={handleClick} />;
}
 
function ChildComponent({ message, onClick }) {
  return <button onClick={onClick}>{message}</button>;
}

이 패턴을 사용하면 상태 관리 로직은 부모 컴포넌트에 유지하면서, 자식 컴포넌트를 통해 상태를 변경할 수 있습니다.

props의 기본값 설정

컴포넌트에 전달되는 props의 기본값을 설정할 수 있습니다.

이는 props가 전달되지 않았을 때 사용될 값을 지정하는 방법입니다.

기본값 설정 예제

function Greeting({ name = 'Guest' }) {
  return <h1>Hello, {name}!</h1>;
}
 
// 사용 예
<Greeting /> // 출력: Hello, Guest!
<Greeting name="Alice" /> // 출력: Hello, Alice!

함수의 매개변수에 직접 기본값을 지정하는 방법 외에도, defaultProps를 사용할 수 있습니다.

defaultProps 예제

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}
 
Greeting.defaultProps = {
  name: 'Guest'
};

예제 : 부모에서 자식으로 props 전달

다음은 여러 props를 사용하는 더 복잡한 예제입니다.

function UserProfile({ user, onEdit, onDelete }) {
  return (
    <div className="user-profile">
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <p>Age: {user.age}</p>
      <button onClick={() => onEdit(user.id)}>Edit</button>
      <button onClick={() => onDelete(user.id)}>Delete</button>
    </div>
  );
}
 
function App() {
  const [user, setUser] = useState({
    id: 1,
    name: 'John Doe',
    email: 'john@example.com',
    age: 30
  });
 
  const handleEdit = (id) => {
    console.log(`Editing user with id ${id}`);
    // 편집 로직 구현
  };
 
  const handleDelete = (id) => {
    console.log(`Deleting user with id ${id}`);
    // 삭제 로직 구현
  };
 
  return (
    <UserProfile 
      user={user}
      onEdit={handleEdit}
      onDelete={handleDelete}
    />
  );
}

이 예제에서 App 컴포넌트는 user 객체와 두 개의 함수 handleEdit, handleDelete를 UserProfile 컴포넌트에 props로 전달합니다. UserProfile은 이 props를 사용하여 사용자 정보를 표시하고, 편집 및 삭제 기능을 제공합니다.

props를 통한 데이터 전달은 React 애플리케이션에서 컴포넌트 간 통신의 기본이 됩니다.

이를 통해 컴포넌트를 재사용 가능하고 모듈화된 방식으로 구성할 수 있으며, 애플리케이션의 데이터 흐름을 명확하게 관리할 수 있습니다.

props의 불변성과 단방향 데이터 흐름 원칙을 이해하고 적절히 활용하면, 더 예측 가능하고 유지보수가 쉬운 React 애플리케이션을 개발할 수 있습니다.

이전으로 다음으로