109일차 - 프로젝트 4일차

프로젝트 4일차 작업

우선 새로운 페이지를 만들기 위해서 라우팅 작업을 했다.

npm install react-router-dom

라우팅 준비를 하고.

import { BrowserRouter, Route, Switch } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header />
        <Switch>
          <Route exact path="/">
            <MainPage />
          </Route>
          <Route path="/signup">
            <SignUpPage />
          </Route>
        </Switch>
        <Footer />
      </div>
    </BrowserRouter>
  );
}

Header와 Footer 컴포넌트는 모든 페이지에서 유지가 됨으로 라우팅 밖에다 놓고, 지금까지 만든 MainPage와 SignUpPage를 작업했다.

Styled - Component 오류 해결

Styled - Component에 계속 경고 메시지가 떴지만 문제가 없어서 해결을 하지 않고 있었다.
useState를 사용해서 state를 관리하려고 했는데, state에 변화가 생길때 마다 리랜더링이 되었다.
이유를 찾아보니 styled Component를 컴포넌트 함수안에다가 선언을 해서 이러한 오류가 발생한다고 한다.
그래서 Styled - Component를 함수 밖에다 정의했더니 오류가 생기지 않았다.

SignUpPage, Footer

오늘은 거의 SignUpPage와 Footer를 만드는데 시간을 썼다.
작업 결과는 아래와 같다.

비밀번호와 비밀번호 확인이 일치하지 않을경우와 모든 내용을 입력하지 않았을 때 나오는 에러 메시지도 추가로 작성했다.
각각의 Input에 onChange 이벤트를 우선 주고,
메시지를 띄우는 방법은 아래와 같이 작성하였다.

<Section>
  <LabelText>이메일</LabelText>
    <InputBox
    type="email"
    placeholder="email을 입력하세요"
    onChange={handleInputValue("email")}
    />
</Section>

const [userInfo, setUserInfo] = useState({
    email: "",
    password: "",
    passwordCheck: "",
    full_name: "",
    nick_name: "",
    gender: "",
    mobile: "",
  });

const [errMessage, setErrMessage] = useState("");

const handleInputValue = key => e => {
  setUserInfo({ ...userInfo, [key]: e.target.value });
};

const handleSignUp = () => {
  const {
    email,
    password,
    passwordCheck,
    full_name,
    nick_name,
    gender,
    mobile,
  } = userInfo;

  if (password !== passwordCheck) {
    setErrMessage("비밀번호와 비밀번호 확인이 일치하지 않습니다");
    return;
  }

  if (
    !email ||
    !password ||
    !passwordCheck ||
    !full_name ||
    !nick_name ||
    !gender ||
    !mobile
  ) {
    setErrMessage("모든 항목을 기입해 주세요");
    return;
  }
};