React + Spring Boot + MySQL (14)

폴더구조 리팩토링

프론트엔드 폴더구조를 변경하였다

npm 사용하는 경우

npm i react-router-dom

yarn을 사용하는 경우

yarn add react-router-dom

1. App.tsx

import "./App.css";
import MainPage from "./pages/MainPage";
import Router from "./router";
import { BrowserRouter } from "react-router-dom";

const App = () => {
  return (
    <>
      <BrowserRouter>
        <Router />
      </BrowserRouter>
    </>
  );
};

export default App;

2. src/pages/MainPage/index.tsx

import React from "react";

const MainPage = () => {
  return <div>MainPage입니다.</div>;
};

export default MainPage;

3. src/pages/SignUpPage/index.tsx

import React from "react";
import SignUp from "../../components/SignUp";

export default function SignUpPage() {
  return (
    <div>
      <SignUp />
    </div>
  );
}

4.src/components/SignUp/index.tsx

import axios from "axios";
import React, { useState } from "react";
import * as _ from "./style";

const SignUp = () => {
  const [userEmail, setUserEmail] = useState<string>("");
  const [userPassword, setUserPassword] = useState<string>("");
  const [userPasswordCheck, setUserPasswordCheck] = useState<string>("");
  const [userNickname, setUserNickname] = useState<string>("");
  const [userPhoneNumber, setUserPhoneNumber] = useState<string>("");
  const [userAddress, setUserAddress] = useState<string>("");
  const [userAddressDetail, setUserAddressDetail] = useState<string>("");

  const handleSignUp = () => {
    const data = {
      userEmail,
      userPassword,
      userPasswordCheck,
      userNickname,
      userPhoneNumber,
      userAddress,
      userAddressDetail,
    };

    axios
      .post("http://localhost:4000/api/auth/signUp", data)
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(`${err} :: 회원가입 실패`);
      });
  };

  return (
    <_.SignUpContainer>
      <_.SignUpForm>
        <_.SignUpInput
          type="text"
          name="email"
          placeholder="이메일을 입력해주세요"
          onChange={(e) => {
            setUserEmail(e.target.value);
          }}
        />
        <_.SignUpInput
          type="password"
          name="password"
          placeholder="비밀번호를 입력해주세요"
          onChange={(e) => {
            setUserPassword(e.target.value);
          }}
        />
        <_.SignUpInput
          type="password"
          name="passwordCheck"
          placeholder="비밀번호를 확인해주세요"
          onChange={(e) => {
            setUserPasswordCheck(e.target.value);
          }}
        />
        <_.SignUpInput
          type="text"
          name="nickname"
          placeholder="닉네임을 입력해주세요"
          onChange={(e) => {
            setUserNickname(e.target.value);
          }}
        />
        <_.SignUpInput
          type="text"
          name="phoneNumber"
          placeholder="휴대폰번호를 입력해주세요"
          onChange={(e) => {
            setUserPhoneNumber(e.target.value);
          }}
        />
        <_.SignUpInput
          type="text"
          name="address"
          placeholder="주소를 입력해주세요"
          onChange={(e) => {
            setUserAddress(e.target.value);
          }}
        />
        <_.SignUpInput
          type="text"
          name="addressDetail"
          placeholder="상세주소를 입력해주세요"
          onChange={(e) => {
            setUserAddressDetail(e.target.value);
          }}
        />
        <_.SignUpButton onClick={() => handleSignUp()}>회원가입</_.SignUpButton>
      </_.SignUpForm>
    </_.SignUpContainer>
  );
};

export default SignUp;

5. src/components/SignUp/style.ts

import styled from "styled-components";

export const SignUpContainer = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
`;

export const SignUpForm = styled.form`
  width: 500px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 150px;
`;

export const SignUpInput = styled.input`
  width: 80%;
  height: 40px;
  border: 0.5px solid gray;
  margin-top: 20px;
`;

export const SignUpButton = styled.button`
  width: 80px;
  height: 40px;
  border: 0.5px solid gray;
  margin-bottom: 20px;
  background-color: darkblue;
  color: white;
  margin-top: 40px;
`;

6. src/router/index.tsx

import React from "react";
import MainPage from "../pages/MainPage";
import { Routes as Switch, Route } from "react-router-dom";
import SignUpPage from "../pages/SignUpPage";

export default function Router() {
  return (
    <div>
      <Switch>
        <Route path="/" element={<MainPage />} />
        <Route path="/signup" element={<SignUpPage />} />
      </Switch>
    </div>
  );
}

페이지와 컴포넌트를 분리하여 코드를 작성하였고 라우팅을 처리하여 페이지를 분리시켰다.