React - React의 탄생

 

 

React의 탄생

React가 생기기 전에 순수 자바스크립트를 통해 브라우저를 관리해왔다.

하지만, 순수 자바스크립트만으로는 대규모의 웹 프로젝트를 관리하기가 어렵고, 성능도 많이 떨어졌다.

이러한 문제들을 해결하기 위해 시간이 지나고 수많은 라이브러리(ex. React)와 프레임워크(ex. Angular, Vue.js)들이 나오기 시작했다.

그중 우리가 공부할 리액트는 페이스북 개발 팀에서 개발한 것이며, 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 만들어졌다고 한다.

 

React와 다른 프레임워크의 차이

먼저, React와는 달리 Angular, Vue.js와 같은 프레임워크는 보통 MVC, MVW 아키텍처로 애플리케이션을 구조화한다.

 

이러한 구조들의 공통점은 모델(Model)과 뷰(View)가 있다는 것이다.

여기서 MVC 란?

데이터(Model)를 연결과 사용자가 보이는 화면(View)을 연결시켜주는 컨트롤러를 뜻한다.

작동 원리

MVC는 어떤 사용사자 어떤 작업(버튼 클릭, 텍스트 입력)을 받으면 컨트롤러는 모델 데이터를 조화하거나 수정하고, 변경된 사항을 뷰에 반영하는 방식이다.

하지만, 이러한 방식으로 개발한다면, 애플리케이션의 규모가 커지면서 유지 보수가 어려워져 특정 요소를 찾아 변경하는 것이 어려워 유지 보수가 어렵고, 성능이 떨어질 수 있다.

반면에, React는 오로지 View만 신경쓰는 라이브러리이다.

다른 웹 프레임워크는 Ajax, 데이터 모델링, 라우팅 등과 같은 기능을 내장하고 있는 반면, 리액트는 오로지 뷰만 담당하기 때문에 기타 기능은 따로 직접 구현해서 사용해야 한다.

ex) npm install react-router-dom --save -> 라우팅 기능

ex) npm install -g sass -> scss 기능

이렇게 쓰고 싶은 라이브러리를 취향대로 설치해서 사용이 가능하다.

 

React의 이해

- 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용하며, 오로지 View만 신경 쓰는 라이브러리이다.

- 리액트에서는 특정 부분을 어떻게 생길지 정하는 기능이 있는데, 이를 컴포넌트(Component)라고 한다.

- 컴포넌트로 화면에 그려질 UI와 작동 방식을 정의할 수 있다.

- 사용자 화면에 뷰가 그려질 때, 쓰이는 것을 렌더링이라 한다. 

 

React를 쓰는 이유?

- 어떤 데이터가 변할 때마다 어떻게 변화를 줄지 신경 쓸 필요가 없고, 그저 뷰가 어떻게 생길지 선언하며, 데이터 변화가 있으면 기존 뷰를 날려 버리고 처음부터 새로 렌더링 하는 방식이다.

- 이러한 방식의 장점은 최대한 성능을 아끼고 편안한 UX를 제공하면서 구현할 수 있다.

- 애플리케이션 구조가 매우 간단하고, 코드 양도 줄어든다.

 

React 특징

virtual DOM이란?

- 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. ex) DOM의 복사본

 

리액트에서 데이터가 변하면서, 웹 브라우저에서 실제 DOM을 업데이트할 때의 세 가지 절차

1. 데이터를 업데이트하면 전체 UI를 Vitual DOM에 리 렌더링(복사)

2. 이전 Vitual DOM에 있던 내용과 현재 내용을 비교

3. 바뀐 부분만 실제 DOM에 적용

 

React의 필요성

- 리액트는 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축

- 리액트와 Virtual DOM을 통해 바로 업데이트 처리

- UI를 업데이트하는 과정에서 생기는 복작함을 모두 해소하고, 더욱 쉽게 업데이트에 접근할 수 있음

 

React 작업 환경 설정

1. VScode에서 node -v, npm -v로 Node.js와 npm이 설치됐는지 확인하기

node : 자바스크립트가 브라우저 밖에서도 쓸 수 있는 환경을 제공한다.
npm : node package manger -> 노드에 필요한 기능들을 관리해주는 것을 말한다.

VScode 말고 다른 에디터로 사용해도 상관없음!

 

2.  CRA(create-react-app) 

CRA란?

- 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 과정을 생략하고 바로 프로젝트 작업 환경을 구축해 주는 도구(tool)

- 리액트에서 CRA 때문에 편리하게 개발하기 위한 세팅이 잘 되어있다. ex) 자동 리프레쉬

설치 명령어

: npx create-react-app react-project

프로젝트 생성이 완료되면 프로젝트 디렉터리로 이동한 뒤 리액트 개발 전용 서버를 구동한다.

"http://localhost:3000"같은 주소가 생긴다.