React. 리액트 입문

※본 포스팅은 생활코딩님의 리액트 강의를 바탕으로 작성한 글입니다.

리액트(React)

Facebook에서 만든 자바스크립트 UI 라이브러리

 

웹사이트는 매우 빠른 속도로 복잡해지고 있다. 정보가 조금만 증가해도 그 정보를 표현하는 HTML 태그는 기하급수적으로 늘어남

리액트는 사용자 정의 태그를 만들어주는 여러가지 기술

사용자가 정의해서 태그를 만드는 것 -> 컴포넌트(Component)

 

리액트를 사용하면

 

1. 가독성을 높임

2. 재사용성이 높아짐

3. 유지보수가 편리해짐

 

리액트 개발환경의 종류

리액트 공식 홈페이지

React – A JavaScript library for building user interfaces

1. Online playgrounds

CodePen, CodeSandbox, or Stackblitz 등 온라인 상에서 리액트 애플리케이션을 구현해볼수 있는 사이트

 

2. Add react to a website

부분적으로 리액트 기능을 추가하고 싶을 때 사용한다.
개발환경을 직접 구축 해야하는 어려움이 있기 때문에 초급자들에겐 까다로움

 

3. Create a new react app

Tool chain : 여러가지 개발환경을 모아서 한번에 제공해주는 도구

 

리액트가 없다면

코드의 양이 수백줄, 수천줄 같이 엄청나게 많으면 코드가 한 눈에 안들어온다.

리액트는 태그를 안보이게 감춰놓고 컴포넌트 이름만 보이게 심플하게 해줌

 

npm 이용해서 create react app 설치하기

npm은 node js로 만들어진 프로그램을 쉽게 설치해줌

 

1. node js 설치

cmd 또는 터미널에서

npm -v : node js와 npm 설치 버전 확인

 

2. create react app 설치

npm install -g create-react-app : npm에게 전역으로 create react app를 설치하라고 명령

이 과정에서 권한 관련 오류가 나온다면

명령어 sudo npm install create-react-app 입력하고 컴퓨터 비밀번호 입력하면 됨

 

create-react-app -V : 설치확인, 프로그램 버전이 나오면 성공적으로 설치한 것임

 

(이 과정에서 맥으로 create react app 를 설치를 하고 버전 확인을 했는데 아무리해봐도 Command not found 메세지가 나오면서 설치 확인이 안됐다. npm run start도 같은 메세지가 나옴. 몇 시간동안 머리 쥐어 짜면서 구글링도 해보고 node 재설치도 해보는 등 해결해보려했지만 실패. 집에서 윈도우 데스크탑으로 하니 한큐 됨.. 나중에 다시 해봐야겠음)

 

npx create-react-app : 공식 문서에서 권장하는 방법
npm은 프로그램을 설치하는 방법이라면, npx는 임시로 설치해 한 번만 실행시키고 지움. 컴퓨터 공간을 낭비하지 않고, 실행할 때마다 새로 다운받기 때문에 최신상태이다. 

 

Create react app을 이용해서 개발 환경 구축

우선 리액트 개발 환경을 어느 디렉토리에 세팅해야할지 정해야함

 

1. React-app 이름의 폴더 만들기

 

2. 해당 디렉토리에 세팅

React-app 폴더 안으로 들어가서 명령을 실행해야 이 디렉토리가 create react app의 개발 환경이 된다.

cd + React-app의 디렉토리로 경로 설정한 다음에

create-react-app . : .는 현재 디렉토리를 의미한다.

입력하면 해당 디렉토리에 create react app의 개발 환경이 됨

 

샘플 웹앱 실행

cmd 또는 터미널에서 npm run start

 

실행하면 웹페이지가 열리는데 Create react app이 가장 최소한의 앱을 구현해서 미리보기 해줌

 

디렉토리 구조 파악

Public – index.html이 있는 곳. 리액트를 실행하면 나오는 첫 화면

Public 디렉토리는 create react app 에서 npm run start를 했을 때 파일을 찾는 document root

리액트로 만드는 컴포넌트들은 <div id =”root”></div> 안에 들어가야 함

 

id = "root" 안에 들어가는 컴포넌트들은 어떤 파일을 수정해서 만들 수 있을까?
대부분의 파일은 src 디렉토리 안에 넣을 것임

src- index.js

src - App.js 

App 컴포넌트를 구현한 파일

 

배포하는 법

Create react app의 개발환경은 여러가지 편의 기능을 추가해 놓은 상태이기 때문에 파일 용량이 큼 + 보안적인 문제

 

Build 할때는 npm run build 입력 -> build 디렉토리가 생김

build 디렉토리에 생긴 Index.html은 create react app이 실제 프로덕션 환경에서 사용되는 앱을 만들기 위해서 원래 가지고 있던 index.html 파일을 공백과 같은 불필요한 정보를 제거해 용량을 줄인 것

실제로 서비스할 때는 build 안에 있는 파일들을 사용하면 됨

 

npm install -g server : 전역에서 웹서버를 설치할수 있음

npx serve : 한 번만 실행시키는 웹서버

npx serve -s build : document root를 build 디렉토리로 설정