🔖 [인프런] 만들면서 학습하는 리액트

출처

만들고 비교하며 학습하는 리액트 (React) - 인프런 | 강의

 

 

---

 

 

 

Vanilla JS → react로 변경(cdn + babel로 실시간 컴파일) → webpack으로 구성하여 코드를 바꿔보는 강의이다.

Vanilla JS까지만 듣고 멈춰있다가 최근에 완강하게 되었다 ^_ ^ㅋ

 

현재는 리액트에서 class형 컴포넌트 사용을 지양하라고했기때문에 함수형 예제가 적다는 점이 아쉬울 순 있는데 함수형을 알고있는 입장에서는 class형은 이렇게 쓰는 거구나.. 하고 비교할 수 있어서 좋았다.

 

나는 아래 분과 같은 의견이고 순수JS 부분은 다시 들어볼 예정이다.

 

 

 

 

 

---

 

 

 

◽ 가상돔(Virtual DOM)

가상돔이 필요한 이유는 자바스크립트로 돔 구조를 변경하면 레이아웃이 변경되며 다시 계산하여 화면에 다시 그린다. 돔을 수정한만큼 이 작업이 반복되기때문에 페이지 렌더링 성능에 영향을 준다.

 

성능을 개선하는 아주 단순한 방법은 돔 API를 적게 사용하면 된다. 바로 변경된 부분만 캐치하여 변경하는 가상돔(Virtual DOM)을 만들어 메모리에서 관리할 수 있다.

 

 

 

 

◽ JSX란?

엘리먼트의 부모-자식 간의 구조를 파악하기 위해서는 코드를 유심히 봐야한다. 그래서 이를 쉽게 파악할 수 있도록 대안으로 나온 것이 템플릿 언어이다. 핸들바, Pug가 대표적이고 앵귤러나 Vue도 템플릿 기능을 지원하지만 리액트는 지원하지 않는다. 리액트에서는 createElement() 함수를 써서 만들어야했는데 이건 비효율적인 방법이다. 리액트는 JSX라는 자바스크립트 확장문법을 사용한다.

 

📄 JSX와 PURE 비교

🔗 https://babeljs.io/repl

// JSX
(<h1>hello</h1>)

// PURE
React.createElement("h1", null, "hello");

 

리액트 코딩을 편하게 하려면 바벨같은 트랜스파일러의 도움을 받는 것이 좋다. 클래스, JSX 문법을 사용할 수 있게끔 해주기 때문이다.

<script
    type="text/babel"
    data-type="module"
    data-preset="react"
></script>