[REACT] CRA? ( +CRA 초기세팅)

Create React App

Create React App은 React 배우기에 간편한 환경입니다. 그리고 시작하기에 최고의 방법은 새로운 싱글 페이지 애플리케이션 입니다.

이것은 개발 환경을 설정하고, 최신 JavaScript를 사용하게 해주며, 좋은 개발 경험과 프로덕션 앱 최적화를 해줍니다. Node 8.10 혹은 상위 버전 및 npm 5.6 혹은 상위 버전이 필요합니다. 새로운 프로젝트를 만들기 위해 아래의 명령어를 실행합니다.
(출처:React 공식 홈페이지)

??싱글 페이지 애플리케이션??

싱글 페이지 애플리케이션(Single-page application, SPA)은 하나의 HTML 페이지와 애플리케이션 실행에 필요한 JavaScript와 CSS 같은 모든 자산을 로드하는 애플리케이션입니다. 페이지 또는 후속 페이지의 상호작용은 서버로부터 새로운 페이지를 불러오지 않으므로 페이지가 다시 로드되지 않습니다.

React를 사용하여 싱글 페이지 애플리케이션을 만들 수 있지만, 필수 사항은 아닙니다. 기존 웹사이트 일부분의 상호작용을 개선하기 위하여 React를 사용할 수 있습니다. React로 작성된 코드는 PHP와 같은 서버에 의해 렌더된 마크업 또는 다른 클라이언트사이드 라이브러리와 함께 문제없이 공존할 수 있습니다. 사실, Facebook에서는 위와 같은 방식으로 React를 사용하고 있습니다.
(출처:React 공식 홈페이지)

이렇게 나오면 성공

npx create-react-app 다음 .을 사용하면 해당 경로에 설치가된다.

필요없는 파일과 주석처리가 되어 있는 코드 삭제

React Router

React Router는 SPA의 라우팅 문제를 해결하기 위해서 거의 표준처럼 사용되고 있는 네비게이션 라이브러리이다. React Router를 사용하면 앱에서 발생하는 라우팅이 location나 history와 같은 브라우저 내장 API와 완벽하게 연동된다.
SPA에서 제공하는 다이나믹한 사용자 경험을 그대로 살리면서도 기존 웹사이트에서 가능하던 브라우저 상의 라우팅을 제공할 수 있다.

React Router 설치

React Router는 Web 용과 Native 용이 존재한다. 아래와 같이 Web 용 react-router-dom을 React 애플리케이션 프로젝트에 설치.

src 폴더 안에 Routes.js 파일 생성
Routes.js 파일 세팅

• <Route /> 요청 경로와 렌더링할 컴포넌트 설정한다.
• <Switch /> 하위 라우터 중 하나를 선택한다.
• <Redirect /> 요청 경로를 다른 경로로 리다이렉션 한다. (아래의 경우로 예를 들면, 설정하지 않는 경로 요청 시 "/" Home 경로로 이동한다는 말이다.

import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect,
} from "react-router-dom";
import Home from "./Home/Home";

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Redirect path="*" to="/" />
        </Switch>
      </Router>
    );
  }
}

export default Routes;

• index.js 폴더 안에 render 함수 대상을 App 에서 Routes 로 변경

import React from "react";
import ReactDOM from "react-dom";
import Routes from "./Routes";

ReactDOM.render(
  <React.StrictMode>
    <Routes /> // 이곳! 
  </React.StrictMode>,
  document.getElementById("root")
);

CSS Tool

SASS

• CSS 를 효율적으로 작성할 수 있게 도와주는 프로그램
• npm install --save node-sass

ESLint & Prettier 연동

ESLint 는 코드를 검사하여 잘못된 부분을 짚어주고 Prettier 와 연동할 경우 ESLint 규칙에 맞게 코드를 자동 정리해준다.

디렉토리 생성

• pages : 메인 페이지 컴포넌트 관리
• components : 공통 컴포넌트 관리
• styles
  reset.scss
  common.scss
  media.scss
• images : 이미지 파일 관리