[React JS] 3. 프론트엔드 기본구조 생성하기

[React JS] 3. 프론트엔드 기본구조 생성하기

 

1. Vite를 이용한 리액트 생성

- vite

npm init vite

project name: ./

react 선택

javascript 선택

 

-> 리액트 생성

npm install

-> node_module안에 package.json dependencies들이 들어감

 

폴더구조 생성

components : 공통 컴포넌트

hooks : 커스텀 훅스

layout : header(navBar)   , footer, side bar 

pages : 페이지들

store : redux 상태관리

utils : 여러 컴포넌트에서 사용되는 함수들

 

파일 생성

---

2. ESlint

1) 필요한 모듈 설치

npm install -D vite-plugin-eslint eslint eslint-config-react-app

2) eslint plugin 적용

vite.config.js

import eslint from 'vite-plugin-eslint'

export default definedConfig({
  plugins: [react(), eslint()],
  })

3) eslint 설정파일 생성

src > .eslintrc 파일 (원래 있넹)

 

4) eslint rules 생성

extends에 react-app 넣어주기

---

3. TailWindCSS

- HTM안에서 CSS를 만들수있게 해주는 CSS 프레임워크

- Bootstrap과 비슷하게 m-1, flex와 같이 미리 세팅된 Utility Class를 활용하는 방식으로 HTML에서 스타일링 할 수 있다.

1) 빠른 스타일링 가능

2) class 혹은 id명을 작성하기 위한 고생하지 않아도 됨

3) 유틸리티 클래스가 익숙해지는 시간이 필요하지만 IntelliSense 플러그인으로 익숙해질 수 있음

 

https://tailwindcss.com/ 

 

install Tailwind CSS with Vite

npm install -D postcss autoprefixer tailwind npx tailwindcss init -p

 

---

4. React Router Dom

- React Router Dom을 사용하면 웹 앱에서 동적 라우팅을 구현 가능

- 라우팅이 실행 중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍처와 달리, React Router Dom은 앱 및 플랫폼의 요구사항에 따라 컴포넌트 기반 라우팅 용이하게함

 

Single Page Application (SPA)

- 하나의 index.html 템플릿 파일

- 하나의 템플릿에 자바스크립트를 이용해서 다른 컴포넌트를 이 index.html에 넣으므로 페이지를 변경해주게됨

- 이때 React Router Dom 라이브러리가 새 컴포넌트로 라우팅/탐색을 하고 렌더링하는데 도움을 주게 됨

 

설치

npm install react-router-dom --save

- src > index.js > react-router-dom에서 BrowserRouter가져온 후 다음 루트 구성요소(App 구성 요소)를 그 안에 랩핑

- BrowserRouter : HTML5 history api(pushState, replaceState 및 popstate 이벤트)를 사용하여 UI를 URL과 동기화된 상태로 유지해줌 

 

여러 컴포넌트 생성 및 라우트 정의하기

- Routes 안에 Route들이 들어있음

- 만약 경로를 줬을때 path 경로를 하나씩 여기서 찾아보고 element에 있는 컴포넌트를 보여줌

 

Routes

- 앱에서 생성될 모든 개별 경로에 대한 컨테이너 / 상위 역할

- Route로 생성된 자식 컴포넌트 중에서 매칭되는 첫번째 Route를 렌더링

 

Route

- 단일 경로 만드는데 사용

- 1) path : 원하는 컴포넌트의 URL경로

- 2) element : 경로에 맞게 렌더링되어야하는 컴포넌트 지정

 

<Link/>를 이용해 경로 이동

- a태그와 유사

- 링크를 클릭하면 경로를 살펴보고 해당 경로 이름으로 구성된 요소르 렌더링

 

중첩 라우팅 (Nested Routes)

- 복잡한 레이아웃 코드 사용 가능

- 대부분의  레이아웃은 url 세그먼트에 연결되고 react router는 이를 완전히 수용

- ex) 헤더, 푸터 보여주기가 가능

 

Outlet

- 자식 경로 요소를 렌더링하려면 부모 경로 요소에서 outlet 사용

- 하위 경로가 렌더링 될 때 중첩된 UI 표시가능

- 부모 라우트가 정확히 일치하면 자식 인덱스 라우트를 렌더링하거나 인덱스 라우트가 없으면 렌더링 하지 않음

* 아웃렛을 포함하는 상위 컴포넌트는 하위 컴포넌트에 모두 표시되는듯

 

useNavigate

- 경로 바꿔줌

 

useParams

