[React] [CRA] 프로그램 세팅

<기본 react 설정>

1.설치

-yarn create react-app 파일명

-절대경로 지정 : [jsconfig.json]

{
	"compilerOptions": {
		"baseUrl": "src"
	},
	"include": ["src"]
}

-yarn add redux react-redux

-yarn add react-router-dom (페이지)

-yarn add @reduxjs/toolkit (RTK 쓸 때만)

2.폴더 설정

❶configStore.js  (얘를 해야 index.js에서 store import 가능)

import { createStore } from "redux";
import { combineReducers } from "redux";
import { auth } from "redux/modules/auth";
import comments from "redux/modules/comments";
import contents from "redux/modules/contents";
import myProfileReducer from "redux/modules/myprofile";

const rootReducer = combineReducers({
  auth,
  comments: comments,
  contents: contents,
  myprofile: myProfileReducer,
});

const store = createStore(rootReducer);

export default store;

 

❷index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "App";

import { Provider } from "react-redux";
import store from "redux/config/configStore"; 👈

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <>
    <Provider store={store}>
      <App />
    </Provider>
  </>
);

❸app.jsx + Router.js

import { BrowserRouter, Route, Routes } from "react-router-dom";
//
import Main from "pages/Main";
import ContentsForm from "pages/ContentsForm";
import Detail from "pages/Detail";
import MyProfile from "pages/MyProfile";
import Header from "components/ui/Header";

const Router = () => {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/contentsForm" element={<ContentsForm />} />
        <Route path="/detail/:contentsId" element={<Detail />} />
        <Route path="/profile/:userId" element={<MyProfile />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

- 그 후에 component, 리덕스 module파일 같이 작업

---

<비동기통신 과정>

- json-server 설치 (+dB파일 생성) : yarn json-server --watch db.json --port 4000

- yarn add axios

-yarn add react-query (리액트 쿼리 쓸때만)