로그인 구현

User controller

local 서버를 돌려야 하기 때문에 빽엔드 분들이 주신 파일을 자체적으로 가동하고 있습니다.

 

로그인

로그인 form에서 UseRef를 통해서 email과 password를 입력받습니다.

 

입력받은 데이터를  fetchLoginApi 비동기 함수를 통해서 POST를 통해서 이메일과 비밀번호를 서버에 전달합니다.

 

만약 정상적으로 진행된다면 React-cookie를 통해서 state에 SetCookie를 통해서 토큰 값을 쿠키에 저장합니다.

 

그 후 useDisptch를 통해서 setUser()를 통해서 action.payload의 담긴 유저의 정보를 구조 분해 할당을 해준 뒤 현재 initialstat에 저장된 값에 업데이트해줍니다. 

const userDispatch = useDispatch()

위의 부분만 진행 했을 때 발생하는 문제 점이 있는데 새로고침이나 다른 페이지가 랜더 됐을 때 redux로 관리하는 user정보가 사라지는 문제가 발생했었습니다.

 

그래서 setUser함수를 호출 할 때 localstorage에도 동일하게 setItem()을 통해서 'USER'라는 key값으로 JSON형태로 바꾼 user데이터를 저장하였습니다.

 

또한 initialState 는 localstorage에서 getItem('USER")를 통해서 가져온 값이 있다면 파싱 해서 대입해 주지만 만약에 없을 경우 nullish coalescing 연산자를 통해서 오른쪽에 값을 대입해줍니다.

 

그렇게 되면 모든 페이지에서 user정보를 호출할 수 있습니다.