React8일차-Login

오늘은 로그인 창을 만들어 보겠습니다.

폴더에서 vscode 창여시고

page에 Login.jsx만들어주세요

그리고 안에 

import { useNavigate } from "react-router-dom";

export default function Home() {
  const navigate = useNavigate();
  function login() {
    console.log("a");
    navigate("/");
  }
  return (
    <div>
      <h1>Login 페이지 입니다.</h1>
      <button onClick={login}>로그인</button>
    </div>
  );
}

작성해주세요

App.js에

import  모여있는곳에

import Login from "./page/Login";

추가

<Routes>내부에<Route path="/login" element={<Login />} />  추가

이제 npm start를 해서 창을 확인해보겠습니다.

http://localhost:3000/login 으로 이동

로그인 버튼을 클릭해보겠습니다.

이렇게 홈화면으로 이동햇습니다. 이렇게 보면 Link태그랑 같은데 왜 따롤 작성하는지 이제 설명하겠습니다.

우선 기능이 완벽히 구현되지 않았지만 로그인 버튼이기때문에 단순히 창만 이동하는 것이 아닙니다.

Link버튼을 이용하면 단순히 창이동만 가능하기때문에 로그인 버튼 구현이 힘듭니다.

그래서 함수 즉 function을 이용해서 창이동을 구현했습니다.그러면 이동+데이터를 보내거나 받는것이 가능해집니다.

이제 작성한 함수를 이해해보도록 하겠습니다.

const navigate = useNavigate();

navigate("/");

<button onClick={login}>로그인</button>

이세개를 이해해보겠습니다.

navigate에 useNavigate(); 를 저장하고

navigate("/");를 이용하여 창을 이동합니다. 

이렇게 함수내용을 간단한데 함수를 어떻게 실행시킬것이냐 인데 이때  onClick={login} 이걸 이용합니다

행동=함수이름  즉 적혀있는 행동을 할면 적혀있는 함수가 작동이 됩니다.

주의할점은 여기서 함수 다음에()를 넣으면 안됩니다.

onClick 즉 클릭하면 login이라는 함수를 실행하겠다는 의미입니다.그럼 이번에는 컴포넌트를  활용하여 코드를 간단하게 줄여보겠습니다.
src/component폴더 만들고 그안에 LoginButton.jsx만들어 주세요

import { useNavigate } from "react-router-dom";

export default function Home() {
  const navigate = useNavigate();
  function login() {
    navigate("/");
  }
  return <button onClick={login}>로그인</button>;
}

이렇게 추가해주세요

그리고 다시 page/Login.jsx로 이동

import LoginButton from "../component/LoginButton";
export default function Home() {
  return (
    <div>
      <h1>Login 페이지 입니다.</h1>
      <LoginButton />
    </div>
  );
}

안에 내용을 이렇게 수정해주세요

이렇게하면 작동이 잘됩니다.  그러면 왜 이렇게 하는지 알아보면

우선 가독성이 좋아집니다. 위에 function이 없어서 이페이지에 어떤것이 있는지 확인이 쉬워져요 그리고 변수 관리가

편해 져요 따로 작성함으로써 변수설정이 더 편리해집니다.

이렇게 컴포넌트를 활용해서 더 편리하게 작성할수 있습니다.

"../component/LoginButton"; 

이경로에 대해 설명하겠습니다. 평소에 .한개만 썼는데 왜 두개 쓰는지 의문일수 있습니다.

점 한개는 자기가있는 폴더에서 찾는 것이고 

점두개는 자신의 폴더를 한번 나가서 찾는것 입니다.

지금 page라는 폴더에있으므로 component폴더를 찾아가기위해서는 한번나가서 src라느 폴더로 가야됩니다.

그래서 이번에는 점 두개를 사용했습니다.

 

오늘은 여기까지하고 내일 또 보겠습니다 ㅎㅎ