React - 1장 : React 이해

앞으로 포스팅할 React 빠르게 복습하기 내용은 React를 익힌지 오래되었거나, 공부를 한 두번 해봤는데 맥락을 이해하기 어렵거나, 이해는 했는데 자주 잊어버리는 경우 훑어보면서 빠르게 복습할 수 있도록 간결화하여 포스팅합니다.

 

1-1. 리액트를 왜 쓰는가

1) React Library

React 라이브러리의 로고

- 많은 프레임워크들이 순수한 자바스크립트만으로 다양한 어플리케이션을 편하게 관리하려고 노력해왔다.

- React.js, Vue.js, Angular.js, Backbone.js, Ember.js 등등

다양한 라이브러리와 프레임워크

 - 이들은 주로 MVC(Model-View-Controller)패턴, MVVM(Model-View-View Model)패턴을 사용한다. 

 - Model : 어플리케이션에서 사용하는 데이터/구조를 관리하는 영역

 - View : 사용자에게 보여지는 영역

 - Controller : 비즈니스로직 영역, 사용자에게서 어떠한 입력/명령을 받으면 Model data를 수정하고 조회한다. 이는 View에 반영된다.

MVC Pattern

 - 페이스북 개발팀은, Model의 변화에 따라 View의 변화를 어떻게 줄지 고민하는 대신에 기존 View를 날려버리고 처음부터 새로 렌더링하는 방식을 고안해냈다. 이러한 방식을 통해 최대한 성능을 아끼고 UX향상을 구현하고자 개발한 것이 React이다.

 

2) Component

 - 리액트는 View만 신경 쓰는 라이브러리이다.

 - 리액트에서 특정 부분이 어떻게 생길지 정하는 선언체를 Component라고 한다.

 - Component는 재사용이 가능한 API로 많은 기능을 내장하여 생김새와 작동 방식을 정의한다.

3) 업데이트과정 (Reconciliation)

 - 리액트에서 View를 업데이트하는 것은 "조화 과정을 거친다" 라고 표현할 수 있다.

 - 컴포넌트에서 데이터 변화가 있을 때 변화에 따라 View가 변형되는 것처럼 보이지만, 사실은 새로운 요소로 갈아끼운다.

 - 이 작업은 React의 render() 함수가 맡아서 한다. (render함수는 View의 형상과 작동정보를 지닌 객체를 반환한다.)

 - Component는 데이터를 업데이트했을 때 업데이트 값 수정 뿐만 아니라 새로운 data를 가지고 render함수를 호출해서 render함수는 data를 가진 View를 생성해내게 된다.

 - 이 때, 결과를 곧바로 DOM에 반영하지 않고, 이전의 render함수가 만든 Component정보와 비교하여 둘의 차이를 알아내서 최소한의 연산으로 DOM을 업데이트하게 된다.

React DOM Tree

1-2. React의 특징

1) Virtual DOM

 - React는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행한다.

 - 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 JS객체를 구조화하여 사용한다.

 - 리액트에서 데이터가 변화하면 아래의 과정을 거친다.

   " 전체UI를 V-DOM에 리렌더링 -> 이전 V-DOM과 현재내용 비교 -> 바뀐 부분만 실제DOM에 적용 "

 -  Virtual DOM을 사용한다고 모두 빠른 것은 아니다. 지속적으로 데이터가 변화하는 대규모 어플리케이션에 특화되어있다.

 

2) 작업환경 설정 프로세스

 - Node.js 설치

 - IDE 설치

 - git 설치

 - 터미널 오픈하여 작업할 폴더를 열고 cra(create-react-app 라이브러리) 사용 : 자동으로 react프로젝트를 초기세팅해준다.

   : npx create-react-app project명

 -  or yarn사용자의 경우

   : yarn create react-app project명

 - 로컬에서 테스트할 페이지 열기 : 터미널에서 React project 폴더를 열고 npm start 혹은 yarn start

 - http://localhost:xxxx/ (xxxx : 포트번호) 로 브라우저를 통해 로컬포트에 테스트페이지를 빌드해준다.