[React] 초기 셋팅, 패키지 설치, json-server 설치(yarn)

yarn 을 통해 create reacte-app 진행 후 하는 것

1. react-app 다운

yarn create reacte-app 폴더명

2. src 폴더 정리, 파일 정리

src 폴더 : App.js, index.js 빼고 삭제
index.js : strictMode 삭제

package.json : dependencies @test, webkit 삭제
node_modules : 통째로 삭제 후 package.json 정리 후 재 다운

yarn install

3. React 패키지 설치

styled-components (Css in Js)

yarn add styled-components

ex)
const body = styled.div`
	color: red;
    `

React router-dom

yarn add react-router-dom

ex)
/Router.js
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Main from "./pages/Main";
import Sub from "./pages/Sub";

// main , sub 페이지로 나누어 렌더링
const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/sub" element={<Sub />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

//Link
import { Link } from "react-router-dom";

<Link to="/sub"> </Link>

Redux

yarn add redux react-redux

ex)
import { useSelector, useDispatch } from "react-redux";

Redux Toolkit, Thunk

설치

yarn add react-redux @reduxjs/toolkit

import

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

json-server

설치
yarn add json-server

실행
yarn json-server --watch db.json --port 3001

ex)
db.json

Axios

yarn add axios

ex)
db.json