[React] React란?

React란?

리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.

이는 데이터가 앱에 사용되는 방식과 그 데이터가 변화하는 결과에 따른 UI 변경 방법에 대해 명확한 규칙을 설정하여 수행한다.

 

왜 React를 사용해야 할까?

HTML과 CSS, JavasSript, Jquery 등 다양한 방법으로 웹 페이지 제작은 얼마든지 가능하다. 그렇다면 왜 React를 사용해야 할까? 요즘같은 시대에는 사용자의 응답에 따라 인터페이스가 지속적으로 변해야 하며, 웹 페이지는 각 페이지마다 관리가 되어야 한다. 하지만, 그렇게 하기 위해선 기존 방식으로 관리하기 어려워진 것이다. 결국, 페이스북에서는 이를 해결하기 위해 React를 출시하였고, 동적인 웹페이지를 관리하기 보다 수월해졌다. 

한 마디로 React를 사용하는 이유들을 정리하면, "사용자와의 소통을 UI로 쉽게 구현하고 대규모의 웹페이지를 관리하기 위해 사용한다"라고 말할 수 있다.

 

특징 및 장점

1. Virtual DOM을 사용하여 사용자 경험을 향상하고 개발자의 작업 속도를 높인다.
2. React 컴포넌트의 재사용은 개발 시간을 크게 절약한다.
3. 단방향 데이터 흐름을 통해 안정적인 코드를 제공한다. 단방향 데이터 흐름은 데이터는 항상 일정한 장소에 있고, 그 장소에서만 변경이 가능한 것을 의미한다.
4. 오픈소스이며 페이스북 라이브러리이다.
5. Hooks를 이용해 컴포넌트의 상태를 쉽게 관리할 수 있다.
6. 여러 개발 도구를 지원한다.

 

단점

1. 로딩시간이 길다. 너무 느리다!
2. 웹의 핵심가치를 부정한다. (웹은 기본적으로 모든 것을 스트리밍한다. 하지만 리액트는 Single Page Application(SPA)이기 때문에 처음에 한번 모두 다운로드 한다. 이후에는 다시 리소스를 다운하지 않아도 된다는 장점이 있지만, 그 동안 웹페이지에는 공백을 띄우기 때문에 웹의 핵심가치와 반대된다!)
3. IE8 이하 버전은 지원하지 않는다.
4. 보여지는 부분(View)에만 관여하기때문에, 데이터 모델링, Routing, Ajax 등의 기능을 제공하지 않는다. 예를 들어 라우팅을 위해서는 react-router-dom 라이브러리를 사용한다.
5. View 이외의 기능은 직접 구현하거나 라이브러리를 사용해서 구현해기 때문에, Javascript 배경지식이 필수적이다.
   

 

React 환경 만들기

$ npx create-react-app my-app
$ cd my-app
$ npm start

 

공식 문서

https://ko.reactjs.org/docs/create-a-new-react-app.html

새로운 React 앱 만들기 – React