React Project

• 쇼핑몰 사이트 프로젝트

주요 기능

1. Firebase 로그인
2. 장바구니
3. 마이페이지 (주문 히스토리)
4. 결제
5. 로그아웃

---

프로젝트 생성 (vite)

$ npm init vite

$ npm install

필요 패키지

• axios
• react-router-dom
• react-redux
• @reduxjs/toolkit
• sass
• react-icons
• react-loading-skeleton

폴더 구조

src
├─ assets
├─ components
├─ pages
├─ hooks
└─ store

---

Router 설정

import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Layout from './components/layout/Layout';
import HomePage from './pages/HomePage';
import DetailPage from './pages/DetailPage';
import CartPage from './pages/CartPage';
import LoginPage from './pages/LoginPage';
import RegisterPage from './pages/RegisterPage';
import OrderPage from './pages/OrderPage';
import NotFoundPage from './pages/NotFoundPage';

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<HomePage />} />
          <Route path="product/:id" element={<DetailPage />} />
          <Route path="cart" element={<CartPage />} />
          <Route path="login" element={<LoginPage />} />
          <Route path="register" element={<RegisterPage />} />
          <Route path="order" element={<OrderPage />} />
          <Route path="*" element={<NotFoundPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

• 공통 레이아웃으로 사용되는 Layout 컴포넌트에는 반드시 Outlet을 넣어줘야 함.
  (children을 보여주기 위해)

---

SASS

• 스타일링 관리에 용이한 CSS 확장 언어.
• SASS -> (전처리) -> CSS -> 웹사이트

---

Layout

import styles from './Layout.module.scss';
import { Outlet } from 'react-router-dom';
import Header from '../header/Header';
import Footer from '../footer/Footer';

const Layout = () => {
  return (
    <div className={styles.layout}>
      <Header />
      <Outlet />
      <Footer />
    </div>
  );
};

export default Layout;

Header

import styles from './Header.module.scss';
import { Link } from 'react-router-dom';
import Nav from './nav/Nav';

const Header = () => {
  return (
    <div className={styles.header}>
      <div className="container">
        <div className={styles.header_wrapper}>
          <div className={styles.header_logo}>
            <Link to={'/'}>
              <h2>Shop</h2>
            </Link>
          </div>
          <Nav />
        </div>
      </div>
    </div>
  );
};

export default Header;

---

React Hook Form

• https://react-hook-form.com/

• 리렌더링 최소화
• 빠른 속도
• 최소한의 코드로 높은 효율

사용 예제

1. register = input에 이름 등록함. {...register("name", validCheckObject)}
2. handleSubmit = form onSubmit에 등록
3. formState.errors = 에러 (유효성 검사) -> errors.{name} 과 같이 나타남

const { register, handleSubmit, formState: {errors}, reset } = useForm();

const onSubmit = ({email, password}) => {
  console.log(email, password);
}

// 유효성 검사
const userEmail = {
  required: "필수 값입니다.",
  minLength: {
	value: 4,
    message: "최소 4자입니다."
  },
  pattern: {
    value: /^~~~~~~$/gm,
    message: '최소 8자, 영문 1자, 숫자 1자.'
  }
}

const userPassword = {
   // 동일
}

<form onSubmit={handleSubmit}>
  <input {...register("email", userEmail} />
  <span>{errors?.email && errors.email.message}</span>
  <input {...register("password", userPassword} />
  <span>{errors.password && errors.password.message}</span>
</form>

• 블러 이벤트 발생 시 유효성 검사 체크하기

const { register, handleSubmit, formState: {errors}, reset } = useForm({
  mode: 'onBlur'
});

-> onBlur, onChange, onSubmit 3개가 있다. (기본값: onSubmit)