로그인 + 게시판(4: 메인 화면)

Main.js

'연습용 웹사이트' 헤더(고정)로 설정한 부분이다. 

로그인 상태이면 해당 사용자에 ID값과 로그아웃버튼을 만들었다. 반대로 로그아웃 상태이면 비로그인이라고 설정하였고 로그인버튼을 만들었다. 

Main.js  useEffect()

 

리액트 훅인 useEffect를 사용하였다. 두번째 인자로 빈 배열을 넣어 처음 렌더링되었을때 실행되게 구현하였다. 

sessionStorage.getItem("키")를 입력하면 세션에 저장된 키값을 불러올 수 있는데 이전에 로그인하면서 sessionStorage.setItem 설정하였을때 입력하였던 키 값으로 불러올 수 있다. 이 값이 null 값이면 비로그인으로 설정하고 그렇지 않은 경우 로그인 상태로 구현하였다. 

이렇게 구현할 경우 로그아웃할때는 확실하게 세션에 저장된 값을 삭제해야한다.  

Main.js  change()

현재 로그아웃 버튼 일 경우 sessionStroage.removeItem("키")으로 저장된 값을 삭제하였다. 

 

Main.js  boardWrite()

게시글 작성의 경우에는 세션의 값이 없으면(비로그인) 이용이 불가능하게 구현하였고 로그인 상태에서는 게시글 작성으로 넘어갈 수 있게 만들었다. 

Main.js  boardRead()

게시글 조회의 경우(boardRead())는 간단하게 다음과 같이 만들었다.

 

그렇다면 다음에는 게시글 작성과 게시글 조회는 어떠한 구성인지 살펴보도록 하자