[React] Ch 01. 리액트 기본 배우기

* 이 글은 강의를 들으며 개인적으로 정리하고 기록하기 위한 글입니다.

* 강의명 ) 프론트엔드 개발 초격차 패키지 Online

 

리액트란 무엇인가요?

• React는 사용자 인터페이스를 만들기 위한 JS 라이브러리
• 인터렉션이 많은 웹 앱을 만들기 위해서 주로 사용됨

---

프레임워크와 라이브러리의 차이

• 프레임워크: 어떠한 앱을 만들기 위해 필요한 대부분의 것을 갖고 있는 것
• 라이브러리: 어떠한 특정 기능을 모듈화 해놓은 것

• 프레임워크는 라이브러리를 포함하고 내가 작성한 소스 코드를 호출함. 소스 코드는 어떠한 기능을 구현하기 위해 라이브러리를 호출하게 됨

---

리액트는 프레임워크가 아닌 라이브러리

• 리액트는 전적으로 UI를 렌더링하는 데 관여
• 화면을 바꾸는 라우팅은 react-router-dom모듈을 사용
• 상태관리를 위해서는 redux, mobx 등 여러 모듈 사용
• 빌드를 위해서는 webpack, npm 등
• 테스팅을 위해서 Eslint, Mocha 등을 이용

---

리액트 컴포넌트란?

• 리액트로 만들어진 앱을 이루는 최소한의 단위
• 클래스형 컴포넌트 & 함수형 컴포넌트

---

Node.js란?

• 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임으로서, 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산할 수 있음

---

React 설치 시 Node.js가 필요한 이유

• 리액트 앱은 웹 브라우저에서 실행되는 코드에서 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 주요 도구들이 Node.js를 사용하기 때문
• 이때 사용하는 개발 도구는 바벨, 모듈화된 코드를 한 파일로 합치고 코드를 수정할 때마다 웹 브라우저를 리로딩하는 등 여러 기능을 지닌 웹팩 등이 있음

---

화면에 보여지는 과정

• 이때 문제점은 어떤 인터랙션에 의해 DOM에 변화가 발생하면 매번 Render Tree가 재생성됨. 즉 모든 요소들의 스타일을 다시 계산하고 Layout, Repaint 과정까지 다시 거치게 됨
• 인터랙션이 적은 웹이면 괜찮지만 만약 인터랙션이 엄청 많아지면, 작은 변화로 인해 위에 과정을 거치게 되므로 불필요하게 DOM를 조작하는 비용이 커짐
• 이러한 문제로 인해 나온 것이 가상 돔(Virtual DOM). 실제 DOM을 메모리에 복사해준 것이라 생각하면 됨

• 데이터가 바뀌면 가상돔에 렌더링되고 이전에 생긴 가상돔과 비교해 바뀐 부분만 실제 좀에 적용시킴. 바뀐 부분을 찾는 과정을 Diffing이라고 부르며, 바뀐 부분만 실제 돔에 적용시켜주는 것을 재조정(reconciliation)이라고 부름.