[first Project][Client] 받은편지함 로직

프로젝트에서 받은편지함 기능을 구현하였어야 했는데,
로직을 생각하지않고 기능별로 코드를 작성하다 보니
상태들과 함수들이 꼬여버려서 코드가 산으로 가버렸다.
팀장님의 도움을 받아 로직을 다시 구현하였고
각 컴포넌트별로 기능을 정리해보았다.

• 받은편지함 로직

  

App /

• handisChecked

Token 유무 확인
유효한 토큰인지 확인
db에 일치하는 
유저정보 확인 후
Data로 Nav바 Toggle 여부 확인

WholeReceivedMail /

• getReservedChecked useEffect

도착예정편지함에 있는 모든편지의 isChecked 
count 후 도착예정편지함 Toggle여부 확인

• handleCheckReserved

도착예정편지함 클릭 시
모든 편지의 isChecked 값 변경 후 (Toggle없애기)
getReservredChecked 실행
handisChecked 실행

RecieveMail /

• getMailcontent

유저가 클릭한 한개의 메일 자료 받아오기(state)

• getReceivedData useEffect

서버에서 받아온 유저 데이터로
받은편지함 데이터를 받아와서 편지리스트 랜더링
페이지네이션 구현 값 변경

• getReceivedDataPageuseEffect,[page]

받은편지함 데이터를 받아와서 편지리스트 랜더링 (유저데이터 서버요청X)
페이지네이션 구현 값 변경
페이지 변경 시 실행

MailView / 메일 한개 띄우기

• getReceivedDataPage useEffect, (props)

메일을 읽으면 isRead 값 업데이트 후 페이지 랜더링이 되어야 함

MailViewModal /

• mailremove

선택한 메일 삭제 후
getReceivedDataPage 실행

마치며,

한 동작마다 구현되어야되는 기능이 여러개가 있는경우에
어떤식으로 코드를 짜서 전달해줘야하는지 생각하는것이 어려웠다.
평소에 크게 생각을 하지 않았던 부분이라 많이 헤맸던거 같다.
팀장님이 기능을 짤 때 나무를 보지말고 숲을 보라 라는 말을 남겨주셨다 ^^
이번 계기로 다음 파이널프로젝트 진행하게되면 위와 같은 실수를 다신 하지 않아야겠다고 다짐했다 !