React | 배경, 사용 방법

GEUNNN Lee·2021년 3월 5일
0
post-thumbnail

React

React는 사용자 인터페이스 (UI)에만 집중한 자바스크립트 라이브러리로 페이스북에서 개발했다.

React 등장 배경

웹이 발전하면서 이전보다 더 많은 정보를 보고자하는 니즈가 생겼다. 이 때문에 페이지가 늘어나고 구조가 복잡해지게 되었다. 현재는 웹 페이지가 아닌 웹 애플리케이션이라고 한다. 애플리케이션의 규모가 커지고 다양한 UI, UX적인 부분을 구현할 필요성이 늘어나면서 다양한 라이브러리, 프레임워크가 생겨나기 시작했다.


Framework, Library

  • Framework: 개발에 필요한 패키지가 내장되어 있다. 패키지가 내장 되어있으므로 개발자는 프레임워크 안에서만 개발을 하게 된다. 주체가 프레임워크가 되는 것이다. 특징 중의 하나로는 패키지가 내장되어있어 프로그램이 무거울 수 있다. 대표적인 자바스크립트 프레임워크로는 Angular, Vue가 있다.

  • Library: 개발에 필요한 패키지가 내장되어 있지 않다. 개발자는 필요에 따라 Third Party Library를 설치해서 사용해야 한다. 이 때문에 개발자가 주체가 된다. React가 대표적인 자바스크립트 라이브러리이다.


React 개념, 특징

  • 사용자 인터페이스 (UI)를 만들기 위한 자바스크립트 라이브러리이다.
  • 가상 돔 (Virtual Dom)을 사용하여 UI를 업데이트한다.
    - 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산한다. 불필요한 UI 업데이트는 줄고, 성능은 좋아진다.
  • 생태계가 발달 되어있다.

React 설치, 사용

공식 문서에 나와있는 react 설치 및 사용 방법은 여러 가지가 있다.
웹에서 사용하는 법이 있으며 로컬에서 작업할 수 있는 방법이 있다. 로컬에서 작업하는 툴에는 Create React App과 Next.js 등이 있다. 이 외에도 여러 권장 툴이 있으며 다른 툴을 확인해보고 싶으면 공식 문서를 활용하면 된다.

배우는 단계이거나 새로운 싱글페이지 애플리케이션을 만들 때는 CRA (Creat React App)을 활용하라고 권장하고 있다.

CRA (Create React App)

CRA는 리액트 프로젝트를 시작하는데 필요한 개발 환경을 셋팅 해주는 도구이다. CRA를 설치하기 위해서는 Node.js가 설치되어 있어야한다.


Node.js

자바스크립트를 브라우저 밖에서도 동작하여 사용할 수 있게 해주는 환경이다. 브라우저 밖에서도 동작이 가능하기 때문에 백엔드에서도 많이 활용된다. Node.js를 설치하면 npm (node package manager)도 같이 설치된다.

npm

node package manager의 줄임말로 Node 기반의 패키지를 관리해주는 도구이다. npm을 활용해 여러 패키지를 설치하여 활용한다.


리액트는 UI 기반의 라이브러리라 Node.js가 필요하지 않지만 프로젝트를 개발하는데 필요한 도구들이 Node.js 기반이기 때문에 설치가 필요하다.

profile
Frontend Developer 👩🏻‍💻👩‍💻

0개의 댓글