[리액트를 다루는 기술] 1장 리액트 시작

안녕하세요 리액트 공부를 본격적으로 해보고자
도서를 검색하던 도중 react 강의로 유명하신 veloper 님의 저서 [리액트를 다루는 기술] 을 구매하게되었습니다.

오늘부터 시작해서 차근차근히 책의 내용을 정리하고자 합니다. 화이팅

---

 

1. 시작

1.1 리액트 이해
리액트는 MVC, MVW 등인 프레임워크와 달리 오직 V (view) 를 중요시하는 라이브러리.

* 컴포넌트 : 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체 ( 다른 프레임워크의 컴포넌트와 다른 의미)
- 재사용 가능한 API로 수많은 기능들 내장
- 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식 정의
* 렌더링 : 사용자 화면에 뷰를 보여주는 것

? 리액트 라이브러리는 어떻게 렌더링하길래 데이터 변경시마다 새롭게 리렌더링하며 “성능을 아끼고” 최적의 사용자 경험을 제공할까

1.1.1 초기 렌더링

render() { ... } : 컴포넌트의 생김새를 정의
[프로세스]
- html 형식의 문자열 반환 x >> 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체 반환
- 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있다 >> render 함수 실행시 내부 컴포넌트들도 재귀적으로 렌더링
- 렌더링 작업 후 지니고 있는 정보들로 HTML 마크업을 만들고 실제 페이지의 DOM 요소안에 주입

1.1.2 조화 과정
: 뷰를 업데이트할때 업데이트과정 x >> 조화과정(reconciliation) Yes!
보기에는 변화에 따라 뷰가 변형되는 것처럼 보이나, 사실은 “새로운 요소”로 갈아끼운다.

이 작업 또한 render 함수가 맡아서 한다.
- 컴포넌트는 데이터를 업데이트했을 때 “새로운 데이터를 가지고 render 함수를 또 다시 호출” 한다.
- render 함수 반환 결과를 곧바로 DOM 반영 x >> old 컴포넌트 정보와 new 컴포넌트 정보 비교
- javascript 최소한의 연산으로 비교 후 DOM 트리 업데이트

2 리액트의 특징

2.1 Virtual DOM
*DOM : 객체로 문서구조를 트리형태로 표현하는 방법. 특정 노드를 찾거나 수정,제거,삽입 가능
느린가? ) 동적 UI에 최적화되어 있지 않다. 규모가 큰 웹 앱에서 직접 접근해 변화를 주면 성능 이슈 발생
DOM 자체는 빠르나 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고 레이아웃을 구성, 페이지를 리페인트 하는 과정으로 느려진다.
해결법) DOM 업데이트를 추상화하여 처리 횟수를 최소화하고 효율적으로 진행

[절차]
1. 데이터 업데이트 시 전체 UI를 Virtual DOM에 리렌더링 한다
2. 이전 Virtual DOM에 있던 내용과 현재 내용 비교
3. 바뀐 부분만 실제 DOM에 적용

“지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기” : 리액트의 목표

2.2 기타특징
- “라이브러리” 이기 때문에 기타 기능 ( ajax, 데이터모델링, 라우팅 등) 은 직접 구현
>> 라우팅(리액트라우터), ajax(axios,fetch), 상태관리(리덕스,MobX)
- 다른 웹 프레임워크나 라이브러리와 혼용 가능
>> Backbone.js, AngularJS,Meteor....

3. 작업 환경 설정

 

1) Node.js - npm
ㄴ 리액트를 웹 브라우저에서 실행하는 코드여서 직접연관은 없지만 프로젝트 개발하는데 필요한 주요 도구들이 Node.js를 사용하여 설치한다.
바벨(ES6 호환), 웹팩(번들링-모듈화된 코드를 한 파일로 합침, 코드 수정시마다 웹 브라우저 리로딩)
ㄴ npm : 패키지 매니저 도구 - 수많은 개발자가 많든 패키지(재사용가능 코드) 설치 및 버전 관리
ㄴ yarn : 패키지 관리자 도구 - npm보다 더 빠르며 효율적인 캐시 시스템과 기타 부가 기능 제공

2) Visual Studio Code
ㄴ ESLint : 자바스크립트 문법 및 코드 스타일 검사도구
ㄴ Reactjs Code Snippets : 리액트 컴포넌트 및 라이프사이클 함수 작성시 “단축단어” 로 간편하게 자동 생성하는 코드 스니펫 모음
ㄴ Prettier-Code formatter : 코드 스타일을 자동으로 정리해주는 도구
3. Git
4. create-react-app 프로젝트 생성
: 프로젝트 생성 시 웹팩,바벨의 설치 및 설정 과정을 생략하고 간편하게 프로젝트 작업환경 구축해주는 도구