리액트 프롭스(props)란?

찌끅·2024년 8월 9일

리액트 프롭스(props)란?

리액트에서 프롭스(props)는 "properties"의 줄임말로, 컴포넌트 간에 데이터를 전달하는 방법이다. 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용되며, 자식 컴포넌트는 전달받은 프롭스를 읽기 전용으로 사용할 수 있다. 프롭스는 함수의 매개변수처럼 생각할 수 있으며, 리액트 컴포넌트의 재사용성을 높이는 데 중요한 역할을 한다.

프롭스의 특징

일기 전용: 프롭스는 자식 컴포넌트에서 변경할 수 없는 읽기 전용 데이터이다. 자식 컴포넌트에서 프롭스 값을 수정하고자 한다면 부모 컴포넌트에서 상태를 관리하ㅗㄱ, 프롭스를 통해 상태 변경을 전달해야 한다.
컴포넌트의 재사용성: 프롭스를 사용하면 컴포넌트를 다양한 데이터와 함께 재사용할 수 있다. 컴포넌트는 전달받은 프롭스에 따라 다른 UYI를 렌더링할 수 있다.
함수형 컴포넌트와 클래스형 컴포넌트에서 사용: 프롭스는 함수형 컴포넌트와 클래스형 컴포넌트 모두에서 사용할 수 있다. 다만, 클래스형 컴포넌트에서는 this.props를 사용하고, 함수형 컴포넌트에서는 함수의 매개변수로 프롭스를 전달받는다.

프롭스 예제

1. 함수형 컴포넌트에서의 프롭스 사용 예제

import React from 'react';

// 자식 컴포넌트
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 부모 컴포넌트
function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Greeting name="Charlie" />
    </div>
  );
}

export default App;

위 예제에서 Greeting 컴포넌트는 name이라는 프롭스를 받아서, "Hello, [name]!"라는 인사를 표시한다. App 컴포넌트는 Greeting 컴포넌트를 여러 번 호출하며, 각 호출마다 다른 name 값을 전달한다. 이로 인해 각기 다른 인사 메시지가 표시된다.

프롭스 기본값 설정

프롭스는 기본값을 설정할 수 있다. 이를 통해 부모 컴포넌트가 프롭스를 전달하지 않았을 때도 컴포넌트가 예상대로 동작하도록 할 수 있다.

import React from 'react';

// 자식 컴포넌트
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 기본값 설정
Greeting.defaultProps = {
  name: 'Guest',
};

// 부모 컴포넌트
function App() {
  return (
    <div>
      <Greeting />
      <Greeting name="Bob" />
    </div>
  );
}

export default App;

위 예제에서 Greeting 컴포넌트에 name 프롭스를 전달하지 않으면, 기본값으로 "Guest"가 사용된다. 따라서 첫 번째 Greeting 컴포넌트는 "Hello, Guest!"를 출력하게 된다.

결론

프롭스는 리액트 컴포넌트 간에 데이터를 전달하는 중요한 메커니즘이다. 이를 통해 컴포넌트의 재사용성을 높이고, 동적으로 데이터를 전달하여 다양한 UI를 생성할 수 있다. 함수형 컴포넌트와 클래스형 컴포넌트 모두에서 프롭스를 사용할 수 있으며, 기본값 설정도 가능하다.

찌끅

이전 포스트

리액트

다음 포스트

리액트 프롭스(props)란?