[React] Props

컴포넌트 재사용을 위한 컴포넌트 추출과 Props에 대해 알아보겠습니다.

◾ 컴포넌트 추출

한 컴포넌트가 복잡하다면 일부를 추출해서 분리하는 것이 가독성이 좋고 코드 재사용이 용이합니다.
만약 아래와 같은 댓글에 대한 컴포넌트가 있다고 해봅시다.

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

댓글에는 사용자의 이미지를 띄우는 Avatar와 사용자 정보를 띄우는 UserInfo,
그리고 댓글의 내용과 날짜를 띄우는 Comment에 대한 요소로 이루어져 있습니다.
이를 3개의 컴포넌트로 아래처럼 나눌 수 있습니다.

먼저 이미지를 띄우는 부분을 Avatar 컴포넌트로 분리합니다.

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

그리고 사용자 정보를 띄우는 부분은 UserInfo 컴포넌트로 분리합니다.

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

마지막으로 댓글의 내용과 날짜를 띄우는 부분은 Comment 컴포넌트에 남겨둡니다.
처음 한 컴포넌트에 모든 내용이 있는 것보다, Comment 컴포넌트가 간단해진 것을 볼 수 있습니다.

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

◾ props

props는 컴포넌트로 전달되는 매개변수라고 생각하시면 됩니다.
쉽게 생각하면 함수의 매개변수라고 생각해도 좋습니다.
컴포넌트에서 어떤 값을 전달받아 처리하고 싶다면 props를 이용해야 합니다.
그리고 컴포넌트를 호출할 때 props를 넘겨줘야 합니다. 마치 함수 호출 시 매개변수를 전달하는 것처럼요.

아래 예제를 살펴보며 봅시다.

props는 HTML 속성을 통해 컴포넌트로 전달됩니다.
그리고 사용할 때는 중괄호를 이용해 표현하며 props.속성과 같은 형태로 호출됩니다.

const element = <Introduce name="Elice" />;
  
function Introduce(props) {
  return <h2>I am a {props.name}!</h2>;
}

단, 위의 예제는 함수형 컴포넌트이고 클래스형 컴포넌트에서 사용할 때는 this를 붙여 사용합니다.