Kim Youngjae

Publisher and Developer

안녕하세요. Kim.YJ 입니다.

이번 포스팅은 React Props에 대해 포스팅 해 보겠습니다.

React Props에 대해 함께 알아 봅시다.

[ React Props란? ]

React에서 컴포넌트를 반복 사용하다보면, 재사용성의 제한을 받게 됩니다.
이 재사용성의 용이함을 위해 Props를 이용하여 구성요소가 데이터를 받거나,
처리하고 보내기 위해 사용됩니다.

  • Props 특징
  1. 불변의 데이터
  2. 부모로부터 전달되는 데이터
  3. 변경 불가

[ Props 응용 예시 ]

Props의 예시를 확인해 보겠습니다.

먼저 Test component를 생성하여 줍니다.
img, h1, p 태그의 데이터를 직접적으로 넣어 주지 않고 재사용성을 위해,
속성으로 원하는 key와 value 들을 명시하면 props라는 객체로 데이터를 전달합니다.
props로 전달받은 key값을 url, name, title 로 각각의 value 데이터를 받아옵니다.

import React from "react";
import "./Test.scss";

export default function Test({ url, name, title }) {
  return (
    <div className="box">
      <img className="img" src={url} alt="이미지" />
      <h1 className="name">{name}</h1>
      <p className="title">{title}</p>
    </div>
  );
}

그렇게 사용하는 곳에서 key 값 url, name, title 를 이용해서,
각기다른 value 데이터를 적용해서 동일한 component를 재사용 할수 있습니다.

import Test from "./components/Test/Test";

function App() {
  return (
    <>
      <Test
        url="https://images.unsplash.com/photo-1674376906038-a18fed600a55?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDExfHRvd0paRnNrcEdnfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
        name="토마스"
        title="기관차"
      />
      <Test
        url="https://images.unsplash.com/photo-1675541744669-c4796e241421?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDEyfHRvd0paRnNrcEdnfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
        name="둘리"
        title="공룡"
      />
      <Test
        url="https://images.unsplash.com/photo-1675505657657-d69fada7287c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDE1fHRvd0paRnNrcEdnfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
        name="개구리"
        title="양서류"
      />
    </>
  );
}

export default App;

출력 화면

위 출력 화면 이미지와 같이 하나의 컴포넌트에서 서로 다른 데이터를 Props로 전달 받아
출력되는 것을 확인할 수 있습니다.
이렇게 재사용성이 용이한 컴포넌트를 사용할 수 있습니다.

React component의 재사용성을 위한 Props란 무엇인지
간단한 사용 예시를 통해 알아 보았습니다.



지금까지 Props에 대해 포스팅을 통해 알아 보았습니다.
다음 포스팅은 React 대한 더 자세한 정보로 찾아뵙겠습니다.
감사합니다!

참고