React란?

✍️ 정의

• React는 javascript를 쉽고, 효율적으로 사용할 수 있도록 Facebook에서 만든 도구이다.
• Component라는 부품을 만들어 큰 프로젝트에서 페이지를 만들 때, 갈아끼우는 방식으로 개발할 수 있다.
• 대표적인 서비스로 페이스북, 인스타그램, 에어비앤비 등이 있다.

❓ React를 배워야하는 이유

대표적인 프론트엔트 도구로 React, Angular, Vue 가 있다. 이중에서 React를 배워야하는 이유는 다음과 같다.

• 가장 많은 사용자 수
  • npm은 javascript로 만들어진 도구들을 다운로드 받을 수 있는 사이트인데, 이런 npm trends라는 npm에서 다운로드된 도구들의 다운로드 경향을 보여주는 사이트에서 다운로드 수가 가장 많다.

• React 하나를 배우면 웹, 안드로이드, IOS, 데스크톱을 모두 만들 수 있다.
  • React는 웹을 만드는 도구이다.
    • ex) 페이스북, 인스타그램, 트위터, 넷플릭스
  • React-Native는 모바일 앱을 만드는 도구이다.
    • 크로스 플랫폼으로 하나를 만들어서, 안드로이드와 IOS 두 곳에 모두 배포할 수 있다.
    • ex) 페이스북, 인스타그램, 에어비앤비, 우버이치
  • Electron은 React로 만들어진 웹사이트를 한글, PPT와 같은 데스크톱 프로그램에서 실행되도록 하는 도구이다.
    • ex) Slack

🔎 설치 방법

OS에 설치할 것들

• Node.js - LTS
  • Node.js 설치시, npm은 자동 설치된다.
• Yarn 설치
  • sudo npm install -g yarn

프로젝트 폴더에 설치할 것들

• 폴더에 Next.js 프로젝트를 설치한다.
  • Next.js를 설치하면 React.js는 자동으로 설치된다.
  • npx create-next-app
• 설치한 프로젝트 폴더에 설치할 것들
  • Emtion 설치
    • yarn add @emotion/react
    • yarn add @emotion/styled
  • Apollo-Client와 Graphql 설치
    • yarn add @apollo/client graphql
  • Ant-Design 설치
    • yarn add antd
  • Material-UI 설치
    • yarn add @material-ui/core
  • Axios 설치
    • yarn add axios

📌 React에서 Javascript 불러오기

// index.js
import { apple, banana } from 'game.js'

// game.js
export let apple = 10
export const banana = 3

📌 React에서 CSS 불러오기

import styles from '../styles/Home.module.css'

📌 React 실행 방법

// package.json
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

• 개발의 경우, yarn dev 명령어를 실행하면 된다. ( open with live server )