실전 프로젝트
실전 프로젝트가 시작된지 벌써 3주차가 되었다. TIL을 매일쓰고 싶었지만 뷰 구현과 반복되는 회의로 인해 쓰기가 매우 어려운 상황이었다.
텐션도 많이 저하되어 항해를 그만둘까 생각하는 지경까지 이르렀었다 다행이도 멘토님들과 팀원들에게 많은 격려와 도움을 받고 다시 멘탈을 잡을 수 있었다..
이번 TIL을 쓰고 싶었던 이유는 그 동안 axios 통신을 할때 리덕스 없이 사용했는데 이번에 프로필 수정 기능을 구현하면서 처음으로 리덕스를 사용했기 때문에 정리를 해놓고 싶었다.
리덕스를 사용하게된 이유는 프로필 수정 컴포넌트에서 put api를 불러와 통신을 하였는데 db에서는 수정이 됐으나 페이지 리랜더링이 되지않으면 뷰에서 수정한 부분이 즉시 반영되지 않았기 때문에 리덕스를 쓰게되었다.
리덕스를 사용하게되면 데이터를 리덕스에 저장하여 전역으로 상태관리를 할 수 있어 props 사용을 하지 않아도되고 저장한 데이터에서 수정을 하기 때문에 수정한 데이터가 바로바로 반영된다.
post.js 파일에서 액션 타입을 지정해주고
get과 put 액션 생성 함수를 각각 만들어주었다.
get으로 데이터를 받아왔을때 데이터를 넣어줄 초기 값을 profile:[]로 지정해주었다.
각각의 미들웨어를 만들어 주었고 로그인시에만 사용할 수 있는 기능이므로 쿠키에 담겨있는 토큰을 헤더에 실어주어야 하므로 getCookie를 import하여 'Token'값을 token 변수에 담아주고 헤더에 실어주었다 .
edit에서는 수정된 값을 가져와야하므로 img, nickname, username으로 지정해 주었다 dispatch로 수정된 값을 보내줘야할때 순서를 꼭 맞춰줘야한다.
이런 식으로 img, editName, username을 차례로 보내주었다.
저 img에는 클릭했을때 img의 url이고 editName은 input에 작성한 (중복확인을 통과한) 닉네임이다.
사실 수정하는 데이터는 프로필 이미지와 닉네임 뿐이라 username은 default 값을 그대로 넘겨줘야 했다 그래서 리덕스에서 get으로 받아온 데이터에서 username을 useSelector로 가져와 변수에 저장하여 사용하였다.
이 부분은 리듀서인데 수정된 데이터를 아까 지정해둔 초기값에 넣어주고자 사용했다.
GET_PROFILE은 profile에 받아온데이터가 저장되는 것이고 EDIT_PROFILE은 수정된 데이터를 받아 profile에 담겨있는 데이터를 수정해준다.
액션을 전역으로 사용해주기 위해서 getProfileDB와 editProfileDB를 export 해주었다.
완벽하게 이해하고 사용한 것은 아니지만 내가 사용하고 이해한 생각을 정리해보았다. 나중에 다시 사용해보면서 익숙해질 필요가 있는 것 같다...
