-
JSX & createElement() & reactDOM.render()리액트 2021. 8. 24. 22:37
리액트를 사용하며 JSX를 기본적으로 사용하는데, 이번에 JSX가 어떻게 바벨을 통하여 자바스크립트 객체를 호출하여 이를 UI에 반영하는지 알아보도록 하겠습니다. 예시와 설명은 리액트 공식문서를 토대로 작성했습니다.
JSX
흔히 사용하는 jsx 중 하나입니다.
const element = ( <h1 className="greeting"> Hello, world! </h1> );
바벨은 컴파일을 통하여 위의 우리가 적은 JSX를 아래와 같이 컴파일입니다.
const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );
React.createElement()는 몇 가지 검사를 수행 한 뒤 아래와 같은 객체를 생성합니다.
// 주의: 다음 구조는 단순화되었습니다 const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world!' } };
위와 같은 객체를 React Element라고 부릅니다. React 엘리먼트는 리액트 앱의 가장 단위입니다. 브라우저 DOM 엘리먼트와 달리 리액트 엘리먼트는 보이는것 과 같이 객체로 표현되며 이를 통해 화면에 표시할 내용을 기술합니다. React DOM은 리액트 엘리먼트를 반영하여 화면을 업데이트 하도록 돕습니다.
createElement()
React.createElement( type, [props], [...children] )
JSX를 사용할 경우 React.createElement()를 호출할 일 은 없지만, 무엇인지는 알아둡시다!
DOM에 엘리먼트 랜더링하기
<div id="root"></div>
위 <div>는 root DOM 노드라고 부르며 리액트 앱 내 html에 보신 적이 있으실 것입니다. 이 안에 들어가는 모든 엘리먼트는 React DOM에서 관리를 합니다.
const element = <h1>Hello, world</h1>; ReactDOM.render(element, document.getElementById('root'));
리액트 엘리먼트를 root DOM 노드에 렌더링하기 위해서는 ReactDOM.render() 메소드로 전달을 하면 됩니다.
ReactDOM.render()
ReactDOM.render(element, container[, callback])
리액트 엘리먼트를 container DOM에 렌더링하고 컴포넌트에 대한 참조를 반환합니다.
리액트 엘리먼트가 이전에 container 내부에 렌더링 되었던 적이 있다면, 해당 엘리먼트를 업데이트하고 DOM에서 변경된 부분만 업데이트 합니다.
'리액트' 카테고리의 다른 글
Portals (0) 2021.09.08 Context (0) 2021.09.05 Lists & Keys & Reconciliation (0) 2021.08.29 Hooks (useState, useEffect) (0) 2021.08.23 컴포넌트 생명주기 (0) 2021.08.22