FrameWork/React
리액트에 대해 알아보고, 프로젝트 생성하기
jheaon
2023. 7. 8. 19:17
리액트란 사용자 인터페이스를 구축하는 자바 스크립트 라이브러리이다. 물론 Html, Css, Javascript로 사용자 인터페이스를 구축할 수 있지만, 복잡한 인터페이스를 구축하기에는 조금 불편한 점이 있을 수 있다. 따라서 리액트의 힘을 빌려 좀 더 쉽게 인터페이스를 구축하기 위해 사용한다.
리액트
리액트는 사용자 인터페이스를 구축하는 자바 스크립트 라이브러리 종류 중 하나이며 모두 컴포넌트(html, css, js의 결합물)로 구성되어 있다. 리액트를 사용하게 된다면 다음과 같은 이 점을 얻을 수 있다.
- 재사용성 증대
- 관리 용이성 증대
리액트 프로젝트 생성하고 실행하기
리액트 프로젝트를 생성하기 위해서는 node.js을 설치하여야 한다.
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
설치가 완료되면 작업하고자 하는 폴더로 들어가 해당 명령어를 입력한다.
npx create-react-app project_name
그런 다음 해당 프로젝트를 실행시키기 위해서는 아래의 명령어를 입력한다.
npm start
정상적으로 리액트 앱이 돌아가고 있는 것을 확인할 수 있다. 리액트에서 패키지 관리는 package.json에서 관리되며 이를 폴더에 node_module 모아 패키지를 관리한다. 따라서 만약 외부에서 리액트 프로젝트를 받아 사용한다면 "npm install" 명령어를 통해 패키지를 다운로드한 뒤, 프로젝트를 실행하여 사용하면 된다.
즉 남이 만든 리액트 프로젝트를 사용하기 위해서는 아래와 같이 진행하면 된다.
- Git을 통해 react project을 가져온다.
- npm install 명령어를 통해 패키지를 설치한다.
- npm start을 통해 프로젝트를 실행한다.