[리액트] 간단한 로그인 구현하기(Context, LocalStorage)

리액트를 이용하여(공부X) 개인 프로젝트를 진행하는데 로그인 기능을 구현해야 했습니다.

복잡한 로그인이 아닌 단순히 로그인 버튼을 누르면 로그인을 성공시키는 구조입니다.

요구 사항은 아래와 같습니다.

 

• 헤더에 로그인 정보 표시
• 로그인 버튼을 누르면 바로 로그인이 됨
• 로그인되면 로그아웃 버튼으로 변경이 됨
• 로그아웃 버튼을 누르면 바로 로그아웃이 됨
• 새로 고침을 해도 로그인 정보가 남아 있음

헤더의 로그인 버튼

 

로그인 정보는 Context API를 이용하여 각 Component에서 유저 정보에 접근 가능하도록 했습니다.

로그인을 위한 검증 및 유저 정보는 나중에 정의하기로 하여, 현재 시각을 간단하게 버튼에 넣기로 합니다.

 

새로 고침을 해도 로그인 정보가 유지되려면 LocalStorage에 로그인 정보를 저장합니다.

페이지가 이동하거나 새로 고침을 해도 LocalStorage에서 로그인 정보를 가져와 로그인 처리를 하게 됩니다.

---

Context 정의

Context에는 유저 정보, 로그인 / 로그아웃 함수 구현했습니다.

---

로그인 버튼 구현

 

로그인 버튼 클릭 후 버튼 상태

LocalStorage에 값이 들어감

로그인 버튼을 누르면 2가지 동작을 수행합니다.

1. (현재 시각)을 유저 정보로 하여 Context를 통해 로그인 시도
2. LocalStorage에 유저 정보 저장

 

로그아웃 버튼을 누르면 2가지 동작을 수행합니다.

1. Context를 통해 로그아웃
2. LocalStorage의 유저 정보 삭제