리액트 렌더링 요소 : React Elements & React DOM

horiz.d·2021년 12월 18일

리액트 꿀단지

목록 보기

6/41

Rendering Elements

Rendering Element : 렌더링 요소 는 리액트 앱의 설계에 있어 최소단위의 요소이다.

개발자가 화면상에 보여주고자 하는 하나의 Element 는 이런 모습이다.
const element = <h1>Hello,world</h1>;
.
브라우저의 DOM Elements와는 다르게, React Elements는 '단순한 객체'이며 생성 또한 간단하다.
.
React DOM 은 리액트 요소들과 매치되기 위해 DOM을 업데이트를 처리한다.

위에서 설명한 요소 : Elements 는 컴포넌트 : Components와 명백히 다르다.

Elements는 Components의 구성요소 이다.

DOM : Rendering Elements

Root DOM

리액트 앱의 어딘가에 아래와 같은 코드가 담긴 HTML파일이 존재한다.

<div id="root"></div>
우리는 이것을 root DOM 노드라고 부른다.
이 내부에 들어가는 모든것들이 React DOM에 의해 처리되기 때문이다.

리액트로만 만들어진 앱들은 보통 단 하나의 root DOM node를 가지고 있다.
하지만 만약 기존의 앱에 리액트를 접목하고자 할 땐, 필요한 많은 독립된 root DOM node를 가질 수도 있다.

ReactDOM.render( )

우리의 리액트 Elements가 위에서 설명한 Root DOM으로 전달되어 rendering되기 위해선,
React.DOM.render( ) 을 통해 루트 돔 내부에 전달되는 과정이 필요하다.

아래의 코드는 element를 root라는 react root dom에 전달하기 위해 ReactDOM.render( )를 사용한 모습이다.
const element = <h1>Hello, seongwoo</h1>;
ReactDOM.render(element, document.getElementById('root'));

ReactDOM.render( 요소 , document.getElementById( 'root ID' ) );

요소 : 렌더링할 대상 element or elements
'root ID' : root DOM 에 설정된 id ( 보통 'root'로 기본설정 돼있음 )

렌더링 된 요소들을 UPDATE

리액트 요소 들은 불변한다. 즉, 일단 요소를 생성하고 나면, 우린 이것들의 자식이나 속성들을 바꿀 수 없다.
하나의 요소는 영화의 프레임 한장면과 같다.

다시 말해, 하나의 리액트 Element는 정확히 시간의 한 지점에서만의 UI를 표현할 수 있다.
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);
위의 시계침 예제의 코드는, setInterval() 함수 내에서 tick() 내에 있는 ReactDOM.render()를
'매 초 (every second)' 마다 callback 한다
.
( call back? : https://velog.io/@he1256/JS%EC%9D%98-%EC%BD%9C%EB%B0%B1%ED%95%A8%EC%88%98Call-back-Simple-Note-javascript )