랜더링2 React.js - ReactDOM.render() 메서드 ReactDOM.render()란? 안녕하세요. 고코더 입니다. ● 1. ReactDOM.render() 함수를 통해 Web API(document.createElement)를 사용하여 웹 브라우저에 그려주는 함수입니다. React.createElement를 통해 Object를 생성하고 이를 In-Memory에 저장합니다. Root DOM Node에 랜더링 하기 위해서 이를 사용합니다. 지금까지 따라한 예제에서 루트 DOM 노드에 이 메서드를 사용했었습니다. ● 2. 그렇다면 해당 ReactDOM.render() 메서드의 파라미터 형태를 함께 알아보겠습니다. 2번 라인 : 화면에 그려질 리액트의 element를 말합니다. 3번 라인 : 리액트 element를 해당 container DOM에 랜더링 합니다.. 2021. 1. 24. React.js - DOM에 Element 랜더링 하는 방법 리액트 돔에 엘리먼트 랜더링 하기 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 엘리먼트(element)를 DOM에 랜더링 하는 부분을 알아보겠습니다. 엘리먼트는 리액트에서 애플리케이션을 구성할 때 가장 작은 단위입니다. 이를 통해 화면을 구성하고 완성합니다. 제 블로그에서 학습하시던 분들은 이전 소스에서 이미 계속적으로 엘리먼트를 DOM에 랜더링을 자연스럽게 하고 있었습니다. ● 2. 랜더링 하는 소스를 살펴보겠습니다. 1번 라인 : 엘리먼트를 작성합니다. 2번 라인 : 리액트 DOM의 노드에 랜더링 합니다. const element = Hello, react!; ReactDOM.render(element,document.getElementById("root")); ● 3. 랜더링 된 DIM은 r.. 2021. 1. 23. 이전 1 다음
