useNavigate 활용한 에러 해결

사진을 클릭하였을 때 새로운 페이지로 전환하기 위하여 기존에는 를 활용하였다.
목업 데이터로 활용할시에는 서버에서 호출을 받지 않았기 때문에 오류가 발생하지 않았지만
사진을 클릭시 페이지 전환과 동시에 useEffect로 특정 조건인 useParams로 받은 id값이 변경 될시에만 랜더링 되도록 코드를 구성하였지만 랜더링이 되지 않고 계속 오류가 발생하였다. 데이터를 받아오지 못하는 것이었다. 원인을 계속 찾지 못하였고 기본적 새로고침을 누를 경우 랜더이링 되는것을 알았다. 일단 오류를 잡는것이 최선이었기 때문에 사진을 클릭시 페이지가 전환됨과 동시에 새로고침을 하고 싶었지만 만으로는 해결 할 수가 없다.

const idData = useParams()
  const ItemId:number = Number(idData.id)
  console.log(ItemId);
  const detailData = async () => {
    const response:any = await axios
    .get('https://everycoding.herokuapp.com')
    .catch((err) => {
      console.log("Err", err);
    });
    dispatch(SetData(response.data));    
  }  

  useEffect(() => {
    detailData();    
  }, [idData])  

그때 방법을 찾다고 생각한 것이 useNavigate였다 React Router가 v6로 대규표 업데이트로 많은 부분이 바뀌었다. 특히 v6에서는 useHistory 훅에 대한 네이밍을 useNavigate 로 변경되었고 방식 또한 변경 되었는데 일단 useNavigate는 함수이다. 따라서 클릭을 하였을 때 함수를 호출하는 방식을 기본적인 코드가 구성 된다. 따라서 onClick으로 함수를 호출함과 동시에
window.location.reload() 활용하여 새로고침을 하면 되지 않을까라는 생각으로 시도하였으며 성공하였다.

const onClick = () => {
      navigate(`/DetailPage/${fullImg.id}`)
      window.location.reload()
    }   

최대한 새로고침을 지양하기 위해 개션해야 될 것 같다 아직 부족한 점이 많다.