React 프로젝트 생성하기

 

React 프로젝트 생성하기

 

React 프로젝트을 생성하고 실행하는 방법에 대해 정리한 내용입니다.

 

 

1. React

---

React – A JavaScript library for building user interfaces

React는 UI를 구축을 위해 Facebook에서 만든 효율적이고 유연한 JavaScript 라이브러리입니다. 다음과 같은 특징을 가지고 있습니다.

 

• Component 단위의 코드 조각들을 이용한 UI 구성
• 함수형, 클래스형 component
• 단방향(uni-directional) 데이터 바인딩 및 props를 이용한 속성 전달
• JSX (Javascript + HTML)
• Virtual DOM
• Lifecycle 메서드
• React Hooks를 이용한 state와 lifecycle 관리 (함수형 component)

또한 React가 만들어진 배경은 다음 글에 자세하게 정리되어 있습니다.

누구든지 하는 리액트 1편: 리액트는 무엇인가 | VELOPERT.LOG

React의 여러 특징들 중에서 중요한 개념인 Virtual DOM에 대해서 좀 더 알아보겠습니다.

 

 

1.1. Virtual DOM

 

기존의 웹 애플리케이션들은 규모가 커지면 처리할 이벤트도 많아지고 관리할 상태와 DOM도 다양해지면서 복잡도가 높아지고 유지 보수가 어려워지는 상황이 발생했습니다. 이러한 문제들을 해결하고자 Angular, Backbone, Ember 등의 다양한 프레임워크가 만들어졌습니다. 이 프레임워크들은 데이터와 특정 DOM을 바인딩해주고 데이터에 변화가 일어났을 때 업데이트를 간소화하는 방식으로 문제를 해결해주었습니다.

 

위에서 언급한 프레임워크들은 MVC, MVVM, MVW 등의 패턴들로 이루어져있는데, 양방향 바인딩을 통해 Model의 값이 변경되면 View에 바인딩된 데이터도 변경해주는 방식으로 동작합니다. 즉 View는 유지한 상태로 변경된 데이터만 바꿔주는 방식입니다.

 

React는 이렇게 데이터의 변화가 발생하는 경우에 대해 View를 새로 만들자는 아이디어로 접근하였고 그에 따라 Virtual DOM이라는 것을 사용하게 되었습니다.

Virtual DOM

 

Virtual DOM은 in-memory에 가상으로 존재하는 JavaScript 객체입니다. 리액트에서는 상태가 변경되면 Virtual DOM이 업데이트가 필요한 UI를 가상으로 렌더링하고, 실제 DOM과 비교하여 업데이트가 필요한 부분을 찾은 뒤에 실제 DOM에 Patch 해줍니다.

 

기존의 프론트엔드 라이브러리를 사용하는 경우엔 데이터와 DOM 조작에 대한 자유도가 높아서 일관된 코드 패턴을 작성하기가 어려웠습니다. 리액트 Virtual DOM을 사용하면 데이터 흐름이 강제되고 좀 더 일관성 있는 코드 작성이 가능하며 데이터 변화에 따른 View에서의 변화 감지도 쉽게 확인이 가능해집니다.

 

 

2. React 프로젝트 생성 및 실행하기

---

React 프로젝트 생성에 앞서 Node.js와 yarn 또는 npm을 미리 설치해주어야 합니다. 리액트에는 yarn을 쓰는 것이 더 좋다고 하지만 npm과 비교하여 뚜렷한 차이는 없는 것으로 보여졌습니다. 따라서 취향에 맞는 것으로 사용해주시면 됩니다. 저는 제게 익숙한 npm으로 진행하였습니다.

 

2.1. 프로젝트 생성

 

다음과 같이 생성할 프로젝트 이름과 함께 아래 명령어를 실행해줍니다. npx는 npm 5.2.0 이상의 버전에서 제공하는 CLI 도구입니다. 일회성 명령 실행으로 패키지를 설치 후 제거하는 특징을 갖고 있습니다.

$ npx create-react-app my-app

npx create-react-app my-app
Need to install the following packages:
  create-react-app
Ok to proceed? (y) 

Creating a new React app in /my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

added 1933 packages, and audited 1934 packages in 2m

Initialized a git repository.

Installing template dependencies using npm...

...

Created git commit.

Success! Created my-app at /my-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  npm start

Happy hacking!

 

생성된 프로젝트로 이동하면 다음과 같이 파일들이 만들어진 것을 확인할 수 있습니다.

$ cd my-app

 

React project files

 

2.2. 프로젝트 실행

 

다음 명령어로 생성된 프로젝트를 실행해줍니다.

$ npm run start

 

리액트의 기본 포트는 3000입니다. 브라우저에 접속하면 다음과 같이 애플리케이션이 실행되는 것을 확인할 수 있습니다.

React app in browser

 

이상으로 React 프로젝트를 생성하고 실행하는 방법에 대해 알아봤습니다.

 

 

※ Reference

 

• velopert.com, 누구든지 하는 리액트 1편: 리액트는 무엇인가, https://velopert.com/3612
• react.vlpt.us, 01. 리액트는 어쩌다 만들어졌을까? , https://react.vlpt.us/basic/01-concept.html
• reactjs.org, Tutorial: Intro to React, https://reactjs.org/tutorial/tutorial.html
• en.wikipedia.org, React (JavaScript library), https://en.wikipedia.org/wiki/React_(JavaScript_library)
• velog.io/@sbinha, Virtual DOM, https://velog.io/@sbinha/React%EC%97%90%EC%84%9C-Virtual-DOM
• kyung-a.tistory.com, React 시작하기 | 기본 세팅, https://kyung-a.tistory.com/16?category=937838