[React] 프로퍼티 소개: 리액트에서의 구성 가능한 컴포넌트

리액트에서 핵심적인 역할을 하는 개념 중 하나인 'props'를 알아보겠습니다. Props를 사용하면 컴포넌트에 데이터를 전달하여 동적이고 구성 가능한 컴포넌트를 만들 수 있습니다. 이를 통해 간단한 Greeter 컴포넌트를 예로 들어 설명해보겠습니다.

1. Props의 필요성

지금까지 만든 Chicken 컴포넌트는 무작위 숫자로만 이루어져 있어 실제로 구성할 수 있는 방법이 없습니다. 그러나 에어비앤비 숙소 카드처럼 각각의 컴포넌트가 다른 데이터를 가지도록 하려면 어떻게 해야 할까요? 바로 이때 'props'가 필요합니다.

 

2. Greeter 컴포넌트의 기초 작성

간단한 Greeter 컴포넌트를 만들어보겠습니다. Greeter.jsx 파일을 생성하고, 다음과 같이 작성합니다.

// Greeter.jsx
const Greeter = (props) => {
  console.log(props); // props 확인용
  return <h1>Hi there, {props.person}!!!</h1>;
};

export default Greeter;

3. Props 사용하기

이제 Greeter 컴포넌트를 사용하여 다양한 인사말을 출력할 수 있습니다. App.jsx 파일을 다음과 같이 작성합니다.

// App.jsx
import Greeter from './Greeter';

const App = () => {
  return (
    <div>
      <Greeter person="Bill" />
      <Greeter person="Ted" />
      <Greeter person="Rosa" />
    </div>
  );
};

export default App;

 

4. Props 구조 분해

Props를 좀 더 간편하게 다루기 위해 구조 분해를 사용할 수 있습니다. Greeter.jsx 파일을 다음과 같이 수정합니다.

// Greeter.jsx
const Greeter = ({ person }) => {
  console.log(person); // 구조 분해 확인용
  return <h1>Hi there, {person}!!!</h1>;
};

export default Greeter;

이제 App 컴포넌트에서 Greeter에 전달하는 데이터를 HTML 속성과 같이 키-값 쌍으로 전달하여 구성 가능한 컴포넌트를 만들 수 있습니다. 'props'는 리액트에서 컴포넌트 간 데이터 전달을 간편하게 해주는 중요한 도구입니다.