React 개발환경 구축하기

React 개발환경 구축하기

1. React.js 란?

간단히 설명해자면 페이스북에서 자신들의 서비스를 좀 더 효율적으로 개발하기 위해 직접 개발한 기술이며, MVC 모델에서 'View'를 위한 UI(User Interface) 라이브러리다. 확실히 집고 넘어가자. React는 프레임워크가 아닌 UI 라이브러리이다. 

React는 React.js라고 불리듯이 javascript기반이며, 기존의 javascript나 javascript의 최근 버전인 ECMAScript6에 익숙한 개발자라면 금방 배워나갈 수 있을 것이다. React의 구조는 Component(요소)별로 구성되어 있으며 단방향 데이터 플로우 갖고 있다. 쉽게 말해서 React로 개발된 UI의 상태가 변할 때 데이터가 변형되는 것이 아니라 사용자에게 보여지는 UI만 업데이트 되는 것이다. 

2. 개발환경 구축

- node.js 설치하기

node.js를 설치하는 이유는 npm을 사용하기 위해서이다. node.js를 설치하게 되면 npm이 자동으로 설치된다. node.js 홈페이지에 들어가면 아래의 사진과 같이 자신의 운영체제에 맞는 node.js 설치파일을 다운로드 받아 설치해 주면 된다.

node.js 설치하러 가기

설치가 끝났다면 cmd창(Windows사용자 기준)을 열고 node -v 를 입력해보자. 다음과 같이 자신의 pc에 설치된 node.js의 버전이 뜬다면 제대로 설치가 완료 된 것이다.

- IDE(Integrated Development Environment) 설치하기

IDE란 통합 개발 환경이란 뜻으로, React를 코딩하기 위한 툴을 설치 해 주려 하는 것이다. 필자는 쭉 atom이란 툴을 사용해 왔기에, atom 설치 법을 알려주겠다. 아래의 링크를 따라 들어가면 아래와 사진과 같이 설치파일을 다운로드 받아 진행하면 된다.

atom 설치하러 가기

- [ create-react-app ] 설치하기

create-react-app은 패이스북에서 개발 한 하나의 패키지이다. 보통 react를 개발하기 위해서는 react의 문법만 할아야 되는 것이 아니라 개발환경 구축을 위한 까다로운 부분들이 존재한다. 하지만 이 패키지가 개발 되면서 위와 같은 문제점들이 어느 정도 보완 되었다. 그리고 초보자들 에게도 react를 경험 할 아주 좋은 기회라 생각한다.

create-react-app github 바로가기

위의 사진처럼 cmd 창을 열고 npm install -g create-react-app 을 실행시키면 react 개발을 위한 패키지가 설치된다. 필자의 경우 이미 설치해 놓은 상태라 2개의 요소가 업데이트 되었다.

- 프로젝트 생성하기

내문서 디렉토리에 react-workspace 폴더를 새로 만들고 워크스페이스 폴더 안에 첫 프로젝트를 생성해 볼 것이다. 아래와 같이 간단하다. cmd 창에서 cd (워크스페이스 디렉토리) 입력해 들어간 후 create-react-app projectName 을 입력해 주면 끝!

정리하기

1. node.js 설치하기  node.js 설치하러 가기 

2. atom (IDE) 설치하기 _서브라임텍스트, 노트패드 등 다른 것을 설치해도 무방함.  atom 설치하러 가기 

3. create-react-app 설치하기  npm install -g create-react-app 

4. 프로젝트 생성하기  create-react-app projectName