TIL - Component, props

Component와 props

 

props는 속성을 나타내는 데이터이다.

 

페이지에 "Hello, Sara"를 렌더링 하는 예시

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

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

 

(컴포넌트의 이름은 항상 대문자로 시작한다. 소문자로 시작하게 된다면 DOM 태그로 처리한다.)

 

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을 효율적으로 업데이트한다.

 

Component 합성

 

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

 

Welcome을 여러 번 렌더링 하는 App 컴포넌트를 만들 수 있다.

 

Component 추출

 

아래 컴포넌트를 보자

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

 

이 컴포넌트는 author(객체), text(문자열) 및 date(날짜)를

props로 받은 후 소셜 미디어 웹 사이트의 코멘트를 나타낸다.

이 컴포넌트는 구성요소들이 모두 중첩 구조로 이루어져 있어서 변경하기 어려울 수 있으며,

각 구성요소를 개별적으로 재사용하기도 힘들다. 이 컴포넌트에서 몇 가지 컴포넌트를 추출해보자

 

 

먼저 Avatar를 추출해보자

 

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

  );
}

Avatar는 자신이 Comment내에서 렌더링 된다는 것을 알 필요가 없다.

따라서 props의 이름을 author에서 더욱 일반화된 user로 변경해준다.

 

 

다음으로 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>
  );
}

 

여러 번 사용되거나 UI일부가 자체적으로 복잡한 경우에는 재사용 가능한 컴포넌트로 만들어 놓는 것이 좋다.

 

 

props는 읽기 전용이다.

 

 

function sum(a, b) {
  return a + b;
}

 

이런 함수들은 '순수 함수'라고 호칭한다.

입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하기 때문이다.

 

function withdraw(account, amount) {
  account.total -= amount;
}

 

반면에 위의 함수는 자신의 입력값을 변경하기 때문에 순수 함수가 아니다.

 

 

모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.