Element Rendering, Component, Props

Element

const element = <h1>Hello, world</h1>;

브라우저 DOM Element와 달리 React Element는 일반 객체이며(plain object) 쉽게 생성할 수 있습니다. React DOM은 React Element와 일치하도록 DOM을 업데이트합니다. 

<div id="root"></div>

HTML 파일 어딘가에 위와 같은 <div>가 있다면, 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 root DOM 노드라고 부릅니다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있습니다. React Element를 렌더링 하기 위해서는 우선 DOM Element를 ReactDOM.createRoot()에 전달한 다음, React Element를 root.render()에 전달해야 합니다. 

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

React Element는 불변객체입니다. Element를 생성한 이후에는 해당 Element의 자식이나 속성을 변경할 수 없습니다. Element는 특정 시점의 UI를 보여줍니다. 

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);
}

setInterval(tick, 1000);

위 함수는 setInterval() 콜백을 이용해 초마다 root.render()를 호출합니다.

React DOM은 해당 Element와 그 자식 Element를 이전의 Element와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트합니다. 즉 변경된 텍스트 노드만 업데이트합니다.

 

Component

개념적으로 Component는 JavaScript 함수와 유사합니다. props라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React Element를 반환합니다. Component를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것입니다.

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

이 함수는 데이터를 가진 하나의 props(속성을 나타내는 데이터) 객체 인자를 받은 후 React Element를 반환하므로 유효한 React Component입니다. 이러한 Component는 JavaScript 함수이기 때문에 말 그대로 함수 컴포넌트라고 호칭합니다. 또한, ES6 class를 사용하여 컴포넌트를 정의할 수 있습니다.

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

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

React Element는 사용자 정의 Component로도 나타낼 수 있습니다. React가 사용자 정의 Component로 작성한 Element를 발견하면 JSX 어트리뷰트와 자식을 해당 Component에 단일 객체로 전달합니다. 이 객체를 props라고 합니다.

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

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

Component는 자신의 출력에 다른 Component를 참조할 수 있습니다. 이는 모든 세부 단계에서 동일한 추상 Component를 사용할 수 있음을 의미합니다. React 앱에서는 버튼, 폼, 다이얼로그, 화면 등의 모든 것들이 흔히 Component로 표현됩니다. 일반적으로 새 React 앱은 최상위에 단일 App Component를 가지고 있습니다. 하지만 기존 앱에 React를 통합하려는 경우에는 버튼과 같은 작은 Component부터 시작해서 뷰 계층의 상단으로 올라가면서 점진적으로 작업해야 할 수 있습니다. 

Component는 여러 개로 나눌 수도 있습니다. 아래의 Comment 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>
  );
}

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

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

재사용 가능한 Component를 만들어 놓는 것은 더 큰 앱에서 작업할 때 두각을 나타냅니다. UI 일부가 여러 번 사용되거나, UI 일부가 자체적으로 복잡한 경우에는 별도의 Component로 만드는 게 좋습니다.

마지막으로 함수 Component나 클래스 Component 모두 Component의 자체 props를 수정해서는 안 되며, 모든 React Component는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.