REACT 공식 문서 정리 - 4. Element 렌더링

4. Element 렌더링

4.1 element의 정의

Element는 컴포넌트의 구성요소이며 React  앱의 가장 작은 단위이다.

특정 부분만 리렌더링 할 수 있기에 효율적인 자원관리를 할 수있다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
 
const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

위의 예시는 다음과 같은 일이 일어난다.

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

렌더링이라는 단어가 생소 할 때 브라우저 기초 지식의 렌더링 엔진을 참고하자.

 

4.2 렌더링된 Element 업데이트 하기

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2> // 리렌더링 부분
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);

예시일 뿐 대부분의 react 앱은ReactDom.render를 한번만 호출한다.

setInterval() 콜백을 이용해 1초마다 render()함수를 호출한다.

1초마다 전체 렌더링을 다시 하지만,  매번 바뀌는 부분만 다시 렌더링 한다.