Components and Props

Components는 당신이 UI를 독립적으로 나누고, 재활용가능한 조각들로 나누고, 각각을 따로 생각할 수 있도록 만들어준다.

개념적으로 Components들은 자바스크립트 function과 같다. Components는 Props라고 불리우는 임의의 인풋을 받고, React Element를 반환하는데, 이 때 무엇이 화면에 보여야할지를 설명해준다.

Functional and Class Components

Components를 정의하는 가장 쉬운 방법은 Javascript Function을 작성하는 것이다.

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

위의 Function은 유효한 React Component이다. 왜냐하면, 하나의 Prop을 인풋으로 받고 React Element를 리턴하는 형태이기 때문이다.

당신은 또한 ES6 클래스를 사용할 수도 있다.

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

Rendering a Component

const element = <Welcome name="Sara" />;

위의 코드와 같이 User-Defined 컴포넌트도 사용할 수 있다.

React가 User-Defined Component를 쓰는 Element를 발견하면, React는 JSX 속성들을 하나의 오브젝트 단위로 이 컴포넌트에 넘긴다.

우리는 이 오브젝트를 "Props"라고 부른다.

아래 코드는 "Hello Sara"를 화면에 렌더링 한다.

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

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

Let's recap what happens in this example:

1. We call ReactDOM.render() with the <Welcome name="Sara" /> element.
2. React calls the Welcome component with {name : 'Sara'} as the Props.
3. Our Welcome component returns a <h1>Hello, Sara</h1> element as the result.
4. React DOM efficiently updates the DOM to match <h1>Hello, Sara</h1>

Composing Components

컴포넌트들은 다른 컴포넌트에 쓰일 수 있다.

밑이 그 예시이다. (App 컴포넌트가 Welcome을 여러번 Render함.)

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Components must return a single root element. This is why we added a<div>to contain all the<Welcome />elements.

Extracting Components

하나의 컴포넌트를 더 작은 조각으로 쪼갤 수 있다.

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를 추출한다.

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

We recommend naming props from the component's own point of view rather than the context in which it is being used.

그렇게 되면, Comment 컴포넌트를 조금 줄일 수 있다.

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={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>
  );
}

다음으로는 User-Info를 추출해 볼 수 있다.

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

위의 코드로 인해 Comment Component는 더욱더 간결해진다.

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 are Read-Only!!!!!!

말 그대로 Props are Read-Only이다.