React 1 - react.js 소개 및 개발환경 세팅

React.js?

리액트 JS는 페이스북에서 사용자 UI구축을 위해 제작한 자바스크립트 라이브러리입니다. 

 

특징

리액트는 크게 세가지 특징을 가지고 있습니다.

 

1. JSX 문법 사용

JSX는 Javascript Syntax Extension의 약자로, 자바스크립트 문법 내에 HTML형태로 정보를 전달하거나 표기할 수 있게하는 기술입니다. 

2. Component 기반

기존에 HTML/CSS로 서비스를 제작할 때에는, 서비스의 복잡도에 따라 코드가 굉장히 길어지고 여러번 사용되는 요소 또한 모두 일일이 작성해줘야 했습니다. 리액트에서는 서비스 내에 재사용이 가능한 요소르 컴포넌트 형태로 분리할 수 있어, 개발 과정에서 많은 효율성을 가져다줄 수 있습니다.

3. 가상 DOM

가상 DOM은 추상화된 DOM을 생성하여, 이를 실제 DOM과 비교하여 변경하려는 요소를 감지한 후 변경이 가해진 부분만 변경해줍니다.

 

초기 개발환경 세팅

리액트 웹 애플리케이션을 개발하는 것에 사용되는 바벨, 웹팩 등이 Node JS(브라우저 밖에서도 자바스크립트를 작성할 수 있는 환경) 코드를 필요로 하기 때문에, node JS를 설치해주어야 합니다.

 

node JS와 Node기반의 패키지 매니저 npm을 설치합니다.

 

이후, 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구인 CRA (Create-react-app)을 설치합니다.

// 예시 : wecode 폴더 내에 CRA 기반의 westagram-react 프로젝트 생성

// 1. Desktop 폴더 내에 wecode 폴더 진입
cd Desktop/wecode

// 2. westagram-react 프로젝트 설치
npx create-react-app westagram-react

// 3. westagram-react 프로젝트 진입
cd westagram-react

// 4. 로컬 서버 띄우기
npm start

npm start를 통해 로컬 서버에 접근하여 아래와 같은 CRA 초기 화면이 뜬다면 성공입니다. 다음 글에서는 초기 Create-react-app 폴더 내부의 파일들이 용도, JSX 문법 등에 대해서 포스팅하겠습니다.