react 리액트란? 설치 방법 및 시작하기

리액트란?

리액트는 Facebook에서 개발한 오픈소스 자바스크립트 라이브러리입니다.

프론트앤드 개발에 사용되며, 데이터와 상태(state)를 관리하며 컴포넌트 기반의 아키텍처를 사용한다.

기본적으로 Hook를 사용해서 상태관리를 할 수 있으며, Redux, MobX등과 조합하여 상태관리를 할 수 있다.

 

반응형

설치 방법

리액트를 사용하기 위해서는 기본적으로 Node.js가 설치되어 있어야 한다.

Node.js의 설치 방법은 Node.js 공식 웹사이트에서 Node.jsㅇ 설치파일을 다운로드하고 설치하면 된다.

Node.js

 

npm은 Node.js가 설치되면 함께 설치가 된다.

node -v  // node 설치 확인
npm -v // npm 설치 확인

 

npm이 설치되면 npm명령어를 사용하여 리액트를 설치할 수 있다.

npm install -g create-react-app

위의 명령어에서 -g 옵션을 추가하는 이유는 글로벌로 설치를 하기 위해서입니다.

글로벌 설치는 특정 프로젝트에 종속되지 않고 시스템 전체에서 사용할 수 있는 패키지를 설치하는 것을 의미한다.

 

리액트 시작하기

node.js, react를 설치하면 리액트 프로젝트를 만들고 실행할 수 있습니다.

 

npx create-react-app my-react-app

npx create-react-app 명령어를 사용하여 원하는 이름의 프로젝트를 생성한다.

my-react-app의 폴더가 생성되고 프로젝트에 필요한 기본적인 파일들이 생성된다.

 

node_modules - 프로젝트에 필요한 모든 패키지와 라이브러리가 설치된다.

public - 정적 파일(이미지, HTML 파일 등)을 저장하는 폴더.

• index.html - 기본 HTML파일로 리액트앱이 랜더링 되는 루트 HTML파일
• favicon.ico - 브라우저 탭에 표시되는 아이콘

src - 리액트 애플리케이션의 소스코드를 포함하는 폴더.

• index.js: 애플리케이션의 진입점 파일로, 리액트 앱을 시작하는 JavaScript 파일입니다.
• App.js: 기본 앱 컴포넌트의 소스 코드가 들어있는 파일입니다. 이 파일에서 앱의 레이아웃과 동작을 정의합니다.

.gitignore - git hub에 push 하지 않을 폴더나 파일을 지정한다.

package.json - 프로젝트의 설정과 의존성 정보를 저장하는 JSON 파일입니다. 이 파일에는 스크립트, 패키지 버전 및 프로젝트 메타데이터가 포함됩니다.

package-lock.json - 프로젝트의 의존성 트리를 정확하게 잠그는 데 사용되는 파일. 일반적으로 이 파일은 직접 편집하지 않는다.

README.me - 프로젝트에 대한 설명과 문서를 포함하는 Markdown 형식의 파일입니다.

 

 

cd my-react-app

cd 명령어를 사용해서 생성한 프로젝트 폴더 내부로 들어간다.

 

npm start

npm start 명령어를 사용하면 생성된 프로젝트가 실행된다.