[노드, 리액트 기초 | React] #25. 로그아웃 기능 구현

로그아웃 기능은 이미 logout api를 다 만들어두었기 때문에 아주 쉽다!

🔓 로그아웃 기능 구현

components/view/LandingPage/LandingPage.js 수정

function LandingPage(props) {
  const onClickHandler = () => {
    axios.get(`/api/users/logout`).then((response) => {
      if (response.data.success) {
        navigate("/login");
      } else {
        alert("로그아웃에 실패했습니다");
      }
    });
  };

  return (
    <div style={{ display: "flex", justifyContent: "center", alignItems: "center", width: "100%", height: "100vh" }}>
      <h2>시작페이지</h2>

      <button onClick={onClickHandler}>로그아웃</button>
    </div>
  );
}

1. 로그아웃 버튼 생성

2. 버튼에 onClick event을 부여하기 위해 onClickHandler function 생성

3. onClickHandler에서 logout api를 get 해온 뒤 로그아웃이 성공하면 loginPage로 보내줌

지금 생각났는데 로그아웃 했을 시에 로그인 페이지로 보내주는 것 보다는 버튼의 innerText를 로그인으로 바꾸어주는게 좋겠다.👍

➕ 참고

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 를 공부하며 작성한 글입니다.