오늘은 프론트엔드 라이브러리인 React에 대해 포스팅하려 한다.

React는 무엇인가?

React(리액트)에 대해서 알아 보기전에, 리액트가 어떤 배경에서 탄생하게 되었는지 먼저 이야기 해 보려고 한다.

이야기를 좀 거슬러 올라가서, 1세대 웹인 HTML과 CSS, 2세대 웹인 JavaScript를 거쳐 3세대 웹이 되었을때, 프론트엔드와 백엔드가 나눠졌다 한다.

이렇게 나눠지게 된 배경에는, 웹페이지를 담당하는 부분과 서버(데이터)를 담당하는 부분이 점점 다뤄야 할 정보가 많아지고, 복잡해졌으며, 보다 전문적인 방향으로 발전이 이뤄졌기 때문이라 생각한다.

html과 css 그리고 vanila javascript를 사용했으면 알겠지만, 요소 하나하나마다 각각의 이벤트를 만들어 처리하거나, 요소를 직접 추가 해야하는 번거로움이 있다.
또한, 페이지가 담고 있는 정보가 많아질수록, 기하급수적으로 늘어나는 html도 효율적인 구조는 아니다.

이런 비효율적인 처리를 해결하기 위해 frame work와 library가 생겼는데, 대표적인 frame work가 바로 Angular, library에는 React.js와 Vue.js가 있다.

frame work와 library의 차이는 주도권이 어디에 있느냐에 있으며,

사용자가 정해진 틀(frame)에서 작업한다면 frmae work,사용자가 직접 책을 꺼내듯 호출해서(library) 사용한다면 library라 한다.

리액트는 다른 둘과 다르게, MVC모델 중에서 오직 V(view)만들 담당한다.
즉, 우리 눈에 보이는 부분만 담당하는것이다.

이때, 하나의 html에 javascript를 이용해서 페이지를 그려내고, 그걸 내부에서 바꿔가며 컨텐츠를 표시하기에, 하나의 html을 사용한다 해서 SPA(Single Page Application)이라 한다.

리액트는 페이스북의 지속적인 관리 덕분에 다양한 자료를 찾을 수 있는 커뮤니티가 활성화 되어 있으며, 지금도 많은 유저가 리액트를 찾고 있다.

React는 무슨 일을 하는가

앞서 리액트는 눈에 보이는 view, 다른 말로 사용자 인터페이스(UI)를 만들기 위한 툴이라 하였다.

리액트등 프레임워크나 라이브러리를 이용하는 이유는 이 UI의 상태가 바뀌었을때, 자동으로 업데이트를 하는 점일 것이다.

리액트는 Virtual DOM을 이용해서 UI를 빠르게 업데이트 하는데, 이전 상태의 UI를 기억하고, 비교해서 바뀐 부분만 업데이트 한다는 특징이 있다.
때문에 꼭 필요한 곳만 효율적으로 업데이트 하는것이 가능한것이다.

어떻게 React를 사용하는가?

리액트를 사용하려면 우선 Node.js를 설치해야 한다.
Node.js는 원래 브라우저 기반으로 작동하는 자바스크립트를 웹이 아닌 터미널 등에서도 작동하게 만드는 런타임 환경으로서, 리액트등 프론트엔드 라이브러리, 프레임워크는 이 Node.js를 기반으로 만들어져 있다.

이때 함께 설치 되는것이 NPM(Node Package Manager)이다.

우리는 앞으로 이 NPM을 사용해서 다양한 패키지를 설치, 사용할것이기에, 사용법을 익혀 놓는것이 좋을 것이다.

CRA는 무엇인가?

CRA는 create-react-app의 약자로서, 리액트를 설치해서 여러가지 초기세팅을 하기 위한 패키지를 이야기한다.

Node.js와 NPM이 설치 된 상태에서 터미널을 열고 원하는 디렉터리로 이동한 다음,

npm install create-react-app name

을 입력하고 엔터를 누르면 자동으로 설치가 시작된다.

설치를 하고 나면, 여러가지 파일들과 함께

위와 같은 화면이 나타나게 된다.

이후의 기초세팅은 다음 포스팅에서 알아보도록 하자.