[props] HTML 태그에서 attribute를 사용하듯, JSX 태그에서 커스텀속성 사용하기

props는 properties의 약자다.

HTML에서 <img> 태그에는 src="", alt="" 같은 속성이 있었다.

 

지금 React를 사용하는 우리는 HTML 태그를 JavaScript에서 그대로 다루기를 원하고,

그래서 존재하는 것이 JSX 파일이다.

 

그렇다면 JSX에서도 HTML 태그 내 속성을 이용할 수 있어야 하는데, 방법은 간단하다.

 

나만의 커스텀 태그가 <Profile /> 라고 가정하면, Profile의 정의는 다음과 같다.

// Profile.jsx
import React from "react";

function Profile (props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <img src={props.src} alt={props.alt}>
      <p>{props.tel}</p>
    </div>
  )
}

export default Profile;

인자로 props라는 키워드를 사용하며, 이는 다음과 같이 앞으로 이 <Profile /> 커스텀 태그를 사용할 때마다 속성을 부여할 수 있게 한다.

// App.jsx
import React from "react";

function App () {
  return (
    <div>
      <Profile name="Amy" src="www.pic.com/123" alt="Amy_pic" tel="123-4567" email="amy@email.com" />
      <Profile name="Lisa" src="www.pic.com/591" alt="Lisa_pic" tel="987-6543" email="lisa@email.com" />
      <Profile name="Roy" src="www.pic.com/308" alt="Roy_pic" tel="257-4925" email="roy@email.com" />
    </div>
  )
}

export default App;

 

props와 함께라면, 같은 디자인을 활용하여 서로 다른 데이터를 찍어낼 수 있게 된다.