-
[221219] 좋아요 기능 구현 요구 사항TIL 2022. 12. 19. 21:15
일단 로컬스토리지에 토큰을 저장한 뒤에 토큰 값이 있으면 isLogin 변수를 true 혹은 false로 설정해주고 이것에 따라 로직을 다르게 설정
보통의 토큰이 만료된 경우 만료되자마자 따로 처리를 하는 것이 아니라, 어떤 기능을 클릭했을 때 로그인을 하라고 뜨게 만든다 -> 요즘에는 토큰 만료 시간을 거의 무제한으로 한다고 함, 굳이 신경쓸 필요 X
false라면 상세페이지에 갔을 때, 하트를 누르면 로그인 하라는 alert를 띄우고 true라면 하트를 채워진 하트로 바꾼 뒤에 api호출을 하여 데이터를 바꾸라고 함!!!
즉 로그인한 경우 상세페이지에 들어갔을 때 get 요청 시 해당 유저가 좋아요를 눌렀는지 여부를 확인하는 불리언 값을 예를 들면 heartpush 같은 변수로 설정하여 받아온 뒤에 하트 색상을 결정하고 좋아요를 누르거나 한번 더 눌러 취소한 경우 해당 변수의 불리언 값을 반대로 바꾸는 호출을 하면 됨!!!
프론트에서 중요한 것은 어떻게 덜 깜빡이면서 화면을 재렌더링할 것인가 이다. 예를 들면 좋아요 하나 눌렀는데 전체가 다 렌더링되어서 호출까지 하느라 시간이 걸려 거의 새로고침 수준으로 깜빡이게 되는데, 이걸 최소화하는게 핵심이다. 좋아요 기능의 경우 useSelector를 사용할 때 ost 전체를 잡아서 그 안에 있는 좋아요 값이 바뀔 때 post 전체가 바뀌게 하는 것이 아니라 post.likeCount를 따로빼서 설정해야 그 값만 바뀌게 된다. 그러므로 이 부분도 컴포넌트로 빼는 것이 매우 중요하다.'TIL' 카테고리의 다른 글
[20230317] 리액트 성능최적화 Hook (useMemo, useCallback) (0) 2023.03.17 [230106] 게시판 구조 설계 (0) 2023.01.07 [221207] setState의 함수형 업데이트방식 / URI vs URL vs URN / query parameter, query string, path variable (0) 2022.12.07 [221207] css hover와 비동기처리 (1) 2022.12.07 [221206] Todo 리스트 페이지를 리덕스와 라우터 사용하여 만들기 (0) 2022.12.06