React, MySQL 11일차 (로그아웃과 댓글 삭제하기)

PedroTech님의 풀스택 강의 11일 차를 참고했습니다.

 

📌 Logout 버튼과 Logout 함수 생성하기

// ./client/App.js

function App() {
  const [authState, setAuthState] = useState({
    username: "",
    id: 0,
    status: false,
  });

  useEffect(() => {
    axios
      .get("http://localhost:3001/auth/auth", {
        headers: { accessTocken: localStorage.getItem("accessTocken") },
      })
      .then((response) => {
        if (response.data.error) {
          setAuthState({ ...authState, status: false });
        } else {
          setAuthState({
            username: response.data.username,
            id: response.data.id,
            status: true,
          });
        }
      });
  }, []);

  const logout = () => {
    localStorage.removeItem("accessTocken");
    setAuthState({ username: "", id: 0, status: false });
  };

  return (
    <div className="App">
      <AuthContext.Provider value={{ authState, setAuthState }}>
        <BrowserRouter>
          <div className="nav">
            <Link to="/" className="link">
              Home Page
            </Link>
            <Link to="/createpost" className="link">
              Create A Post
            </Link>

            {!authState.status ? (
              <>
                <Link to="/login" className="link">
                  Login
                </Link>
                <Link to="/registration" className="link">
                  Registration
                </Link>
              </>
            ) : (
              // 로그아웃 버튼을 생성합니다.
              <button
                type="button"
                className="logoutBtn"
                onClick={() => {
                  logout();
                }}
              >
                Logout
              </button>
            )}

            <h2 className="username">{authState.username}</h2>
          </div>

          <Routes>...
          </Routes>
        </BrowserRouter>
      </AuthContext.Provider>
    </div>
  );
}

export default App;

변수 해석
1. authState: username은 사용자 이름(로그인ID)이고, id는 User 테이블에 로그인 정보가 저장되었을 때 id값이고 state는 로그인을 한 상태를 나타냈습니다.

함수 해석
1. logout(): localStorage에 저장했던 로그인 정보를 삭제하고, authState를 초기화 해줍니다.

 

 

 

📌 로그인할 때 정보 전달하기

// ./client/pages/Login.js

function Login() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const { setAuthState } = useContext(AuthContext);

  let navigate = useNavigate();

  const login = () => {
    const data = { username: username, password: password };
    axios.post("http://localhost:3001/auth/login", data).then((response) => {
      if (response.data.error) {
        alert(response.data.error);
      } else {
        localStorage.setItem("accessTocken", response.data.tocken);

        // 로그인 상태를 변경해줍니다.
        setAuthState({
          username: response.data.username,
          id: response.data.id,
          status: true,
        });
        
        navigate("/");
      }
    });
  };

  return (...
  );
}

export default Login;

로그인 화면에서 성공적으로 로그인 했을 때 setAuthState를 활용해서 정보를 수정해줍니다.

 

 

 

📌 결과(로그인/로그아웃)

로그인 하기 전 화면입니다.

 

로그인을 성공적으로 했을 때 화면입니다.

 

 

 

📌 댓글 삭제 router 생성하기

// ./server/routes/Comments.js

router.get("/:postId", async (req, res) => {...
});

router.post("/", validateTocken, async (req, res) => {...
});

// 댓글 삭제해주는 router을 생성합니다.
router.delete("/:commentId", validateTocken, async (req, res) => {
  const commentId = req.params.commentId;

  await Comments.destroy({
    where: {
      id: commentId,
    },
  });

  res.json("DELETED SUCCESSFULLY");
});

module.exports = router;

router.delete("/:commentId") 코드 해석
1. router.delete: 해당 router가 호출되면 특정 데이터를 삭제할 수 있습니다.
2. req.params.commentId: commentId라는 파라미터를 가져옵니다.
3. Comments.destory({where: {id: commentId}}): Comments 테이블에서 where(조건)과 맞는 데이터를 삭제해줍니다.
4. res.json(): 처리를 다 했을 때 res.json을 해줘야 삭제했을 때 새로고침이 되어서 적용된 화면을 바로 사용자에게 보여줍니다.

 

 

 

📌 댓글 삭제 버튼과 함수 생성하기

// ./client/src/pages/Post.js

function Post() {
  let { id } = useParams();
  const [comments, setComments] = useState([]);
  const { authState } = useContext(AuthContext);

  useEffect(() => {...
  }, []);

  const addComment = () => {...
  };

  // 댓글 삭제 함수를 생성합니다.
  const deleteComment = (id) => {
    axios
      .delete(`http://localhost:3001/comments/${id}`, {
        headers: { 
          accessTocken: localStorage.getItem("accessTocken")
        },
      })
      .then(() => {
        setComments(
          comments.filter((val) => {
            return val.id !== id;
          })
        );
      });
  };

  return (
    <div className="postPage">
      <div className="leftSide">...
      </div>
      <div className="rightSide">
        <div className="addCommentContainer">...
        </div>
        <div className="listOfComments">
          {comments.map((comment, key) => {
            return (
              <div key={key} className="comment">
                <span>{comment.commentBody}</span>
                <label>Username: {comment.username}</label>
                {authState.username === comment.username
                  &&
                  // 댓글 삭제 버튼을 생성해줍니다.
                ( <button
                    type="button"
                    className="deleteBtn"
                    onClick={() => {
                      deleteComment(comment.id);
                    }}
                  >
                    X
                  </button>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

export default Post;

변수 설명
1. authState: 로그인의 정보를 저장하고 있는 변수입니다.
2. comments: 전체 댓글을 저장하고 있는 변수입니다.


deleteComment 코드 해석
1. axios.delete(`http://localhost:3001/comments/${id}`): 삭제 router을 호출하는 axios입니다.
2. then(): 성공적으로 댓글을 삭제했을 때 삭제한 댓글ID와 다른 댓글들만 comments에 저장합니다.


return 코드 해석
1. authState.username === comment.username && <button></button>:
   현재 로그인한 사용자와 댓글을 작성한 사용자가 같을 때만 삭제 버튼을 보여줍니다.

 

 

 

📌 결과(댓글 삭제)

로그인한 사용자가 작성한 댓글에 삭제 버튼이 보이는 화면

 

댓글 삭제 버튼을 클릭한 후 화면입니다.

 

 

 

📌 느낀 점

댓글 삭제를 하기 위해 처음으로 delete기능을 수행하는 router를 생성해보니 정말 새로웠고 덕분에 DB에서 데이터를 삭제하는 방법에 대해 알게 되어 뿌듯합니다!

또 로그인한 사용자에게만 댓글 삭제 버튼을 보여주는 방법이 생각보다 쉬워서 나중에 사용해야할 때 쉽게 적용할 수 있을 것 같습니다.

덕분에 저의 지식이 늘어나는게 느껴져 성장하는 하루를 보낼 수 있었습니다!

다음에는 또 어떤 기능에 대해 배우게 될지 아주 기대가 되네요..!!