React 시작 Create react app, npm install 차이점

React를 시작하기로 마음먹었다면 이 포스팅을 보면 됩니다. 이번 포스팅에서는 리액트가 무엇인지, 컴포넌트가 무엇인지, node.js를 다운로드한 다음에 리액트 프로젝트를 띄우기 위한 create-react-app을 입력하는 방법, npm install을 사용하는 이유에 대해서 알아봅니다. 

 

react

React 시작하는 방법

React는 무엇인가?

리액트는 선언적이고 (declarative), 효과적이고 (efficient), 유연한 (flexible) 자바스크립트 라이브러리입니다. React를 이용하면 여러 개의 컴포넌트(component)로 복잡한 UI를 만들 수 있습니다. 참고로 바닐라 자바스크립트는 절차형 프로그래밍(imperative)입니다. 절차형(imperative)응 컴퓨터가 이해하기 쉽도록 명시적으로 작성된 것을 말하고, 선언형(declarative)은 객체 지향 프로그래밍처럼 무엇을 할 것인지에 초점을 맞춘 프로그래밍을 의미합니다. 

 

Component는 무엇인가? 

리액트에서 모든 User interfaces는 component로 이루어져 있다고 볼 수 있습니다. 컴포넌트를 사용하는 이유는 재사용할 수 있고, 기능별로 구분할 수 있기 때문입니다. 그래서 반복되는 부분이 적기 때문에 짧은 코딩이 가능하며, 기능에 따라 나누기 때문에 코드 관리가 용이합니다. 컴포넌트는 props (properties)라는 파라미터를 가지고 있고, 뷰(view) 계층을 반환(return)합니다. 사용자가 만든 HTML element를 이용해서 component를 만듭니다. 사용자가 만든 HTML element는 대문자로 시작하고, html 태그는 소문자로 시작합니다. 

 

React 시작하는 방법

우선 react를 처음 시작하는 분이라면 node.js를 다운받아야 합니다. 

https://week-book.tistory.com/entry/Nodejs-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0-cmd-%EC%84%A4%EC%B9%98-%ED%99%95%EC%9D%B8-%EB%B0%A9%EB%B2%95

Node.js 설치하기: cmd 설치 확인 방법

node.js을 정상적으로 다운받았는지 확인하려면 cmd 창으로 알아볼 수 있습니다. cmd 창을 열고 node -v를 입력했을 때 버전 정보가 뜬다면 정상적으로 설치된 것입니다. 

 

Create-react app

node.js 설치가 완료됐다면, cmd 창에서 npx create-react app my-app을 입력해봅니다. my-app 폴더 안에 새로운 리액트 프로젝트가 만들어진 것을 확인할 수 있습니다. create-react app은 리액트 프로젝트를 만들 수 있는 명령어이고, node.js 14 이상 버전을 다운로드하고 실행할 것을 권장합니다. create-react app으로 싱글 페이지 리액트 애플리케이션을 만들 수 있습니다. my-app 폴더가 만들어지면 cd my-app으로 새로 만든 폴더로 이동하고, npm start로 리액트 웹페이지를 실행합니다. 실행한 어플리케이션을 닫고 싶을 땐 Ctrl+ C로 중단합니다. 

이제 VSCode로 돌아와서 File> Open-Folder로 my-app 폴더를 엽니다. 생성된 파일 중에 package.json 파일은 프로젝트에서 어떤 패키지들을 사용하는지 보여주는 파일입니다. 변환과 최적화 단계에 필요한 개발 관련된 내용이 담겨있습니다. 

 

다운로드한 소스 react 실행 방법

작성하고 있는 개발 서버를 다시 시작하고 싶을 때 또는 다운로드한 src를 VSCode에서 실행하고 싶을 때, 위 과정을 실행하고, src를 교체해준 다음 npm install을해줍니다. npx 명령은 처음 시작 프로젝트를 만들 때 사용하는 명령어고, npm install 명령어는 package.json 프로젝트 폴더에 필요한 모든 dependency를 다운로드해 줍니다. 많은 모듈을 한꺼번에 받는 작업이 필요할 때 사용하는 명령어입니다. 여기서 dependency의 의미는 프로젝트 구동에 꼭 필요한 모듈 정보를 말합니다. npm install이 완료된 이후에 npm start를 입력하여 앱을 시작합니다. http://localhost:3000으로 새로운 페이지가 자동으로 열립니다. 

참고로 npm(node package manager)는 node.js 프로젝트를 사용하기 위한 온라인 저장소, 패키지 다운로드, 버전 관리, dependency 관리를 도와주는 커멘드 라인 도구를 의미합니다.