🎀 Wedding-card #5. Main Page - 좋아요기능

📌 좋아요 기능

Swiper하단에 빈하트버튼을 누르면 빨간하트로 바뀌면서 숫자가 올라가도록 하는 간단한 기능..
이라고 생각했는데 아직도 간단한 기능도 어렵게 구현해내는 개발병아리...

처음 기획으로는 사용자에 상관없이 새로고침을 하면 상태가 초기화되면서
누를때마다 숫자는 서버에 저장되도록 하려고 했었다.
하지만 사용자가 사용하는 디바이스별로 한번만 가능할 수 있도록 코드를 바꾸면서
localStorage라는걸 알게 되었다.

간단하게 말하면,
브라우저 저장소중의 웹스토리지 중에 하나인 localStorage는
흔히 로그인 유지 기능처럼, 명시적으로 삭제해주지 않는 이상
지워지지 않는 데이터들을 저장하는 공간을 말한다.
더 자세한건 따로 포스팅해보기로..!

1. 기능작업 과정

• Mainpage에서 props로 Like컴포넌트에 서버에 있는 likes값을 넘겨줘서 갯수를 표시
• Like컴포넌트에서 상태값을 like로 설정하고, localStorage에는 flag 값을 설정

const flag = localStorage.getItem("like_flag");

• 하트 버튼을 클릭하게 되면 onClick함수가 발생하면서, 서버 상태값이 200이 되면 서버에 갯수가 추가가 되고, 하트가 빨간색으로 채워지게 된다.

 const handleClick = (): void => {
    if (like) return;
    setLike(true);
    dispatch(addLike());
    fetch("서버주소/addLike", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        postId: "",
      }),
    })
      .then((response) => response.json())
      .then((json) => {
        console.log(json);
        if (json.status === 200) {
          dispatch(addLike());
        }
      });
  };

⭐️ 여기서 막간으로 dispatch에 대해 !
redux를 언제 정리해야할지 몰라서 아직 정리를 못했는데,,
위 코드에서 사용된 dispatch는
미리 onClick함수 밖에서 useDispatch()로 만들어지고,
modules의 reducer로 작성한 케이스에서 addLike함수를 발생시켜서
숫자를 업데이트 할 수 있게 해주는 함수이다.

2. 리팩토링

이 작업을 하면서 사용자경험에 대해서 더 배우게 된 것 같다.
하트를 누르는 액션을 취한 후에도,
그 값이 서버에 정상적으로 올라간 후에야 적용이 되어서 view가 변하다 보니
그 틈새에 기다리는 시간이 생기게 되었다.

그래서 서버에 올라가기 이전에 일단 view를 바꿔준 후
서버에 값을 저장하는 코드로 바꾸기로 했다.

const handleClick = (): void => {
    if (like && flag) return;
    dispatch(addLike());
    setLike(true);
    fetch("서버주소/addLike", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        postId: "",
      }),
    });
  };

이렇게 작성하면,
하트를 클릭하면 우선 하트이미지 변동, 숫자 더해지는 view가 바뀌고
보이지 않는 서버에서는 이전 좋아요 숫자에 +1이 되는 중..인 모양으로 만들 수 있다(?)

다음에 시간이 나면 인스타그램처럼 버튼을 누르면 사진에 하트가 표시되었다가
사라지는 애니메이션도 넣어보고싶다 :)

덕분에 구현할 수 있었습니다. 감사합니다 :)

• https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048