레시피 목록에 좋아요와 스크랩 버튼을 넣을까 말까? (with. useEffect의 사용)

드디어 recipe와 recipe_method 테이블에 몇 개의 레시피들을 등록하고, home.js에 드디어 레시피 목록을 불러와서 정렬했다!

지금 맞닥뜨린 문제는 이거다.

 

고민

- recipe 테이블에 scrap_count 필드는 만들었는데, 좋아요 버튼을 기록하는 필드도 만들까 말까.

- 좋아요 버튼과 스크랩 버튼은 비슷한 기능을 하고 있는데 특히 레시피 목록에 둘 다 배치하면 조잡하지 않을까.

- 비슷한 기능이면 굳이 분리할 필요가 있을까?

 

 

기능 분리 시 긍정적인 측면

사용자 참여를 유도한다는 점은 비슷하나 구체적으로 생각했을 때 이런 게 다르더라.

 

- 좋아요:

간단히 마음에 들었다는 의사 표현이어서 보통 한 번 누르고 끝나는 기능이다.

• 사용 예시: 인기 레시피 순위, 사용자 반응 수집, 가벼운 의사 표현

 

- 스크랩:

사용자가 나중에 다시 볼 수 있도록 저장하는 기능이다.

• 사용 예시: 따라하고픈 중요한 레시피 저장, 다시보기, 신중한 의사 표현

 

✅ 기능 통합 시 긍정적인 측면

- 스크랩 버튼 기능 필드만 구현: 

스크랩과 좋아요 버튼 둘 다 만들지만, 실제 레시피 목록을 저장하는 것은 스크랩 버튼으로 설정.

좋아요 기능은 굳이 필드로 만들지 않고 나중에 레시피 목록을 보다가 확인할 수 있는 정도로만 설정.

 

나는 지금으로써는 이 방법이 더 좋은 것 같다.

 

 

✅ 결론 및 계획

사용자가 레시피 목록을 볼 때 내가 이전에 좋아요를 눌렀던 항목인지 표시하는 용도로만 사용한다

home.js의 레시피 목록들 페이지에서는 가볍게 의사를 표현할 수 있는 좋아요 버튼을 넣어놓고, 상세레시피에 들어가면 스크랩할 수 있게 하는 게 좋을 것 같다!

∴ 로그인했을 때 좋아요 상태 유지 (개수는 측정 X)

 

- 백엔드:

like 테이블을 설계하고 server.js에 좋아요 관련 API 코드를 만들고 GET한다.

 

- 프론트:

1. 좋아요 상태 관리 state를 만들고 useEffect로 랜더링

2. 좋아요 추가/취소 if문

 

useEffect 사용:

- 초기 좋아요 상태를 가져온다.

- 좋아요 추가/취소에 따라 상태 업데이트가 되면 컴포넌트 재랜더링

∴ 초기 상태 관리 + 좋아요 상태 변경 후 반영 상태를 처리하기 위함!

 

 

 

 

 

 

 

 

---

 

추가로 기능을 분리했을 때 어떻게 설계하면 되는지도 대충 정리해보았다.

 

 

기능 분리 시 좋아요 기능 설계 필드

기능을 분리할 경우 좋아요 기능 필드를 recipe 테이블에 추가하거나, like 테이블을 따로 만드는 식으로 진행한다.

 

1. recipe 테이블 내 좋아요 필드 추가

- 좋아요 개수: like_count

 

2. like 테이블 만들기 + recipe 테이블에 like_count 필드 만들기

like 테이블을 만들면 어떤 사용자가 레시피에 좋아요를 눌렀는지 기록이 가능해서, 좋아요한 레시피 목록을 불러올 수 있다.

 

- 좋아요 누른 사용자 정보: like_pk_id

 

- user_id

users 테이블의 user_pk_id와 foreign key로 연계

 

- recipe_pk_id

recipe 테이블의 recipe_pk_id와 foreign key로 연계

 

- like_date:

CURRENT_TIMESTAMP로 설정

 

- recipe 테이블에 like_count 필드 추가하기

 

 

2-1. 좋아요 테이블을 만들어서 like_count 업데이트하기

UPDATE recipe SET likes_count = likes_count + 1 WHERE recipe_pk_id = ?;
UPDATE recipe SET likes_count = likes_count - 1 WHERE recipe_pk_id = ?;


-- 레시피 좋아요 수 구하기
SELECT COUNT(*) AS likes_count FROM likes WHERE recipe_id = ?;