Start React
프론트엔드의 라이브러리는 종류가 다양하다. 현 시점에서 가장 많이 쓰이는 라이브러리로 ReactJS, VueJS, AngularJS 3대장을 꼽는다. 이 셋은 각각 다른 특징을 가지고 있다.
❓ 자바스크립트로 구현하면 되는데 굳이 라이브러리를 쓰는 이유?
❗️ 사용자 인터렉션이 적다면 라이브러리를 사용하지 않아도 되지만, 요즘의 웹은 정말 많은 기능과 데이터를 다루기 때문에 수많은 DOM을 관리하기란 쉽지 않은 일이다. 라이브러리를 통하여 관리 부담을 줄이고 UI 구현에 집중할 수 있다.
Why React?
- 블럭 단위로 소스를 관리하는 컴포넌트라는 개념에 집중한다. 컴포넌트 사용은 소스 관리에 용이하고 재사용성이 뛰어나다.
- Virtual DOM이라는 가상의 DOM을 사용한다. 변화를 감지했을 때, 해당 부분만 렌더링을 해줄 수 있다. 변화가 있을 때 마다 페이지 전체를 렌더링 하는 것과 바뀐 곳만 렌더링 하는 것은 성능면에서 차이가 있을 것이다.
- 커뮤니티가 크다는 것이 큰 장점이다. 페이스북이 제작하여 개발자의 사용 편리성을 위해 계속해서 노력하고 있고, 리액트와 관련한 좋은 라이브러리가 많이 출시되고 있다.
설치
리액트를 사용하기 위해서는 리액트 라이브러리를 설치해야한다.
npm install -g create-react-app🙋🏻♂️ -g 옵션으로 글로벌하게 설치하지 않고, npx를 이용하여 사용해도 된다.
create-react-app 명령어를 통해 리액트에서 제공하는 패키지로 설치를 하게되면 리액트 사용에 도움을 주는 Webpack, Babel등을 하나하나 직접 설치할 필요없이, 한번에 설치할 수 있다.
🙋🏻♂️ npm 명령어를 사용하기 위해서는 nodeJS를 설치해야하고 node 버전 관리를 편하게 도와주는 nvm을 통하여 설치하는 것을 추천한다! > VELOPERT님 글 참고
사용
create-react-app 프로젝트명create-react-app 명령어를 통해 간단하게 리액트 프로젝트를 생성할 수 있다.
cd 프로젝트명
npm start를 통해 리액트 프로젝트를 시작할 수 있다.
🙋🏻♂️ create-react-app으로 리액트 프로젝트 생성 시 Babel, Webpack 등 리액트 프로젝트에 도움을 주는 도구들이 같이 설치된다.
사용하지 않는 도구가 있다면 create-react-app을 사용하지 않고 직접 프로젝트를 구성하는게 리소스 낭비를 줄인다!
📂 참고자료