- :style 문법을 path 경로에 사용했다면 useParams()로 읽을 수 있음

ex) path = "invoices/:invoiceId

- Invoice 컴포넌트 안에서 가져올때 useParams()를 사용해서 가져올 수 있음

 

useLocation

- 이 Hooks는 현재 위치 객체를 반환

- 현재 위치가 변경될 때마다 일부 side effect를 수행하려는 경우에 유용

 

useRoutes

- hooks를 이용해서 경로 만들기도 가능 

 

---

5. CSS 전체 구조 & React Icons

<div class="flex flex-col h-screen justify-between"> <header class="h-10 bg-red-500">Header</header> <main class="mb-auto h-10 bg-green-500">Content</main> <footer class="h-10 bg-blue-500">Footer</footer> </div>

* flex-col : main 축이 위에서 아래로, 수직 축이 왼쪽에서 오른쪽으로 바뀜 (원래랑 반대)

* justify between : 가운데

* mb-auto (margin bottom auto) : 중간에서 위로 올려줌

 

React Icons 다운

npm install react-icons

 

App.jsx

import { Outlet, Route, Routes } from "react-router-dom";
import "./App.css";
import LandingPage from "./pages/LandingPage";
import LoginPage from "./pages/LoginPage";
import RegisterPage from "./pages/RegisterPage";
import Navbar from "./layout/Navbar";
import Footer from "./layout/Footer";

function Layout() {
  return (
    <div className="flex flex-col h-screen justify-between">
      <Navbar />
      <main className="mb-auto w-10/12 max-w-4xl mx-auto">
        <Outlet />
      </main>
      <Footer />
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<LandingPage />} />
        <Route path="/login" element={<LoginPage />} />
        <Route path="/register" element={<RegisterPage />} />
      </Route>
    </Routes>
  );
}

export default App;

Footer > index.jsx

import React from "react";
import { AiOutlineSmile } from "react-icons/ai";

const Footer = () => {
  return (
    <div className="flex h-20 text-lg justify-center items-center">
      All rights reserved.
      <AiOutlineSmile />
    </div>
  );
};

export default Footer;

---

6. Redux 생성

userSlice.js

cd frontend npm install @reduxjs/toolkit react-redux

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

const initialState = {
  userData: {
    id: "",
    email: "",
    name: "",
    role: 0,
    image: "",
  },
  isAuth: false,
  isLoading: false,
  error: "",
};

const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {},
  extraReducers: (builder) => {},
});

export default userSlice.reducer;

store 생성

import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./userSlice";

export const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

store 사용할 App에 Provider 감싸주기 (redux store 저장소에 엑세스해야하는 모든 중첩 구성요소에서 store 사용가능하게 함)

import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./userSlice";

export const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

---

7. Redux-Persist

리덕스 스토어에있는 State들은 페이지를 새로고침하면 초기화됨

하지만 Redux Persist를 이용하면 페이지 새로고침 후에도 상태 유지 가능

cd frontend npm i redux-persist

 

직렬화(serialize) : object 값을 string 값으로 변환 (JSON.stringify)

역직렬화(deserialize) : string값을 object 값으로 변환 (JSON.parse)

 

* reduxmiddleware에서는 들어오는 action 혹은 값이 serializable한 값인지 체크함 (아니면 경고)

* redux persist 이용하면 serializable 하지 않은 function이 들어있기 때문에 option으로 serializableCheck: false로 둠

--> but, redux persist 사용할때만 체크 ignore하는 옵션 권장함 (FLUSH 같은게 action의 타입들임)

import { combineReducers, configureStore } from "@reduxjs/toolkit";
import userReducer from "./userSlice";
import storage from "redux-persist/lib/storage";
import {
  FLUSH,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
  REHYDRATE,
  persistReducer,
  persistStore,
} from "redux-persist";

const rootReducer = combineReducers({
  user: userReducer,
});

const persistConfig = {
  key: "root",
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});

export const persistor = persistStore(store);

* serializable한 것들은 store에 보관안하는게 좋음 원래는

 

<PersistGate>

persist gate로 provider처럼 감싸줘야함

- redux store에서 지속 데이터 사용할 수 있을때까지 앱의 UI 랜더링 지연 가능

- 페이지 리프레시 되면 store 값 초기화됨 -> 그걸 rehydrate해서 local storage값을 가져와서 store에 넣어줌

그런데 이때 그 사이에 UI 랜더링이 되면 값이 저장이 안되있는 상태로 나옴 --> 이걸 지연시키기 위한 장치

ReactDOM.createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </BrowserRouter>
);