1. Why React?

1-1. Web Application의 발전

브라우저를 열고 사이트에 들어가면 보여지는 것 (UI: User Interface) 과 할 수 있는 것 (UX: User Experience) 이 굉장히 많다. 이러한 이유로 요새는 웹 페이지(Web Page)라는 단어보다 웹 애플리케이션이(Web Application)라는 단어가 많이 사용되기도 한다.

이처럼 애플리케이션의 규모가 커지고 다양한 UI, UX를 구현하기 위해서는 이전의 방법(DOM, jQuery)으로는 애플리케이션을 개발하고 코드를 유지보수 하는 것이 어려워졌다. 화면의 그 많은 DOM 요소들에 직접 접근해서 조작하고 관리하기란 쉽지 않다. jQuery도 결국엔 쉽게 DOM에 접근해서 조작을 가능하게 하는 메소드의 모음이기 때문에 마찬가지이다.

규모가 커지고 복잡한 애플리케이션을 개발하며 생산성을 향상시키고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 Frontend Framework(Library)가 등장하게 된다. 그 중 가장 많이 쓰이는 세 가지가 Angular, Vue, React 이다.

1-2. Frontend Framework(Library)

:: React

“지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하는 것” 을 목표로 2013년 Facebook에서 개발한 Library. MVC(Model-View-Controller) Architecture (ex. Angular, Vue)와는 다르게 리액트는 오직 View만 신경쓰는 라이브러리이다. 라이브러리 특성상 내장되어 있는 기능이 부족해 third-party 라이브러리(ex. React-router, Redux)를 함께 사용한다. 페이스북의 지속적인 관리와 함께 생태계가 활성화 되어 있으며 다양한 자료, 그리고 React Native의 사용으로 인해 사용자가 꾸준히 증가한다.

참고) Library vs. Framework

2. What is React?

2-1. React 정의

React는 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리다. 리액트와 같은 프론트엔드 라이브러리 혹은 프레임워크를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트해 준다는 점이다. 리액트는 가상 돔(Virtual Dom) 을 통해 UI를 빠르게 업데이트한다. 가상 돔은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이다. 이 기술 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아진다.

예시 : 페이스북의 좋아요 수를 업데이트 해야 할 경우,

{"title":"Hello",
"contents" : "Hello World",
"author" : "bonnie",
"likes" : 1}

<div id="post-1">
  <div class="title">Hello</div>
  <div class="contents">Hello World</div>
  <div class="author">bonnie</div>
  <div class="likes">1</div>
</div>

위와 같이 JSON 객체값을 사용하는 뷰가 있다고 가정하고 likes값을 2로 업데이트한다면 post-1의 내부의 likes요소를 찾아 내부를 수정해야 한다. 방법은 어렵지않지만 프로젝트 규모가 커지면 상당히 복잡해지고 제대로 관리하지 않으면 성능도 떨어질 수 있다.
이를 해결하기 위해 페이스북은 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아닌 기존의 뷰를 날려버리고 처음부터 다시 랜더링 하는 방식을 고안하였다.
페이스북 개발팀은 위의 방식으로 최대한 성능을 아끼고 편안한 UX를 제공하면서 구현하고자 개발한 것이 리액트(React)이다.

A JavaScript library for building user interfaces
React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time.

참고) Why did we build React?

3. 작업 환경 설정

3-1. Node.js & npm

:: Node.js

Node.js 는 자바스크립트가 브라우저 밖(ex. 서버)에서도 동작하게 하는 환경을 의미한다. 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들(ex. 바벨, 웹팩)이 Node.js 기반이기 때문에 반드시 설치해야 한다. Node.js를 설치하면 npm(node package manager) 이 자동으로 설치 되는데 npm을 사용하기 위해서는 노드(Node.js)가 설치되어 있어야 한다. 터미널에서 아래의 명령어를 실행 함으로써 Node.js 의 버전을 확인할 수 있다. 노드 버전이 정상적으로 확인되면 설치도 정상적으로 이루어진 것이다.

$ node -v

:: npm

Node 기반의 패키지를 사용하려면 npm(node package manager)이라는 패키지 도구가 필요하다. npm 을 통해 다양한 패키지를 설치하고 버전을 관리할 수 있다. 마찬가지로 npm 버전을 확인하는 명령어를 통해 설치가 정상적으로 이루어졌는지 확인해볼 수 있다.

$ npm -v

Node.js 설치 후엔 위의 사진과 같이 터미널에 node -v, npm -v 명령어를 입력하여 버전을 체크하고 올바르게 설치 되었는지 확인한다.

3-2. CRA(Create-React-App)

: 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구(toolchain)

리액트는 UI 기능만 제공한다. 따라서 개발자가 직접 구축해야하는 것들이 많다. 전반적인 스스템을 직접 구축할 수 있으니 원하는 환경에 맞게 최적화할 수 있지만, 반대로 신경쓸 것이 많기 때문에 처음 시작하는 단계에서는 직접 개발 환경을 구축하기 어려울 수 있다.

리액트 팀에서는 이러한 문제를 해결하기 위해 CRA(Create-React-App)을 만들었다. CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공한다. CRA를 이용하면 하나의 명령어로 리액트 개발환경을 구축할 수 있다.

If you’re learning React or creating a new single-page app, use Create React App.
참고) Create a New React App

CRA에는 바벨과 웹팩과 같이 리액트 애플리케이션 실행에 필요한 다양한 패키지가 포함되어 있으며, 테스트 시스템, ES6+ 문법, CSS 후처리 등 거의 필수라고 할 수 있는 개발 환경도 구축해 준다. 이러한 개발 환경을 직접 구축할 경우 시간이 오래 걸릴 뿐 아니라 유지 보수도 해야한다. CRA를 이용하면 개발 환경 세팅을 해주기 때문에 기존 기능을 개선하거나 새로운 기능을 추가했을 때 패키지 버전만 올리면 된다.

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.

Create React App doesn’t handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses Babel and webpack, but you don’t need to know anything about them.

참고) JavaScript build Toolchain

:: A JavaScript build toolchain typically consists of:

1. A package manager, such as Yarn or npm. It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
2. A bundler, such as webpack or Parcel. It lets you write modular code and bundle it together into small packages to optimize load time.
3. A compiler such as Babel. It lets you write modern JavaScript code that still works in older browsers.

:: If you prefer to set up your own JavaScript toolchain from scratch, don’t forget to ensure your custom toolchain is correctly set up for production.