React.js Start 리액트 시작하기, React App 만들기

React.js Start 리액트 시작하기, React App 만들기

 

React Project 설치 & 생성하기

 

React를 시작하기 위해서는 먼저 node.js가 설치되어 있어야 한다.

설치하지 않았다면 node.js 공식홈페이지에서 설치를 먼저 진행해야 한다.

 

nodejs 공식 홈페이지

https://nodejs.org 

Node.js

학습하는 과정에서 Node 버전은 상관없다.

LTS, Current 둘 중 하나 선택해서 Node.js 설치를 진행한다.

 

node.js를 설치했다면 react 프로젝트를 생성한다.

 

 

React 프로젝트 생성 명령어

npx create-react-app my-app

필자는 react-app-tutorial1 라는 프로젝트 이름으로 프로젝트를 생성했다.

npx create-react-app react-app-tutorial1 명령어로 프로젝트를 만들었기 때문이다.

 

리액트 프로젝트를 실행시키는 명령어

npm start

 

실행을 시키면 http://localhost:3000/ 경로로 리액트 프로젝트가 로컬로 실행되는 것을 볼 수 있다.

자동으로 실행되지 않는다면 위 주소를 브라우저에 입력하면 확인할 수 있다.

 

React의 핵심적인 기능은

사용자 정의 태그를 만드는 것이다.

복잡한 코드를 함축(컴포넌트화)해서 재사용성을 높이고

단순하면서 편하게 개발할 수 있게 도와주는 javascript의 라이브러리다.

 

 

 

반응형

 

 

React 프로젝트 구조 살펴보기

React Project의 시작점은 어디일까?

프로젝트 폴더에서 src 폴더에 있는 index.js 파일이 프로젝트의 시작점이다.

코드를 보면 <App /> 태그가 있는데, App.js로 작성된 파일을 import 하여 태그로 사용된 것이다.

실제로 화면에 보여지는 코드는 src/App.js 에 작성된 것이라고 볼 수 있다.

 

src/App.js 에 작성된 코드와 현재 렌더링 된 화면은 다음과 같다.

App.js에서 App 함수의 return 부분을 수정해 보자.

수정하면 현재 실행된 React App이 바로 수정되는 것을 확인할 수 있다.

개발자 도구를 열어보면 소스를 확인할 수 있는데 <div id="root"> </div> 태그를 볼 수 있다.

배포 기준으로 볼 때는 프로젝트 폴더의 public 폴더 내에 index.html 파일이 있는데

index.html이 프로젝트의 베이스가 되는 파일이 된다.

 

index.html 파일에 <div id="root"></div> 이 태그는 src/index.js 파일에 보면 Id가 root인 곳에다가 렌더링 하도록 되어 있다.

 

public폴더에 있는 index.html 파일에 <div id="root"></div> 태그에

index.js에서 index.html의 root 태그를 기준으로 랜더링을 하고

App.js의 컴포넌트를 렌더링 대상으로 넣어서 보여준다.

 

App.js 코드를 수정했을 때 화면 내용이 변경되는 이유이다.

 

 

 

배포판 만들기

React App을 빌드해서 배포판을 만들어 사용할 수 있다.

 

React App 빌드하기 (React App 배포만 만들기)

npm run build

 

프로젝트 폴더를 보면 build 폴더가 생성된 것을 확인할 수 있다.

이 폴더에 있는 파일들로 배포를 하게 된다.

 

배포 명령어

npx serve -s build

-s 옵션은 시작 폴더를 지정할 수 있다.

build 폴더를 배포 폴더로 두어서 React App을 실행한다.

 

이렇게 해서 React를 설치하고, 실행하고, 수정하고, 배포 버전까지 만들어 보았다.

 

 

---

 

React에서 사용되는 개념

 

컴포넌트(Component) :

React에서 Code를 나누어서 관리하는 것이다.

 

App.js 파일의 App 함수에 다음 html 코드를 작성했다.

위에서

"React에서 컴포넌트는 Code를 나누어서 관리하는 것이다."

라고 했다.

 

html 시맨틱 태그를 기준으로 봤을 떄

header, nav, article을 영역별로 분리할 수 있어 보이고

이를 나누어서 관리하게 되었을 때 심플해지는 코드를 보자.

function App() 은 코드가 단순해진 것을 볼 수 있다.

Header, Nav, Article 컴포넌트를 분리해서 관리하지만

결국 function App() 에는 분리한 컴포넌트 태그들이 다 담겨 있기 때문에

화면에 보이는 결과는 같다.

---

React를 시작하고, React App을 만들어 보았다.

다음 개념들을 학습해 나가자.