[생활코딩] React #1

React #1 개발 환경

 

리액트의 컴포넌트 기능

1. 가독성

복잡한 코드를 가독성 있게 배치

 

2. 재사용성

태그를 붙여넣는 것만으로 재사용

 

3. 유지보수

업데이트가 실시간으로 한 번에 이루어짐

 

 

리액트 개발환경

1. 온라인 플레이그라운드 : 웹에서 바로 개발 가능

2. Add React to a Website : 웹에 리액트 추가

3. React 툴체인 : npm이라는 도구를 이용하여 컴퓨터에 Create React App 설치

* npm : node.js 계의 앱스토어, 플레이스토어와 같은 역할.

* npx : 프로그램을 한 번만 일시적으로, 임시로 설치할 경우 (용량 낭비 최소화, 최신 버전 사용 가능)

 

npm install -g create-react-app

-g : global의 약자로, 컴퓨터 어디에서든 사용 가능하다는 의미

 

 

샘플 웹앱 실행

비주얼 코드 - 보기 - 패널 - 터미널에

npm run start 입력!

 

Local이나 On Your Network 둘 중 하나를 택하여 개발중인 환경으로 접속

 

실행 종료는 Ctrl + C.

 

 

 

JS 코딩하는 법

public 디렉토리 : index.html 이 있는 곳

index.html : id가 root인 곳 안에 컴포넌트가 들어가도록 약속됨.

 

src 디렉토리 : 개발을 할 때 대부분의 파일이 들어감.

 

Create-React-App에서 App이라는 사용자 정의 태그 실제 구현은

index.js의

import App from './App';

파일이므로, App.js 안에 들어있음.

즉, 실제 태그의 내용은

<div className="App">

          <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <p>

          Edit <code>src/App.js</code> and save to reload.

        </p>

        <a

          className="App-link"

          href="https://reactjs.org"

          target="_blank"

          rel="noopener noreferrer"

        >

          Learn React

        </a>

      </header>

      </div>

 

개발할 때 이 부분을 수정해주면 됨.

 

CSS 코딩하는 법

App.css 컴포넌트

App.js 에서

import './App.css';

 

=> App 이라고 하는 컴포넌트 디자인을 그 App 안에 넣는다.

 

배포하는 법

Create-React-App은 개발 환경이 쉽도록 만들어져 있으므로 파일의 무게가 상당히 무겁다.

 

프로덕션 모드의 App을 만들때, 즉 Build할 때 

npm run build

-> build라는 새로운 디렉토리가 생김

build 내의 index.html -> 공백 등과 같은 불필요하게 용량을 차지하는 부분이 삭제된 파일

용량이 훨씬 작다.

 

실제로 서비스할 때는 build 안에 있는 파일을 사용!

 

터미널에 npm install -q serve 입력시

이 컴퓨터 어디에서나 serve라는 명령어로 웹서버를 설치할 수 있음

npx serve는 한 번만 실행시킬 웹서버를 설치

 

npx serve -s build는 serve라는 웹서버를 설치하여 실행시킬 때 build라는 디렉토리를 다큐먼트 루트로 하겠다 -> -s

용량이 작아진다!