Ch1. 리액트 시작

1.1 왜 리액트인가?

문제점 -> 애플리케이션 규모가 크면 복잡해지고, 제대로 관리하지 않으면 성능 저하

 

Facebook 개발팀

: 데이터가 변할 때마다 어떤 변화를 줄지 고민하지말고 기존 뷰를 날려버리고 처음부터 새로 렌더링하자!

 그렇게 된다면 애플리케이션 구조가 간단해지고, 작성해야 할 코드양도 많이 줄어든다.

↘

'리액트(React)' : 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 개발한 것

 

1.1.1 리액트 이해

'리액트(React)' : 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용함

  ~> MVC, MVW 구조의 프레임워크와 달리, 오직 View만 신경 쓰는 라이브러리

  ~> 컴포넌트 : 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체

        => 재사용이 가능한 API로 많은 기능들을 내장

        => 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의

 

Q. 리액트 라이브러리는 뷰를 어떻게 *렌더링하길래 데이터가 변할 때마다 새롭게 리렌더링하면서 성능을 아끼고, 최적의 사용자 경험을 제공할 수 있을까?

*렌더링 : 사용자 화면에 뷰를 보여주는 것

A) '초기 렌더링', '리렌더링' 개념을 이해하자!

 

1.1.1.1 초기 렌더링

초기 렌더링을 다루는 리액트의 render 함수

render() {...}

render 함수 : 컴포넌트가 어떻게 생겼는지 정의하는 역할

  ~> html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체 반환

 

1.1.1.2 조화 과정

리액트에서 뷰를 업데이트 할 때 = "조화 과정을 거친다"

 

데이터 update -> 컴포넌트는 업데이트한 값을 수정 + 새로운 데이터를 가지고 render 함수 호출 -> 뷰 생성 -> render 함수의 반환값을 곧바로 DOM에 반영하지 않고, 이전의 컴포넌트 정보와 현재 컴포넌트 정보를 비교 -> 최소한의 연산으로 DOM 트리 업데이트

 

1.2. 리액트의 특징

1.2.1 Virtual DOM

1.2.1.1 DOM이란?

'DOM(Document Object Model)' : 객체로 문서 구조를 표현하는 방법으로 XML, HTML로 작성

  ~> 웹 브라우저는 DOM을 활용해 객체에 자바스크립트와 CSS를 적용

  ~> 트리 형태인 DOM은 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입이 가능

 

1.2.1.2 Virtual DOM

리액트에서 데이터가 변해 웹 브라우저에 실제 DOM을 업데이트할 때

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교
3. 바뀐 부분만 실제 DOM에 적용

 

다시 한 번 짚고 넘어가자!

'리액트는 프레임워크(x) 라이브러리(o)'

 

1.3 작업 환경 설정

Node.js / npm, yarn 설치 -> 코드 에디터 설치 -> Git 설치 -> create-react-app으로 프로젝트 생성

 

짠! 작업 환경은 예전에 설정해뒀던 터라 개발 전용 서버가 쉽게 구동된다.

리액트 공부 준비 완료!

레쭈고