좋아요 기능쯤은 간단하게 할 수 있겠지? 하고 작업하다가 생각보다 처리할 부분이 많아서 조금 의외였다. 일상적으로 사용하던 기능들에 개발자들의 이런 노고가 들어있었구나 새삼 느낀다..

Django로 좋아요 버튼 클릭시 좋아요(like 레코드 생성)하기, 다시 좋아요 버튼을 클릭시 좋아요 취소(like 레코드 삭제) 뷰를 생성하는 것까지는 순조로웠다. 그런데 이것을 UI에서도 실시간으로 보여주도록 하기 위해서는 Lifecycle에 대한 고민이 조금 필요했다.

좋아요 버튼 클릭했을시 좋아요/좋아요 취소된 내용이 바로 보여져야할 뿐만 아니라, 초기 렌더링시에는 과거에 좋아요를 했는지 여부를 체크해서 보여주어야 했다. 그동안 사용자 입장에서는 무언가를 클릭했을 때 동작이 바로 시각적으로 업데이트되는 것이 당연했었는데 그 뒤에는 이렇게 많은 생각과 작업이 필요하구나 새삼 느꼈다. 🧐

---

❤️ 좋아요 기능 구현하기

초기 렌더링시,

• (Django) 수련후기에 연결된 like(좋아요) 레코드 조회 ➡ DRFListCreateAPIView 사용
• (React) 수련후기의 like 레코드 존재 여부에따라 ❤️ (like) / 💔 (unlike) 스타일 적용(className으로 제어)

좋아요 여부 확인

• diary 레코드의 id를 state(diaryLiked)에 담고(diary id : 부모 컴포넌트인 Diary에서 pass down)
• GET요청으로 like 레코드 정보를 가져와서, diaryLiked에 담아준다.
• diaryLiked.liked가 true인지 false인지에 따라 좋아요/좋아요 안함 스타일을 적용한다.

---

✔️ 좋아요 버튼 클릭시,

• (Django) like 레코드 생성(좋아요)/삭제(un좋아요)
  - DRFListCreateAPIView + mixins.DestroyModelMixin 사용
  

• (React) 자식 컴포넌트의 state 업데이트시 부모 컴포넌트의 state도 업데이트 시키기

  💡 새롭게 안 사실 💡 : 자식 컴포넌트에서 부모 컴포넌트의 state를 업데이트하도록 fire하는게 가능하다! 어떻게?

  	👉  부모 컴포넌트의 state조작 "함수 통째로" 자식 컴포넌트에 prop으로 넘겨준다.
  
  	👉  자식 컴포넌트는 prop으로 넘겨받은 함수를 필요한 시점에 실행시킨다.(useEffect 훅 활용) 

좋아요 생성 / 삭제하는 POST 요청

아래는 장고 Like 생성/삭제 view!