[리액트 X 타입스크립트] Redux-toolkit으로 간단한 회원가입 및 로그인 구현하기

안녕하세요. 이번 시간에는 간단하게 Redux-toolkit으로 간단한 회원가입하고 로그인을 구현해보겠습니다.

비동기 통신은 가짜 json api를 구성하여 만들어보겠습니다.

1. src안에 원하는 폴더명 생성하고 user.json을 만들고 아래와 같이 임시 user json 데이터를 만들어줍니다.

{
  "user": [
    {
      "id": "abc",
      "password": "abc1"
    }
  ]
}

2. 터미널 경로를 해당 폴더 안으로 설정하여줍니다.
3. 그리고 npx json-server ./user.json --watch --port 8888 명령어를 입력해줍니다. -> http://localhost:8888/user에 접근시 정상적으로 아래 사진이 뜨면 성공적으로 된겁니다.

4. 간단한게 회원가입과 로그인 페이지를 만들어줍니다. (전 material ui를 이용하여 만들어줬습니다)

5. id와 password를 받는 user State를 만들어주기 전에 아래와 같이 interface를 만들어줍니다.

interface User {
  id: string;
  password: string;
}

---

6. User interface를 제너릭으로 설정하여 user State를 만들어줍니다.
   

---

7. input change 발생시 setUser를 실행해 user State를 업데이트 해줍니다.
   -> change 이벤트의 매개변수 e의 타입은 "React.ChangeEvent" 로 설정해줘야합니다.
   

---

8. 그다음은 리덕스 환경 설정을 해줘야합니다. 저는 redux라는 폴더를 생성 후 그 안에 configStore.ts, configStore.hooks.ts, modules 폴더를 만들었습니다. 그리고 modules 폴더안에 user.ts를 만들어줬습니다.
   -> configStore에는 modules 내 export 한 reducer들을 통합해주는 환경설정을 해주는 곳이고, configStore.hooks.ts에는 별도의 useDispatch와 useSelector를 설정하여 RootType을 안붙이고 하기 위한 설정을 해줍니다. user.ts는 user에 대한 reducer 함수 기능은 만들어주는 곳입니다.

   ---

9. user.ts로 가서 interface, initialState, createSlice를 만들어줍니다.

-> export하여 해당 interface를 SignUp,SignIn 에서 import 후 사용해줍니다.

---

10. User interface를 받는 initalState를 만들어줍니다.
    

---

11. 액션, 리듀서를 한 번에 만들어주는 createSlice를 만들어주고 export 해줍니다.

    

    ---

12. configStore.ts 에서 export한 user reducer를 configureStore에 넣어주고 store를 export default 해줍니다. 또한 필요한 RootState 타입과 dispatch 타입을 만들어준후 export 해줍니다

    

    ---

13. configStore.hooks.ts 안에 configStore에서 만든 type을 받아서 useDispatch와 useSelector를 대신해 사용할 리액트 훅을 만들어줍니다.

    

    ---

14. user.ts 안에서 회원가입때 필요한 함수를 createAsyncThunk를 사용하여 만들어줍니다

    

    ---

15. addUseAsync를 SignUp.tsx에서 import 해 configStore.hooks.ts에서 만든 dispatch로 실행시켜 회원가입을 실행해줍니다. -> 회원가입 버튼 클릭시 handleSubmit 실행

---

16. 로그인은 로그인한 유저 정보를 받아서 리덕스 상태값에 넣어야하므로 createAsyncThunk로 로그인한 유저 정보를 return 받음

    

    ---

17. extraReducers에서 setUserAsync과 완료될 시 action.payload를 받아와 redux user 상태값에 넣기

    

    ---

18. 리덕스에 저장된 user 상태값을 export

    

    ---

19. 저장된 리덕스 state 값을 받고 싶을때 configStore.hooks.ts에서 만든 dispatch와 18번 항목에서 export한 getUserInfo를 활용하여 받아올 수 있음

    

---

정규표현식이나 예외처리등 사용안하고 오로지 typescript를 이용한 redux-toolkit 사용에만 초점 맞춰서 개발을 진행하였습니다. 추가적으로 필요한 부분은 기능을 덧붙여서 사용하시면 될 듯합니다

감사합니다