최종프로젝트 20일차

1.

문제

팔로우 & 팔로잉 리스트에서 새로고침시 리스트가 날라감.

문제원인

팔로우 & 팔로잉 리스트를 보여주는 컴포넌트내에서 따로 서버요청을 보내 데이터를 받아오지않고, 이전페이지에서 들어올떄 데이터를 리덕스에 넣고 이를 보여주는 형식이였기때문

해결

컴포넌트내에서 useEffect를 활용하여 컴포넌트내에서 데이터를 받아온다.
처음에 작성시 컴포넌트내에서 서버요청을 보내지않는 방식으로 작성한 이유는, 마이페이지에서 팔로우 or 팔로잉 버튼을 눌러 팔로우 or 팔로잉 리스트를 보려고할떄, 이 리스트를 다루는 페이지내에서 해당하는 탭( 팔로잉,팔로우) 또한 같이 활성화 시켜야했기 떄문이다.그래서 마이페이지에서 팔로워 버튼을 누를떄 리덕스에존재하는 isFollower의 값을 true로 바꾸고 이값을 리스트페이지에서 가져와 팔로워 탭을 활성화시키는데 사용했다.
근데 여기서 굳이 페이지를 이동할떄 서버요청을 안보내도될것같다는생각이든다. 생각해본게 페이지 이동시 동기적인 액션하나(isFollower를 토글시키는)를 생성하고, 마이페이지에서 팔로워를 누를시 true, 팔로잉을 누를시 false의 값을주고, 페이지가 이동하게됬을떄 useEffect를통해 이값을 기준으로 리스트를 부르는 서버요청을 부르면 될것같다는 생각이든다.
이전방식의 추가적인문제가 서버요청을하고 그데이터를 리덕스에 넣을떄 isFollower를 바꾼다는것이다. 서버요청은 비동기적으로 동작하기떄문에, 버튼을 누르고 페이지가 이동했을떄 순간만큼은 isFollower가 이전상태이기떄문에 원하는리스트와 반대되는 리스트를 한번더 호출한다는것이다. 이를방지하기위해 또 promise의 then catch를이용하여 값을받아오면 페이지를 전환시키는 처리를 해놨지만, 지금생각해보면 페이지를 이동시 서버요청을보내 isFollower를 바꾸는게아닌, 동기 액션하나를 추가하여 바꾸고, 페이지를 전환했을떄 이값을 참고로 서버요청을 보내 리스트를 받아오면 굳이 받아올떄까지 기다렸다가 페이지를 이동시키지않아도 될것같다는생각이든다.