[React] React.js 정리와 실행하기

안녕하세요 성조입니다.

오늘은 리액트 프로젝트 생성 방법과 React는 무엇인지. 또한 리액트 프로젝트는 어떻게 실행하는 것인지 정리 포스팅하려고 합니다.

---

INDEX

- 리액트(React)란?

- 리액트 시작하기

---

 

리액트(React)란?

기존의 UI보다 보다 더 편리하게 사용자 인터페이스를 만들기 위해서 만들어진 Javascript 라이브러리이다.

2013년 5월에 페이스북에서 처음으로 출시됐다.

리액트 버전 관리의 경우 페이스북, 개발자, 기업들이 공동체 유지 보수 방법을 진행하여 버전을 관리하기 때문에 비교적 다른 라이브러리, 프레임워크와 다르게 오랜 버전 업그레이드와 유지보수 매우 수월하게 진행되고 있다.

 

리액트는 앵귤러(Angular), 뷰(Vue)와 다르게 공식 문서에서 라이브러리라고 정의됐다. 하지만 리액트를 다루는 개발자들은 리액트 또한 프레임워크라고 보는 입장도 있다. 공식 문서에서는 라이브러리라고 정의했으므로 라이브러리로 인지하자.

 

기존에 웹의 경우. HTML, CSS를 가지고 구현한 후 DOM tree 형태로 HTML을 렌더링 하여 화면을 처리했다. 하지만 리액트(React)는 페이지 전체를 렌더링하는 기존 방식이 아닌. SAP(Single Page Application)을 전제로 하여 Dirty checking과 Virtual DOM을 활용하여 업데이트를 해야 하는 DOM 요소를 찾아서 개발자가 필요로 하는 부분만 업데이트 하도록 변화됐다. 또한 그로 인하여 리렌더링이 잦은 동적 모던 웹에서 엄청나게 빠른 퍼포먼스 성능을 내는 것이 가능해졌다.

 

이런 리액트는 기본 베이스가 모듈로 개발하는 모듈형 타입이라서 재사용성 측면이 올라가면서 코드의 생산성 또한 상당히 높은 라이브러리로 자리 잡고 대세의 자리까지 올라왔다.

 

정리하면 HTML의 경우 DOM을 활용하여 전체를 렌더링 하여 페이지를 불러온다면 header, nav, main, footer 등의 파트별로 분리된 태그들이 전체 다 분리한다.

React는 원하는 부분만 태그를 리렌더링하여 가져오기 때문에 빠른 속도로 웹을 재 출력하는 것이 장점이다. 그래서 웹 프론 개발의 표준의 자리까지 잡았다는 평가도 나온다.

 

 

리액트 시작하기

포스팅 제목에 기재된 것과 같이 리액트는 결국 자바스크립트 라이브러리이며, Node.js를 기반으로 동작한다. 그렇기 때문에 Node.js 설치를 진행한 후에 작업을 해야 한다.

 

또한 React는 Node 14버전 이상에서 동작되기 때문에 반드시 14 버전 이상의 Node.js를 설치해야 한다.

2022.04.20 - [Javascript/Node.js] - [Node.js] Node.js 이해와 설치 및 실행

[Node.js] Node.js이해와 npm 설치 및 실행

 

참조 Git 주소

https://github.com/facebook/create-react-app

GitHub - facebook/create-react-app: Set up a modern web app by running one command.

 

시작 방법의 종류는 3가지가 있습니다. npx, npm, Yarn이 존재하며, 지금은 가볍게만 다뤄보려 한다.

 

npx

npx create-react-app my-app

npm 5.2 이상과 함께 제공되는 패키지 실행 도구이다.

npm과 다르게 npx은 사용자가 지정한 패키지만 실행할 수 있도록 지정하기 때문에 전체를 순차적으로 진행시켜 주는 npm보다 비교적 가볍게 사용할 수 있다.

 

npm

npm init react-app my-app

yarn create react-app my-app

npx과 npm의 단점을 보완하여 조금 더 빠르고 안정적으로 구현이 가능하게 하는 패키지 관리자 이다.

 

 

위의 문구를 vscode 터미널에 입력하면 다음과 같이 자동으로 리액트 파일이 생성된다.

 

터미널에 cd로 생성한 react 폴더 위치로 들어간다.

ex) cd my-app

이후 npm start 또는 yarn start를 입력한다.

그러면 기본적인 세팅으로 다음과 같이 React가 실행된다.

이제 리액트 라이브러리를 학습하고 프로젝트를 진행하면 된다.

 

---

오타나 정보 전달에 문제가 있는 경우 댓글 부탁드리겠습니다.

다음 포스팅 때 뵙겠습니다!

 

- 참조 자료 -

https://ko.reactjs.org/docs/getting-started.html

시작하기 – React

https://ko.wikipedia.org/wiki/%EB%A6%AC%EC%95%A1%ED%8A%B8_(%EC%9B%B9_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC) 

리액트 (웹 프레임워크) - 위키백과, 우리 모두의 백과사전

https://ko.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

https://github.com/facebook/create-react-app

GitHub - facebook/create-react-app: Set up a modern web app by running one command.

https://ko.wikipedia.org/wiki/Npm_(%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4) 

npm (소프트웨어) - 위키백과, 우리 모두의 백과사전

https://www.npmjs.com/

npm