[react] 1. 리액트 시작

리액트 이해

React란?

• 자바스크립트 라이브러리
• 오직 View단만 신경쓴다.
• 컴포넌트 단위로 이루어져 있다. 
  • 컴포넌트란, 재상용이 가능한 API로, 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다.
  • 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수도 있다.
  • 컴포넌트들의 조합으로 View가 된다.
  • 클래스 개념과 거의 동일하다.(90% 동일)

 

렌더링

• 사용자 화면에 뷰를 보여주는 것을 렌더링 이라고 한다.
  • 초기 렌더링 : 맨 처음 어떻게 보일지를 정하는 초기 렌더일. 
  • 리액트에서는 render() { ... } 함수가 초기 렌더링을 다룬다.  이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다. (뷰가 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다.)

 

 

조화 과정

• 리액트에서 뷰를 업데이트 할 때는 "조화 과정을 거친다"라고 표현한다.
• render함수가 조화과정을 맡아서 한다.
• 컴포넌트는 데이터를 업데이트 했을 때 단순히 업데이트한 값을 수정하기만 하는 것이 아니라, 새로운 데이터를 가지고 render함수를 또다시 호출하여 수정한 데이터를 지닌 뷰를 생성한다.
• render함수가 반환하는 view결과는 곧바로 DOM에 반영되는 것이 아니라, 이전에 render함수가 만들었던 컴포넌트 정보와 현재 render함수가 만든 컴포넌트 정보를 비교하여 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트한다. 

 

---

리액트의 특징 & 작업 환경 설정

virtual DOM

• 쉽게 말해 DOM을 copy 한 것이다.
• 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 JS 객체를 구성하여 사용한다.
  • 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
  • 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다
  • 바뀐 부분만 실제 DOM에 적용한다.

 

 

 

작업 환경 설정

1. Node.js & npm/yarn 설치하기
2. vscode 설치하기
3. git 설치하기

 

• Node.js : 크롬 V8 자바 스크립트 엔진으로 빌드한 자바스크립트 런타임
  • 웹 브라우저 환경이 아닌 곳(모바일, 데스크톱 app ...)에서도 자바스크립트를 사용하여 연산할 수 있게 해준다.
  • 프로젝트를 개발하는 데 필요한 주요 도구들이 Node.js를 사용하기 때문에 설치하면 좋다.
    ex)
    - ECMAScript를 호환시켜주는 babel
    - 모듈화된 코드를 한 파일로 합치고(번들링) & 코드를 수정할 때마라 웹을 리로딩하는 기능을 가진 webpack

• npm : Node.js 패키지 매니저 도구. 수많은 패키지를 설치하고 설치한 패키지의 버전을 관리하는 데 도움을 줌.

 

 

리액트 프로젝트 생성하기

• create-react-app은 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 간편하게 프로젝트 작업 환경을 구축해주는 도구이다.

 

$ npm init react-app [프로젝트 이름]
$ cd [프로젝트 이름]
$ npm start

웹 브라우저에 리액트 페이지가 띄워진다면 성공!