프로젝트 초기 세팅

1. CRA(Create-React-App)

1. 터미널을 켜고 명령어 cd를 이용하여 원하는 경로로 이동
2. 명령어 mkdir로 폴더를 만든 후
   npm install react-router-dom --save
   라우터를 사용하려면 import해야 할 것이 있다.
3. npx create-react-app 프로젝트명으로 react app을 만들어 준다.

2. 폴더 구조

1.불필요한 파일들을 지우고

• App.css

• App.js

• index.js
  파일만 남겨 둔다.
  
  

• componenets (각각 나눠진 작은 컴포넌트들을 모아 놓는 곳)

• pages (컴포넌트들의 부모가 되는 최상위 컴포넌트를 모아 놓는 곳 - ex. main.js / login.js)

• styles
  폴더를 만들어 관리 한다.

Images
Styles - 공통으로 사용
Component - 공통으로 사용

• 폴더를 구분할 때는 소문자로 쓰는 것이 좋지만, 프로젝트를 할 때 대문자로 사용할 것인지 약속해서 사용하기도 한다.

3. 필요한 라이브러리 설치

Router

📌 가장 초기 세팅에 사용되는 라이브러리. 이 전에는 index.js에서 App.js를 사용하며 한 컴포넌트만 보여줄 수 있었는데, Router를 사용하여 모든 Component에 쉽게 이동 할 수 있다.
Routes.js가 App.js를 대신한다.

(1) npm install react-router-dom --save

• react 프로젝트를 설치한 파일에 npm install react-router-dom --save를 이용하여 Router를 설치

(2)react-router-dom

• 브라우저에서 사용되는 리액트 라우터

src 폴더 안에 index.js 파일에 Routes.js파일을 생성한 후 Routes 컴포넌트를 만들어 연결

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './Routes';

ReactDOM.render(
  <React.StrictMode>
    <Routes />
  </React.StrictMode>,
  document.getElementById('root')
);

📌 ReactDoM.render
컴포넌트를 페이지에 렌더링 하는 역할을 하며, react-dom 모듈을 import 해야 사용 할 수 있다. 이 함수의 첫번째 파라미터에는 페이지에 렌더링 할 내용을 JSX형태로 작성하고, 두번째 파라미터에는 해당 JSX를 렌더링 할 document 내부요소를 설정한다.

// Routes.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import App from './App';
import SignUp from './SignUp';

const Routes = () => {
    return(
        <Router>
            <Switch>
                <Route exact path="/" component={App} />
              	// App 컴포넌트와 연결
                <Route path="/signup" component={SignUp} />
              	// SignUp 컴포넌트 연결
            </Switch>
        </Router>
    );
}

export default Routes;

exact path 정확한 경로일 때만 사용한다.
그 이유는 모든 경로에 /가 들어가기 때문이다.
예를 들어 그냥 path를 사용하면 모든 페이지의 경로를 입력할 때 항상 render 되기 때문이다.

(3) npm install node-sass --save
css 대신 sass를 설치 해준다.