티스토리 뷰
App.js의 구조는 다음과 같다.
react-router-dom^5.2.0을 설치하여 {BrowserRouter, Route, Switch}를 import 하여 사용하였다. Switch가 6버전 부터는 Routes로 바뀌어 아직 익숙한 다운 버전을 받아 사용하였다.
Header 컴포넌트는 헤더에 고정하였고 나머지 컴포넌트들을 해당 url에 따라 다른 컴포넌트들을 보여주도록 설정하였다.
App.js를 제외하고 컴포넌트들의 총 갯수는 9개로 헤더에 고정할 컴포넌트 하나와 메인 컴포넌트(Main), 로그인(Login), 회원가입(AddLogin), ID/PW찾기(LoginFind), 게시글작성(BoardWrite), 게시글조회(BoardRead), 상세조회(BoardDetail) 컴포넌트로 이루어진다.
게시판 기능과 메인화면이 로그인 기능에 이어서 sessionStorage를 사용하여 로그인 되어있는지 확인하기 때문에 로그인 기능부터 설명하도록 하겠다.
로그인에는 4개의 버튼이있는데 회원가입 버튼과 ID/PW찾기 버튼과 메인 버튼은 react-router-dom의 Link를 이용하였고 확인 버튼은 DB에 있는 정보와 비교하여 모두 일치하면 로그인되어 메인화면으로 넘어갈 수 있도록 구현하였다.
로직은 다음과 같다. 리액트 훅을 사용하여 입력받는 값인 ID와 PW값을 useState()를 사용하여 입력받는 값으로 변경해주었다. 확인 버튼을 누르면 fetch함수를 사용하여 AJAX 통신을 하게 되는데 해당 url에 get 요청하여 값을 받아와 for문을 사용하여 ID를 비교하고 같다면 PW를 비교한 후 sessionStorage.setItem("key",value)로 세션에 아이디값을 저장하게 된다. history.push를 통해 해당 url로 이동하게 되는데 처음 세션을 몰랐을 때 state로 값을 전달하여 처음에는 로그인 상태를 확인하였다. 이 방법으로 다른 url로 이동할때 값(인자)을 보낼 수 있으니 알아두도록 하자.
그리고 for문이 끝까지 돌 때 까지 ID값이 다르면 로그인 실패 창을 띄우는데 비동기적 통신에 따라 코드의 위치에 따라 alert가 중복으로 호출될 수 있으니 주의해서 코딩하도록 하자. 필자처럼 익숙하지 않다면 주기적으로 확인하면서 코딩하는 것을 추천한다.
server.js에는 '/api/login' 으로 get 요청이 들어온다면 addlogin이라는 테이블에 있는 모든 값을 가져올 수 있도록 구현하였다.
다음에는 회원가입 기능을 확인해보도록 하자.
'Node.js, React > 로그인 + 게시판(node.js, mysql)' 카테고리의 다른 글
| 로그인 + 게시판(5: 게시글 작성) (0) | 2022.01.23 |
|---|---|
| 로그인 + 게시판(4: 메인 화면) (0) | 2022.01.23 |
| 로그인 + 게시판(3: ID/PW 찾기) (0) | 2022.01.23 |
| 로그인 + 게시판(3: 회원 가입) (0) | 2022.01.23 |
| 로그인 + 게시판(1: 배경 및 기능 설명) (0) | 2022.01.23 |