NextJs - Recommend 기능 구현

choko's avatar
Jun 29, 2024
NextJs - Recommend 기능 구현
 
  1. setRecommended
      • Recommed가 될 때마다 Board의 recommend 수가 적용되야 한다. 이를 적용하기 위해
      const [recommended, setRecommended] = useState(false);
 
 
  1. recommend 버튼 → onClick
    1. <button onClick={() => handleRecommend(board.board_id)}>Recommend</button>
 
  1. handleRecommend()
    1. const handleRecommend = async (board_id: number) => { try { await recommendBoard(board_id); // 추천 요청 보내기 setRecommended(true); // 추천 상태 업데이트 } catch (error) { // 추천 요청 실패 시 에러 처리 console.error('Error recommending board:', error); } };
       
 
  1. recommended를 useEffect()에 추가
      • recommended 업데이트 마다 recommend 수가 적용된 board를 보여주여야 함
      • setRecommended(false)를 추가해 매 추천마다 useEffect가 적용되도록 한다.
      useEffect(() => { const fetchBoards = async (token:string) => { try { // API 요청 URL을 적절히 변경하세요. const response = await getBoardsAxios(token); setBoards(response); // 'data' 필드 안의 'data' 배열을 상태로 설정 } catch (error) { console.error('Error fetching boards:', error); } }; const accessToken = localStorage.getItem('accessToken'); if (isLoggedIn && accessToken) { fetchBoards(accessToken); // fetchData는 보드 정보를 불러오는 함수입니다. } else { setBoards([]) } setRecommended(false); }, [isLoggedIn, recommended]);
       
Share article

Tom의 TIL 정리방