비장한 표정으로 일 하는 척 하는 나.

---

2 리액트 핵심 요소 깊게 살펴보기

✨2-1 JSX란?

JSX란?

JSX는 페이스북이 임의로 만든 새로운 문법의 자바스크립트 확장 문법,
ECMAScript(자바스크립트 표준) 의 일부가 아님.

JSX는 자바스크립트 표준이 아니기때문에 반드시 트랜스파일러를 거쳐서 자바스크립트 코드로 변환해어야 함.

🔻JSX의 정의

JSX는 4가지 컴포넌트를 기반으로 구성되어있음.

JSXElement 컴포넌트

JSX를 구성하는 가장 기본요소, HTML 요소(element) 랑 비슷한 역할을 함.

JSXAttribute 컴포넌트

JSXElement의 요소의 이름으로 쓸 수 있는 것을 의미.

JSXChildren 컴포넌트

JSXElement에 부여할 수 있는 속성을 의미

JSXString컴포넌트

JSXElement의 자식값을 나타냄.

✨2-2 DOM과 리액트 파이버

🔻DOM과 브라우저 렌더링 과정

DOM 이란?

웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고있는 것.

🔻가상 DOM의 탄생 배경

렌더링 과정은 매우 복잡하고, 많은 비용이 든다.

렌더링 과정을 줄이기 위해 생겨난 것이 가상 DOM.

🔻가상 DOM을 위한 아키텍처, 리액트 파이버

리엑트 파이버?

파이버 재조정자(FIBER RECONCILER) 가 관리함.
가상 DOM과 실제 DOM을 비교해 변경 사항을 수집하고, 만약 이 둘사이에 차이가 있으면 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링 요청을 하는 역할을 함.
리액트에서 관리하는 평범한 자바스크립트 객체.

파이버 트리는 리액트 내부에 두 개가 존재.

하나는 현재 모습을 담은 파이버트리 & 다른 하나는 작업 중인 상태를 나타내는 workInProgress 트리.

🔻파이버와 가상 DOM

리액트 컴포넌트에 대한 정보를 1:1로 가지고 있는 것이 파이버

파이버는 리액트 아키텍처 내부에서 비동기로 이뤄짐

실제 브라우저 구조인 DOM에 반영하는 것은 동기적으로 일어나야 함.

메모리상에서 먼저 수행해서 최종적인 결과물만 실제 브라우저 DOM이 작동함.

파이버와 가장 가상 DOM은 동일한 개념이 아님.

✨2-3 클래스 컴포넌트와 함수 컴포넌트

🔻클래스 컴포넌트

16.8 미만으로 작성된 코드에는 클래스 컴포넌트가 대다수.
이런 오래된 코드의 유지보수 내지는 오래전에 개발된 라이브러리 등을 사용할 때
도움을 얻기 위해서는 기본적인 클래스 컴포넌트 구조를 이해해야함.

클래스 컴포넌트의 한계

데이터 흐름을 추적하기 어려움.
애플리케이션 내부 로직의 재사용이 어려움.
기능이 많아질수록 컴포넌트의 크기가 커짐.
클래스는 함수에 비해 상대적으로 어려움.

🔻함수 컴포넌트

16.8에서 함수 컴포넌트에 사용 가능한 훅이 등장하면서 리액트 개발자들 사이에서 주류가 됨.

✨2-4 렌더링은 어떻게 일어나는가?

🔻리엑트 렌더링이란?

🔻리액트의 렌더링이 일어나는 이유

🔻리액트의 렌더링 프로세스

🔻렌더와 커밋

🔻일반적인 렌더링 시나리오 살펴보기

✨2-5 컴포넌트와 함수의 무거운 연산을 기억해 두는 메모이제이션

메모이제이션?
리엑트에서 발생하는 렌더링을 최소한으로 줄이기 위해 제공되는 API 컴포넌트.

최적화 사용에 대해 2가지 주장이 갈림.

🔻주장1: 섣부른 최적하는 독이다, 꼭 필요한 곳에만 메모이제이션을 추가하자

메모이제이션도 어디까지나 비용이 드는 작업으로 필요한 곳을 신중히 골라서 메모이제이션 해야한다는 주장.

🔻주장2: 렌더링 과정의 비용은 비싸다, 모조리 메모이제이션해 버리자

모조리 메모이제이션 해버리자.

집필자의 의견:
석부른 메모이제이션을 지양하는 자세를 유지하면서,
실제 어느 지점에서 성능상 이점을 누릴 수 있는 지 살펴보는 식으로 메모이션을 적용하는 것을 권장.