[ReactJS] React JS 소개 및 설치

React JS의 개념과 탄생 배경

React 탄생 배경

• 웹 애플리캐이션이 등장함에 따라 웹 개발의 복잡성이 증가하게 되었다.
  • 웹 애플리케이션 : 웹 브라우저를 통해 응용 소프트웨어의 기능을 이용할 수 있도록 만든 웹 서비스
• 이에 따라 DOM을 직접 조작하는 (Vanila JS, jQuery를 이용하는) 기존의 개발 방법으로는 한계가 생겼다.
• 이러한 상황에서 자연스럽게 프론트엔드 개발의 생산성 향상과 난이도 하향을 위한 여러 라이브러리 및 프레임워크가 탄생하였다.
  • 이 중 현재 제일 많이 사용되는 것은, React, Angular, Vue이다.

 

---

React JS란?

• React JS (혹은 React)는 UI를 구축하고 어플리케이션이 interactive하도록 만들어주는 프레임워크 (Framework) 이자 라이브러리 (Library) 이다.

  

  • React 는 UI를 만드는 기능만을 제공해주기에, 라이브러리 하나로만 분류하는 관점도 존재한다.

 

< Framework VS Library >

• 공통점 : 복잡한 개발을 편리하게 할 수 있도록, 필요한 기능들을 미리 만들어 사용할 수 있는 형태로 제공된 코드
• 차이점 : Framework은 전체적인 틀(Frame)을 제공해주기 때문에, 개발자가 그 틀 안에서 그 방식에 맞춰 작업을 해야만 한다. / 반면 Library는 하나의 기능만을 도구로써 제공해주기 때문에, 개발자 본인이 필요한 여러 도구들을 직접 가져와서 조립히여 사용해야 한다.

 

• React JS는 모든 것이 JavaScript에서 시작한다. HTML 요소를 JS에서 직접 만들어서 HTML에 반영한다.

 

---

React JS 설치

방법 1 : HTML 문서에 react, react-dom을 import하는 방법

• 따로 다른 프로그램을 PC에 설치하지 않는 방법으로, 두 개의 Javascript 코드(react, react-dom)를 HTML에 import 해준다.(react-dom은 모든 React element들을 HTML에 둘 수 있도록 해주는 library 또는 package이다.)

<!-- React 17.0.2 버전 -->
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>

 

---

✨ 방법 2 : Node.js를 통해 설치 - CRA (Create React App)

• 사전 지식 : Node JS & NPM 소개 및 설치
• React도 일종의 패키지이므로 다운로드 받기 위해선 NPM이 필요하다.
• 또한 React를 이용해서 개발환경을 구축하려면 다른 패키지들과 이를 함께 실행할 환경이 제공되어야 하므로, NPM과 Node JS의 설치는 필수이다.

 

• React 개발에 필요한 패캐지를 일일이 찾아 설치하는 방법도 있지만, 이는 까다로운 과정이기에, 대신 React와 필요한 도구들을 미리 조합하여 설정해둔 "툴체인"을 활용할 수 있다.
  • (툴체인 : 여러 도구들을 연결해놓은 것)
• React 공식문서에서는 'React를 배우고 있거나, 새로운 싱글 페이지 앱(SPA)를 만들고 싶다면 Create React App 툴체인을 사용할 것을 권장한다.'
  • CRA 설치 명령어 : npx create-react-app [프로젝트 이름]