React | Introduction

React

React – A JavaScript library for building user interfaces

 React는 페이스북에서 개발한 UI(User Interface)를 위한 자바스크립트 라이브러리로 자바스크립트의 확장 문법인 JSX를 사용한다.

 

 React의 가장 큰 장점은 DOM을 복사해서 Virtual DOM을 만들어 변화가 있을 경우 페이지 전체를 렌더링 하지 않고 변화한 부분만 실제 DOM에 적용하는 방식을 사용하여 개발자로 하여금 재사용 가능한 UI를 생성할 수 있게 해준다. 따라서 싱글페이지나 모바일 애플리게이션의 개발 토대로 많이 사용된다.

* DOM(Document Object Model) : 객체 지향 모델로써 웹 페이지 내의 모든 요소에 접근할 수 있는 표준 API 모델

 

 또한, 컴포넌트(Component)를 기반으로 HTML 코드를 철저히 캡슐화시켜 관리하므로 가독성이 매우 높고 쉬운 유지보수를 가능하게 해준다.

 

 그리고 프레임워크가 아닌 라이브리러리이기 때문에 다른 프레임워크들과 사용이 가능하다. 리액트에서는 UI만 신경쓰고 빠진 부분은 개발자의 입맛에 따라 좋아하는 라이브러리를 사용하여 개발이 가능하다.

 

Virtual DOM

 Virtual DOM을 사용하면, 실제 DOM에 접근하여 조작하는 대신에 이를 추상화 시킨 자바스크립트 객체를 구성하여 사용한다. React에서는 데이터가 변하면 다음과 같은 실행과정을 거친다.

 

1. 데이터가 업데이트 되면 전체 UI를 Virtual DOM에 다시 렌더링(rendering)한다.

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

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

 

 따라서 컴포넌트(Component)가 업데이트 될 때, 레이아웃 계산이 한번만 이루어진다. 이는 최소한의 DOM 조작을 통하여 큰 규모의 웹 어플리케이션에서 페이지 로딩시간을 크게 줄여주는 효과를 가져다준다.

 

개발환경 구축

 React 개발환경을 구축하기 위해서는 먼저 Node.js의 NPM이 필요하다. NPM을 이용하여 개발환경 구축을 위한 모듈을 설치하자.

Node.js | Module & Node Package Manager(NPM) / PM2

$ npm install -g create-react-app

 

 'create-react-app'을 전역에서 사용할 수 있도록 npm을 통해 설치한 후 create-react-app을 실행하자. 

 

$ create-react-app <project_name>

 

 현재 지정된 디렉토리에 프로젝트 폴더가 생성되면서 개발환경이 구축된 파일들이 자동으로 생성된다. 만약 현재 디렉토리를 프로젝트 폴더로 사용하고 싶다면 프로젝트 이름에 '.'을 넣어주면 된다.

 

프로젝트 폴더에 생성된 파일

 

· public / index.html : Root로 접속하면 보이는 페이지. 여기의 'root' div에 실제 클라이언트에게 보여질 DOM이 들어간다.

 

· src / index.js : 컴포넌트 App을 index.html의 'root'에 출력되도록 한다.

ReactDOM.render(<App />, document.getElementById('root'));

 

· src / App.js : 실제 클라이언트에게 보여질 DOM을 작성하는 파일이다.

 

 이제 프로젝트 폴더로 현재 디렉토리를 변경한 후, npm을 이용하여 서버를 동작시켜보도록 하자. 포트번호는 자동으로 3000번이 배정된다.

 

$ cd <project_name>
$ npm start

 

http://localhost:3000 접속 결과

 

 'http://localhost:3000'으로 접속하면 위와 같은 기본으로 구축된 리액트 환경의 페이지가 나타난다. 위의 페이지가 정상적으로 나타난다면 React.js의 개발환경 구축이 완료된 것이다.