Skip to main content

2 posts tagged with "Rendering"

View All Tags

· 3 min read

리액트와 리랜더링 알아보기​

바닐라 JS 변경으로 인해 Element를 다시 그린다

const rootElement = document.getElementById('root')

function random() {
    const number = Math.floor(Math.random() * (10 - 1) + 1)

    const element = `
        <button>${number}</button>
    `

    rootElement.innerHTML = element
}

random()
  • 바닐라 JS에서 요소에 변경이 발생하면 모든 element들이 다시 그려지게 된다

React는 변경된 부분만 다시 그린다

const rootElement = document.getElementById('root')

function random() {
    const number = Math.floor(Math.random() * (10 - 1) + 1)

    const element = <button>{number}</button>

    ReactDOM.render(element, rootElement)
}

random()
  • React에서는 변경된 요소들의 값만 변경이 이루어 진다

모든 요소가 변경되는 것과 특정 요소만 변경되는 것 둘은 장단점이 존재한다

리액트와 리랜더링 알아보기 2​

비교 알고리즘

  • 앨리먼트 타입이 바뀌는 경우
    • 이전 앨리먼트는 버리고 새로 그린다
  • 앨리먼트 타입은 같고 props 만 변경된 경우
    • key를 먼저 비교하고, props를 비교해서 변경사항을 반영한다

정리​

  • 리액트의 앨리먼트는 불변 객체이다
  • 리액트의 변경 사항 반영은 리액트에게 일임한다
  • 리액트의 비교는 Reconciliation(재조정)이다 비교 연산(알고리즘)을 통해 진행한다
    • 타입이 바뀌면 이전 내용을 버리고 다시 그림
    • 타입이 같으면 key값 비교후 변경된 props에 대한 변경사항만 반영한다
  • Virtual Dom은 리액트가 가상 돔을 가지고 있다가 비교할떄 사용한다

참조​

  • 패스트 캠퍼스 온라인 강좌(한 번에 끝내는 React의 모든 것 초격자 패키지 Online)

· 3 min read

엘리먼트 렌더링 React Document 정리​

엘리먼트 렌더링

  • 엘리먼트는 React 앱의 가장 작은 단위이다
const element = <h1>Hello, World</h1>
  • 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain object) 쉽게 생성할 수 있다
  • ReactDOM은 React 엘리먼트와 일차하도록 DOM을 업데이트 한다

DOM에 엘리먼트 렌더링하기​

  • HTML에 root div가 있다고 가정한다
<div id="root"></div>
  • 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 "루트(root)" DOM노드라고 부른다
  • React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있다
  • React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있다(이해 못함)
  • React 엘리먼트를 렌더링 하기 위해서는 우선 DOM 엘리먼트를 ReactDOM.createRoot()에 전달한다음 React 엘리먼트를 root.render()에 전달해야 한다
const rootElement = document.getElementById('root')
const element = <h1>Hello, World</h1>
ReactDOM.render(element, rootElement)

렌더링 된 엘리먼트 업데이트하기​

  • React 엘리먼트를 불변객체이다
  • 엘리먼트를 생상한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다
  • 엘리먼트 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여준다
  • 위 설명을 바탕으로 하면 UI를 업데이트 하는 유일한 방법은 새로운 엘리먼틑 생성하여 이를 React로 전달하는 것이다
  • Tick Clock Example
const rootElement = document.getElementById('root')

function tick() {
    const element = (
        <div>
            <h1>Hello, World</h1>
            <h2>It is {new Date().toLocaleTimeString()}.</h2>
        </div>
    )

    ReactDOM.render(element, rootElement)
}

setInterval(tick, 1000)
  • 1초 마다 tick 함수를 호출하여 엘리먼트의 변화를 화면에 보여준다

변경된 부부만 업데이트하기​

  • ReactDOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트한다
  • 코드 상에서는 초당 element를 모두 다시 render하지만, 실제 React는 변경된 텍스트 노드만 업데이트 한다