리액트 개요

1. 프론트엔드 기술의 변천

1세대

HTML, CSS, Javascript, DOM, Event

 

2세대

jQuery - 자바스크립트를 간단하게 작성하기 위해 등장

BUT 웹이 복잡해지면서 한계에 도달(DOM을 조작하는 단계에서 멈춤)

 

3세대

프레임워크 : Angular, Vue

라이브러리 : React

 

2. 프레임워크 VS 라이브러리

프레임워크

작업을 하기 쉽게 누군가 만들어 놓은 틀

(ex. 냄비, 국자, 라면이 구비된 부엌)

사용하기 편리하지만, 프레임워크에서 제공하지 않는 도구를 사용하기 어려움.

프레임워크에서 제공하는 도구 사용법을 익혀야 하기 때문에 러닝커브가 높은 편.

 

라이브러리

작업을 하기 쉽게 누군가 만들어 놓은 하나의 도구

(ex. 냄비)

필요한 도구를 알아서 조합해야 하므로 시간이 더 들지만 원하는 조합으로 사용 가능.

 

3. 리액트란?

2013년 페이스북에서 개발한 라이브러리.

대규모 애플리케이션 구축에 적합.

 

특징

사용자 수가 가장 많음 => 활성화 된 생태계.

컴포넌트 정의가 간단한 편.

React Native를 사용하면 웹이 아닌 플랫폼에서도 사용 가능.

Angular, Vue와 달리 자바스크립트 문법 그대로 사용 => 러닝커브 낮음

Angular, Vue와 달리 View만 담당 => 내장된 기능이 부족하므로 보통 다른 라이브러리와 함께 사용

선언적인 개발이 가능함(UI를 자동으로 업데이트 해 줌).

UI를 자동으로 업데이트하며 VirtualDOM을 통해 최적화 구현.

 

절차적 개발 VS 선언적 개발

방 청소를 예시로 들면, 

절차적 개발은 어떻게(How) 목적을 이룰 것인지, 절차에 신경을 써야 한다.

1. 창문을 연다

2. 청소기를 돌린다.

3. 걸레질을 한다.

 

선언적 개발 이룰 목적(What)이 무엇인지에만 신경을 쓰면 된다.

1. 깨끗한 방을 그린다.

2. 로봇에게 그림을 전달한다.

사용자는 How가 아니라 What에만 신경을 쓰면 된다.

 

VirtualDOM

건물을 리모델링하는 예시를 들어보자.

리모델링을 위해 벽돌, 톱, 페인트가 필요하다.

 

VirtualDOM을 사용하지 않는 경우,

벽돌을 창고에서 가져온다.

톱을 창고에서 가져온다.

페인트를 창고에서 가져온다.

창고에 여러 번 왔다갔다 해야 한다.

 

VirtualDOM을 사용하는 경우,

벽돌, 톱, 페인트를 동시에 창고에서 가져올 수 있다.

 

브라우저는 우리가 DOM을 조작할 때마다 레이아웃을 변경하고, 색을 칠하는 과정을 반복한다.

VirtualDOM을 사용하면, 필요한 변경사항을 가상의 DOM에 적용했다가 실제 DOM에 한 번에 반영한다.

 

4. Node

Node

자바스크립트 실행환경 중 하나. (대표적인 자바스크립트 실행환경은 브라우저)

브라우저 바깥에서도 자바스크립트를 실행할 수 있게 해준다.

 

NPM(Node Package Manager)

패키지 : 실행할 수 있는 하나 하나의 프로그램 

NPM : Node에서 사용할 수 있는 여러 프로그램을 관리하는 프로그램.

 

CRA(Create-React-App)

리액트 개발환경을 구축해주는 도구(toolchain)

 

 

출처

위코드 [React] 학습자료