[React] Component & Props

출처: https://ko.reactjs.org/docs/components-and-props.html

function Component

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

데이터를 가진 하나의 "props" 객체 인자를 받은 후 React Element를 반환합니다. 따라서 유효한 Component입니다. JS 함수기 때문에 함수 컴포넌트라고 합니다.

주의 사항

컴포넌트의 이름은 항상 대문자로 시작합니다.

Component 추출

function formatDate(date) {
  return date.toLocaleDateString();
}

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

const comment = {
  date: new Date(),
  text: 'I hope you enjoy learning React!',
  author: {
    name: 'Hello Kitty',
    avatarUrl: 'https://placekitten.com/g/64/64',
  },
};

ReactDOM.render(
  <Comment
    date={comment.date}
    text={comment.text}
    author={comment.author}
  />,
  document.getElementById('root')
);

구성 요소가 중첩 구조로 이루어져 있기 때문에 변경하기 어려울 수 있지만 comment 부분의 author를 자세히 들여다보면 쉽게 찾을 수 있습니다.
왜 props.author.avatarUrl이 나왔는지, props.author.name이 나왔는지..

props는 읽기 전용

function Component, Class Component 모두 자체 props를 수정해서는 안 됩니다.

모든 React Component는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.