들어가는 말

UI를 재사용 가능한 component로 나누어 관리할 수 있다. 개념적으로 component는 JavaScript 함수와 유사하다. props라고 하는 임의의 입력을 받은 후, React element를 반환한다.

component에 대하여 알아보자.

---

함수 component와 클래스 component

React component를 정의하는 방법은 두 가지가 있다.

첫 번째, JavaScript 함수로 작성하는 방법이다. 함수로 구현한 component는 데이터를 가진 하나의 props 객체를 인자로 받은 후 React element를 반환한다.

이러한 component는 JavaScript 함수이기 때문에 말 그대로 함수 컴포넌트라고 부른다.

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

두 번째, JavaScript 클래스로 작성하는 방법이다.

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

React의 관점에서 위의 두 방식으로 작성한 component는 동일하다.

참고로, Component의 이름은 항상 대문자로 시작한다.

Component 렌더링

이제까지는 DOM Tag만을 사용해 React element를 생성했다.

const element = <div />;

Component를 정의하는 방법을 배웠으니, 사용자 정의 component로 React element를 생성하는 방법을 살펴보자.

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

React가 사용자 정의 component로 작성한 element를 발견하면, JSX attribute와 그 자식을 해당 component에 단일 객체로 전달하는데, 이 때 객체를 props라고 한다.

페이지에 Hello, Yong을 렌더링하는 예시를 보자.

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

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

위 예시에서는 아래의 일들이 순서대로 발생한다.
1. <Welcome name="Yong"/> element로 ReactDOM.render()를 호출한다.
2. React는 {name: 'Yong'}을 props로 하여, Welcome component를 호출한다.
3. Welcome component는 결과적으로 <h1\>Hello, Yong</h1\> element를 반환한다.
4. React DOM은 <h1\>Hello, Yong</h1\> element와 일치하도록 DOM을 효율적으로 업데이트한다.

---

Component 중첩

component는 자신의 코드안에 다른 component를 참조할 수 있다.

예를 들어 Welcome을 여러 번 렌더링하는 App component를 만들 수 있다.

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

function App() {
  return (
    <div>
      <Welcome name="Yong" />
      <Welcome name="Man" />
      <Welcome name="Doo" />
    </div>
  );
}

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

props는 읽기 전용이다.

아래 예시를 보자. 아래와 같은 함수들은 순수 함수라고 한다. 입력값을 바꾸려 하지 않고, 항상 동일한 입력값에 대해 동일한 결과를 반환하는 함수를 뜻한다.

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

반면에, 아래와 같은 함수들은 자신의 입력값을 변경하기 때문에 순수함수가 아니다.

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

React는 매우 유연한 라이브러리지만, 한 가지 엄격한 규칙이 있다.

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

즉, component는 자신의 props를 절대 수정하면 안된다.

물론 우리가 앞으로 구현할 UI는 동적이며 시간에 따라 변한다. 다음 글에서 state라는 개념을 통해, 위 규칙을 위반하지 않고, 사용자의 액션이나 다른 요소 등에따라 자신의 출력값을 변경하는 방법을 살펴보자.