[혼공JS] 리액트 시작하기

혼공JS에서 리액트를 맛봤으면서 왜 또 다시 시작하냐?! 라고 생각할 수 있지만 이번엔 좀더 딥하게 알고 넘어가고자 한다.

 

React

--사용자 인터페이스를 만들기 위한 JavaScript 라이브러리임
  프레임워크가 아니다

React 특징

컴포넌트 기반의 개발 방식
복잡성 감소
재사용 특화
오직 View만 신경씀
효율적인 렌더링을 위한 Virtual DOM 사용
지속적으로 데이터가 변화하는 대규모 애플리케이션에서 사용하기 적합함
업데이트 처리 간결성을 제공
UI를 업데이트하는 과정에서 생기는 복잡함을 모두 해소하고, 더욱 쉽게 업데이트에 접근

 

오해

가상 돔을 사용한다고해서 무조건 빠르다는건 아님

코드 최적화를 한다던가 아니면 단순히 라우팅만 있는경우 리액트가 더 느려질 수 도 있습니다.

 

React 사용 이유

가장 많이 사용되는 프론트 엔드 라이브러리

React와 관련된 추가되는 라이브러리들이 많이 존재

     React-router, Next.js, Redux

-React에 관한 자료가 다른 기술에 비해 많이 존재

     가장 선호되고 많이 사용되어서 많이 언급되고 해결책이 존재함 -- stackoverflow

-비교적 오래된 기술로 안정적임

     React & vue -2013년~2014년

     svelte - 2016년
-채용 시장에선 React를 선호함

     React - 1355건

     vue - 750건

     jQuery -674건

     Angular -233건

     svelte - 30건 (....)

 

가상 DOM VS 물리 DOM

우리는 객체를 배우면서 물리 DOM을 배웠습니다.

다음은 피지컬 DOM에 대한 예시입니다.

let pPhysicalDOM = document.createElement('p')
pPhysicalDOM.innerText = 'Hello physical DOM world!'
document.body.appendChild(pPhysicalDOM)

p요소를 생성해주고 inner Text로 내부에 텍스트를 넣고, body아래 자식으로 넣는 DOM 조작

 

React로 가상DOM 조작을 하고 싶다면?

React.createElement 

React.createElement 를 사용하면 만들 수 있습니다.

우선 React.createElement에 오른쪽 클릭하고 정의로 이동해보면

function createElement<P extends {}>(
        type: FunctionComponent<P>,
        props?: Attributes & P | null,
        ...children: ReactNode[]
    ): FunctionComponentElement<P>;

요런식의 React 동작을 확인 할 수 있는데 

1. 타입을 정합니다 -- h1인지 p인지 요소를 선택하고

2. props의 경우 ?가 붙어있어 생략가능한 선택 매개변수입니다.

3, 자식요소를 추가합니다. -- 텍스트나 기타등등

이를 활용하여 물리DOM을 가상 DOM으로 변환하면

const pVirtualDOM = React.createElement('p', null, 'Hello virtual DOM world!')

이렇게 한줄로 객체를 생성할 수 있게 됩니다.

 

이제 랜더링이 필요한데 이전과 같이 appendChild를 사용하지 못합니다.

가상DOM은 document.body.appendChild로 이해하지 못하기 때문에 우리는 새로운 방식으로 랜더링 해야합니다.

 

Rendor()

화면에 무엇인가 보이게 하는걸 랜더링이라 합니다.

React에서 가상 DOM객체의 랜더링은 React-dom 랜더러가 진행하며 <div id = "root">인 물리적 객체를 먼저 만들어줘야 사용 가능합니다. 

import React from 'react'
import ReactDOM from 'react-dom/client'

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
const pVirtualDOM = React.createElement('p', null, 'Hello virtual DOM world!')

root.render(pVirtualDOM)

코드를 그림으로 표현하면 이렇습니다.

1.<div id =root> 인 객체를 생성하고

2. rendor 메소드가 가상 DOM을 받아들이고

3. 물리DOM으로 변환 시킵니다.

 

도대체 왜 이런 번거러운 일을 하는 걸까요?

이유는 임의의 DOM 객체를 찾아서 속성값만 변환하고 다시 DOM 트리에 반영하려면 재랜더링을 하려면 느리지만

react를 사용하여 가상의 DOM 객체를 만들어 놓고 변화한 부분만 갈아치운다면 빠르게 재랜더링할 수 있기 때문입니다.