React.js란? (개념, 설치 및 설정)

// React

- 웹 또는 네이티브 사용자 인터페이스를 위한 라이브러리

- 사용자 인터페이스 구축을 위한 자바스크립트  라이브러리

- 빠른 update를 위해 Virtual DOM 을 사용한다.

- 컴포넌트의 조합으로 개발한다.

- 재사용성을 높여 개발 기간을 단축할 수 있고 유지보수가 용이하다.

- 오픈소스 (https://github.com/facebook/react) 

GitHub - facebook/react: The library for web and native user interfaces.

---

// HTML 에서 React 사용하기

- 개발용 CDN

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

- 배포용 CDN

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

---

- 컴포넌트 삽입

<div id="root"></div>

- 컴포넌트 정의 예시(자세한 개념은 추후 기록 예정)

function MyButton(props) {
  const [isClicked, setIsClicked] = React.useState(false);

  return React.createElement(
    'button',
    { onClick: () => setIsClicked(true) },
    isClicked ? 'Clicked!' : 'Click here!',
  );
}

const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton), domContainer);

---

// create-react-app(CRA) 사용하기

- Node.js v14.0.0 이상, npm v6.14.0 이상이어야 사용할 수 있다.

- 모듈 번들러로 Webpack을 사용한다.

- npx명령어로 실행할 수 있다.
   ~ npx (execute npm package binaries)  : npm 패키지 설치 후 바로 실행해주는 명령어

npx create-react-app <프로젝트명>

- 서버를 실행하여 화면을 볼 수 있다.

npm start

---

// Vite

- 프론트엔드  빌드 도구

- 모듈 번들러로 ESbuild를 사용하기 때문에 매우 빠르다.

- 공식문서: https://vitejs.dev/guide/

Vite

1. 프로젝트 생성

npm create vite@latest 프로젝트명

생성 명령어 입력 후 원하는 대로 설정할 수 있다.

 2. npm install 하기(package.json)

3. 실행하기

npm run dev