React

리액트 프로젝트 만들기

일등하이 2022. 1. 23. 04:28
반응형

가장 간단한 방법은 create-react-app을 사용하는 것이다 

 

https://github.com/facebook/create-react-app

 

GitHub - facebook/create-react-app: Set up a modern web app by running one command.

Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an account on GitHub.

github.com

https://create-react-app.dev/

 

Create React App

Set up a modern web app by running one command.

create-react-app.dev

리액트 앱을 만들때 사용하는 도구다 

 

이것은 기본 리액트 코드 파일로 미리 설정된 폴더가 있다 

 

이러한 설정 파일들이 리액트앱을 만드는것을 도와주기 때문이다 

 

또한, 개발용 웹 서버가 앱을 미리 검토 한후 브라우저가 코드를 수정 하면 페이지를 자동으로 업데이트 할수 있다 

 

그래서 create-react-app을 사용하는것이다.

 

개발 과정을 단순화 해준다 

 

생산서버에 보내기 전 우리가 필요한 몇가지 셋팅만 해주면 리액트 코드를 최적하는데 도움을 줄수도있다 

 

create-react-app을 시작하는것은 매우 간단하다 

 

그전에  node.js를 설치 해야 한다 

https://nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

node.js는 리액트와 직접적인 연관은 없지만 

이것은 javascript를 브라우저 밖에서도 실행 가능 하게 해주는 runtime environment이다 

 

리액트 코드는 브라우저에서 실행하는 자바스크립트 코드이기 때문이다 

 

 

node.js가 필요한 이유는 create-react-app을 사용하기 위해서이다 

 

npx create-react-app my-app
cd my-app
npm start

위 명령어를 사용하기 위해서는 node.js가 필요하다

 

node.js 홈에 들어가 가장 최신 버전을 받으면 된다 

 

터미널을 열고 위 명령어를 작성하면 된다 

 

그러면 새로운 리액트 프로젝트가 만들어 진다 

 

my-app 부분은 원하는 프로젝트명으로 바꿔도 좋다 

 

설치가 완료 되면 터미널에서 해당 폴더로 이동 한후 npm start명령어를 작성하면 

다음과 같이 앱이실행 된다 

vscode로 프로젝트 폴더를 열면 된다 

src폴더에는 실제 소스코드가 들어가며 packages.json 파일에는 여러 설정들이 들어가있다 

 

앱을 종료 하고 싶다면 터미널에서 컨트롤 +  c 를 입력 하면 된다 

다음과 같이 접속 할수 없게 된다 

vscode에서 터미널을 열고 프로젝트 경로로 가서 npm install 명령어를 입력 하자 

이 명령어는 package.json파일을 살펴 보고 프로젝트에 필요한 모듈들을 설치 한다 

 

그리고 npm start 명령어로 다시 앱을 실행 해보자 

개발 서버가 실행되며 localhost:3000 으로 접속하면 된다 

 

src폴더를 열어 보면 javascript파일과 css파일이 보인다 

리액트 코드는 일반 자바스크립트 코드다 

 

index.js파일을 열어 보자 

이 파일이 시작 파일이다 

index.js

페이지가 로드 되면 실행되는 코드다 

따라서 localhost:3000을 방문 하면 

index.js 파일이 최초 실행 코드를 가지고 있다 

 

리액트는 해당 코드를 변형해 브라우저에게 전달하고 브라우저는 화면에 표시 한다 

예를들어 아래 구문과 같이 자바스크립트가 하는일이 아닌일도 가능하다 

import './index.css';

css를 javascript로 import할수 없지만 리액트 프로젝트에서는 가능하다 

npm start프로세스를 통해 

index.js파일이 실행되며 리액트에서 css파일을 포함 시키게 된다 

  <React.StrictMode>
    <App />
  </React.StrictMode>,

위 코드는 일반 자바스크립트 구문이 아니다 

자바스크립트 파일에 있는 HTML과 같다 

이것은 브라우저에 전송되기 전에 변형된다 

그러므로 이러한 문법은 우리가 쉽게 코드를 작성 할수 있게 도와준다 

import ReactDOM from 'react-dom';

react-dom을 임포트 한다

packages.json파일에 있는 서드파티 라이브러리다

packages.json

이렇게 react와 react-dom, react-scripts등은 리액트 라이브러리가 된다 

 

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

ReactDOM.render메서드에는 2개의 매개변수가 있다 

두번째 매개변수는 default 자바스크립트 DOM api다 

https://ko.reactjs.org/docs/react-dom.html#render

 

ReactDOM – React

A JavaScript library for building user interfaces

ko.reactjs.org

 

global document객체는 브라우저에서 ID에 해당하는 요소를 얻어 특정 DOM HTML요소를 선택 한다 

index.html

이 파일은 single html 파일이다 

브라우저에서 load된것이다 

왜냐면 리액트에서 소위말해 sinple page app이라는것을 만드니깐 말이다 

 

이것이 의미하는것은 하나의 html 파일만이 브라우저에 전달되며 

브라우저에 의해 host된다는것이다 

 

index.js 파일에서는 

완성된 리액트 앱 코드만을 가져오지만 

이것은 시작 코드가 아니다 

브라우저에서 뭘 보여 줘야 할지 업데이트 하는 일을 한다 

 

하나의 html 파일이 있지만 내용이 계속 변할수 있다 

바로 리액트 코드 덕이다 

 

index.html파일의 내용에는 

 <div id="root"></div>

위 코드가 있다 

body중에 유일한 html요소다 

그리고 div는 root라는 id가 있다 

document.getElementById('root')

코드에서 해당 요소를 선택 하게 되는 것이다 

이 div를 root라는 id로 타겟 한것이다 

그리고 무엇인가를 render 하려고 한다 

div컨텐츠는 

<React.StrictMode>
    <App />
  </React.StrictMode>,

로 대체 되게 된다 

여기에서 App은 import한 App.js파일이다 

import App from './App';

이때 App은 컴포넌트다 

App.js

이때 여기 보이는 구문들은 JSX다 

https://ko.reactjs.org/docs/introducing-jsx.html

 

JSX 소개 – React

A JavaScript library for building user interfaces

ko.reactjs.org

리액트 팀에서 만들고 도입한 특별한 구문이다 

그리고 자바스크립트 파일에서도 작동한다 

react프로젝트가 변형 해주기 때문이다 

 

반응형