새로 고침 함수를 이용해서 좋아요 구현하기

새로 고침 함수

location.reroad()

상황
freeboard 상세 화면에서
좋아요, 싫어요를 눌렀을 때 state 값이 바뀌는 것까지는 구현했으나
직접 새로고침을 누르지 않으면 화면에 나타나는 숫자가 변경되지 않았다.

해결 방법
JavaScript의 내장 함수인 location.reroad()를 추가해서 자동으로 새로고침 되게 바꿨더니 자동으로 새로고침이 이루어졌다.

그리고 함수 실행 시 위치해있던 화면 영역에서 그대로 있는 상태로, 새로고침과 함께 화면의 값만 다시 불러와줘서 좋아요/싫어요 기능이 잘 구현되었다! 굿

    const LIKE_BOARD = gql`
    mutation likeBoard($boardId:ID!){
        likeBoard(boardId:$boardId)
    }
`
    const DISLIKE_BOARD = gql`
    mutation dislikeBoard($boardId:ID!){
        dislikeBoard(boardId:$boardId)
    }
`

export default function BoardsDetailPage(){

    const router = useRouter()

    /*LIKE_BOARD*/
    const [likeBoard] = useMutation(LIKE_BOARD)  
    const onClickLike = async ()=>{
        try{
            const result = await likeBoard({ 
                variables: {boardId: router.query.boardid }} 
            )
            location.reload()
        }catch(error){
            alert(error.message)
        }  
    }
    
    /*DISLIKE_BOARD*/
    const [dislikeBoard] = useMutation(DISLIKE_BOARD)  
    const onClickDisLike = async ()=>{
        try{
            const result = await dislikeBoard({ 
                variables: {boardId: router.query.boardid }} 
            )
            location.reload()
        }catch(error){
            alert(error.message)
        }  
    }


    return (
                <LikeWrapper>
                    <Like>
                        <LikeIcon onClick={onClickLike}></LikeIcon>
                        <LikeCount>{data?.fetchBoard.likeCount }</LikeCount>
                    </Like>
                    <Like>
                        <DisLikeIcon onClick={onClickDisLike}></DisLikeIcon>
                        <DisLikeCount>{data?.fetchBoard.dislikeCount }</DisLikeCount>
                    </Like>
                </LikeWrapper>
    )
}

파일 위치: freeboard-frontend/boards/[id]/index.js