[정리]21/08/20~21 React (1)

React

페이스북에서 만든 UI 라이브러리

 

페이스북 페이지의 HTML은 매우 복잡한 계층구조를 가진다.

이 구조를 간결하게 표현할 수 있도록 해주는 게 React의 컴포넌트이다.

 

       React에서의 컴포넌트란?  

      사용자정의 태그를 만들어서 복잡한 태그들을 불러온다.

      React에서는 이 사용자정의 태그를 '컴포넌트'라고 한다.

       특징  

      컴포넌트는 필요한 여러 군데에서 사용할 수 있다.

        --> 재사용성이 있다.

      컴포넌트만 수정하면 그것이 사용된 곳의 모든 내용이 수정된다.

        --> 유지보수가 쉬워짐

 

( + SPA로서의 장점

페이지를 rerendering하지 않고 변하는 state를 감지하여 페이지의 변화를 나타낸다. )

 

 * 렌더링: 서버로부터 HTML파일을 다운로드 받아 브라우저에 뿌려주는 과정

 

---

 

 

배우는 순서

개발환경 세팅 -> 코딩 -> 실행 -> DEPLOY

 

개발환경 세팅

(npm필요)

create-react-app설치하기 :  react개발을 위한 가장 최소한의 개발환경을 구축해준다.

(-g 설정으로 설치할 때 안되면 -------> sudo npm install create-react-app)

 

* npm과 npx의 차이

npm: nodejs기술을 사용해 만들어진 프로그램을 설치해주는 패키지 매니저 (node.js계의 앱스토어라고 이해하면 쉽다.)

npx: 프로그램을 임시로 설치해서 사용하게 해준다. (항상 최신버전 앱을 사용하게 된다, 컴퓨터의 공간을 낭비하지 않는다.)

 

개발중인 앱의 환경을 확인하자

npm (run) start

 

 

JS코딩하는법

src폴더에 필요한 소스들을 넣는다.

index.html, index.css, index.js

App.js, App.css

 

index.html

<div id="root">
	여기에 작성
</div>

index.js

ReactDOM.render(
  <React.StrictMode>
    <App />  
  </React.StrictMode>,
  document.getElementById('root')
);
// <App/>: 컴포넌트

App.js

import React, {Component} from 'react';
//클래스 형식
class App extends Component {
  render() {
  return (
    <div className="App">
     안녕, React?
    </div>
  );
}
}

==>화면에 '안녕,React?'가 출력된다.

 

create react 에서 css를 코딩하는 방법

import './파일명.css';

 

DEPLOY

npm run build - > build디렉토리를 만든다.

 - 서비스 할 때에는 build안에 있는 파일을 쓴다.

 - 웹서버의 document루트에는 build폴더 안의 파일들을 위치시켜야 한다.

--->실서버 환경 완성

 

npm install -g serve : 컴퓨터 전역에서(-g) serve라는 명령어를 통해 web server를 설치할 수 있다.

npx serve -s build: server를 한 번만 실행시킴

(의미: serve라는 웹서버를 다운로드 받아서

실행시킬 때 document의 루트를 build루트로 하겠다. )

 

 

 

 

 

 

 

 

 

본 포스팅은 생활코딩 React강의 내용을 바탕으로 작성되었습니다.