Props와 States [Props]

목적

sprint를 통해 Props와 States를 적용해보는 건 크게 어렵지 않았다. 하지만 개념 정리는 쉽지 않았다.
이번 기회에 Props와 States를 완벽히 정리하고 싶어 글을 남긴다. 이는 React 공식 사이트를 참조했다.

Components와 Props

가장 간단히 컴포넌트를 표현하는 방식 = JavaScript 함수

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

위 컴포넌트의 경우 props 객체 인자로 받아서 React 엘리먼트를 반환한다. 이를 함수 컴포넌트라고 한다.

아래는 ES6 class 문법으로 만든 클래스 컴포넌트라고 한다.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

컴포넌트 렌더링

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

위 함수 컴포넌트 렌더링의 순서는 아래와 같다.
1) <Welcome name="Sara" /> 엘리먼트로 ReactDOM.render()를 호출한다.
2) React는 {name: 'Sara'}를 props로 Welcome 컴포넌트를 호출한다.
3) Welcome 컴포넌트는 <h1>Hello, Sara</h1> 엘리먼트를 반환한다.
4) React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 업데이트한다.

컴포넌트 추출

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>
  );
}

CodePen에서 보기

Comment 컴포넌트는 comment 객체에서 알맞은 정보를 가져와서 사용하고 있다.
그러나 우리는 컴포넌트를 잘개 나누어 여러 컴포넌트로 나눌 수 있다.

Avator 컴포넌트 (Comment 컴포넌트에서 users라는 이름으로 props를 전달)를 아래와 같이 만들어,

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

Comment 컴포넌트는 아래와 같이 업데이트할 수 있다.

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avator users={props.author} />
        <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>
  );
}

여기에 더해 UserInfo 컴포넌트를 아래와 같이 만들어,

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

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>
  );
}

CodePen에서 보기

props 객체는 부모 컴포넌트가 자식 컴포넌트에게 보내는 "택배"로 생각했다. "택배"회사는 자식 컴포넌트에게 보내는 props 이름이라고 이해했다. 택배회사 = {}의 중괄호 안에 들어가는 것은 택배 상자 안에 들어가는 내용물과 같다.