axios 새로고침 없이 변경 하는법 질문드립니다

[애플애플]

  // 좋아요 하기
     const On_Heart = (ID) => {

      console.log("아이디값: " + ID)

      axios.patch(/api/posts/${ID}/likeby)
      .then(response => {

        axios.patch(/api/posts/${ID}/addlike)
        .then(response => { 

        window.location.reload(); 
        })
      })
    }

지난번에 질문드린 좋아요 기능은 선생님 덕분에 무사히 구현 했습니다

질문드릴 것은 좋아요 를 눌렀을때  인스타그램처럼 페이지의 새로고침이나 깜박임 없이 바로 좋아요에 불이 들어오고 한번 더 눌렀을때도 새로고침 없이 불이 꺼지는 기능을 구현하고싶은데요

위 코드의 On_Heart 는 하트 div에 onClick으로 사용되는 핸들러 입니다 

임시방편으로  window.location.reload(); 를 사용하고 있는데 다른 방법이 있는지 질문 드립니다 

[codingapple]

조작하면 불이 꺼지는 state와 UI를 만들어두고 

버튼누르면 그 state를 조작하면 됩니다

[애플애플]

           {                  
              heart[i] === false  
              ?  <img className="main_herat_off" src="img/main_heart_off.png"
                  onClick={() => On_Heart(a._id, () => {})}/>

              : <img className="main_herat_off" src="img/main_heart_on.png"
                  onClick={() => Off_Heart(a._id,() => {})}/>
              }

삼항연산자로 onClick이벤트를 부여해서 heart state에 DB값으로 true false를 판별해서 클릭하면 하트 이미지가 변경이 되도록 구현인 되어있는 상태입니다

클릭과 이미지가 변화하는것은 잘 구현되지만 클릭 시 바로 변경이 되지않고 새로고침이나 혹은 로그아웃을 해야만 변경이 이루어지는점은 어떤점 때문에 그런것일까요..ㅠㅠ

[codingapple]

state변경을 안했거나 state변경을 잘못했거나 state에 따라서 UI가 어떻게 보일지 작성을 안했거나 그런 경우 뿐입니다 

[글쓴이]

글