react 시작하기

리액트 공식문서 : https://react.dev/

setting

create-react-app : 리액트로 앱 개발을 할 때, 여러 개발환경과 도구를 한번에 제공해준다.
공식문서 : https://github.com/facebook/create-react-app

사용방법

1.npx create-react-app my-app : react를 한번 설치하고 사용 후엔 지운다. 매번 설치를 다시 하기 때문에 최신버전을 유지할 수 있다.
2.npm create-react-app : npm으로 create-react-app을 설치한다.

간편하게 두번째 방법으로 한다.

1. create-react-app 설치
   터미널에서 npm inatall -g create-react-app 입력

2. 버전확인(설치되었는지 확인용)

   터미널에서 create-react-app -V 입력
   버전이 뜨면 제대로 설치된 것

3. create-react-app으로 react 시작하기
   터미널에서 작업폴더로 이동
   터미널에서 create-react-app . 입력
   개발에 필요한 것들이 설치된다.

4. react앱 실행하기
   터미널(작업폴더)에서 npm run start를 입력
   터미널에서 알려준 주소로 들어가면 샘플 페이지를 볼 수 있다.

폴더 구조

📁react-app
	┖📁public : 페이지 구현
    	┖index.html : 시작페이지 구현
    ┖📁src : 컴포넌트 등 필요 소스 저장
    	┖App.js : App 컴포넌트
        ┖index.js : 렌더링

함수형 vs 클래스형 컴포넌트

컴포넌트는 함수형, 클래스형 두가지로 생성 가능하다. 여기서는 클래스형으로 컴포넌트를 만든다.

함수형

function App() {
  return (
    <div className="App">
    </div>
  );
}

클래스형

import { Component } from 'react';

class App extends Component{
  render(){
    return(
      <div className="App">
      </div>
    )
  }
}

빌드하기

현재 리액트 앱은 각종 편의도구를 포함하여 앱의 사이즈가 크다.
터미널에서 npm run start 대신 npm run build를 입력하면 필요없는 부분을 지우고 deploy할 부분만 남긴 build 폴더를 생성한다. 이 폴더 내의 파일들을 이용하여 배포하면 된다.
npx serve -s build로 간단하게 서버를 실행시켜 볼 수 있다.