컴포넌트를 통해 UI를 재사용 가능한 개별적인 조각으로 나누고, 각 조각을 개별적으로 살펴볼수 있다.

개념적으로 컴포넌트는 JavaScript함수와 유사하다. "props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React엘리먼트를 반환한다.

함수 컴포넌트와 클래스 컴포넌트

JavaScript함수를 작성하므로서 컴포넌트를 정의할수 있다.

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

이 함수는 데이터를 가진 하나의 "props" 객체 인자를 받은후 React엘리먼트를 반환하므로 React컴포넌트라 할수 있다. 이러한 컴포넌트는 JavaScript함수이기때문에 말그래도 "함수 컴포넌트"라고 호칭한다.

props : 속성을 나타내는 데이터

또한 class를 이용하여 컴포넌트를 정의 할 수 있다.

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

위 두가지 유형의 컴포넌트는 React의 관점에서 동일하다.

컴포넌트 렌더링

React엘리먼트는 DOM태그 뿐아니라 사용자 정의 컴포넌트로도 나타낼 수 있다.

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

React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달한다. 이러한 객체를 "props"라고 한다.

props전달 사용 예시

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

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

// Hello, Sara

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

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

컴포넌트 합성

컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있다. React앱에는 버튼, 폼, 다이얼록, 화면 등의 모든 것들이 컴포넌트로 표현된다.

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

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

// Hello, Sara
// Hello, Cahal
// Hello, Edite

컴포넌트 추출

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

      // Commnet-text  -2
      <div className="Comment-text">
        {props.text}
      </div>

      //Comment-data  -3
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

해당 컴포넌트의 구성요소들이 모두 중첩 구조로 이루어져 있어서 변경하기 어려울수가 있다. 또한 각 구성요소를 개별적으로 재사용하는데도 어려움이 있다. 다음 예시는 UserInfo 태그 안에 태그들을 개별적으로 추출한 코드이다.

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.author.name}
     </div>
   </div>
  );
}

전체적인 코드

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를 수정해서는 안된다.

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

위의 sum함수는 순수 함수 인데, 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환한다.

다음 예제는 자신의 입력값을 변경하려는 함수 이다.( 순수함수가 아니다 )

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

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

---

참고

해당 포스팅은 실전 리엑트 공식 홈페이지 https://ko.reactjs.org/
리엑트 자습서 https://ko.reactjs.org/docs/components-and-props.html 에서 참고하여 작성했습니다.