DetailPage 와 useEffect

일단 기록하기에 앞서 useEffect에 대해 다시 한번 알아 보는게 맞는 것 같다. React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 일컽는다. 대표적인 예로 어떤 데이터를 가져오기 위해서 외부 API를 호출하는 경우, 일단 화면에 렌더링할 수 있는 것은 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장하는데 요청 즉시 1차 렌더링을 함으로써 연동하는 API가 응답이 늦어지거나 응답이 없을 경우에도 영향을 최소화 시킬 수 있어서 사용자 경험 측면에서 유리하기 때문이다.

useEffect는 React에서 제공 내장 라이브러리 api 함수로 Side Effect를 함수형에서 사용할 수 있게 하는 리액트 hooks이다.

const getDetail = async (ItemId:number) => {
    const response:any = await axios
      .get(`https://everycoding.herokuapp.com/items/${ItemId}`)
      .catch((err) => {
        console.log("Err: ", err);
      });
      dispatch(selectedItem(response.data))        
  };
  
  useEffect(() => {
    if(ItemId) (
      getDetail(ItemId)
    )   
  }, [ItemId])

따라서 특정 조건인 useParams로 부터 가져온 ItemId 값이 바뀌면 렌더링 하도록 코드를 만들었다 근데 아쉽게도 렌더링이 계속 되지 않고 get요청을 실패하고 error가 발생하였다. 이 부분을 엄청 고민하고 여러차례 시도하였지만 도저히 해결이 불가하여 사진 클릭시 페이지 전체가 렌더링 되도록 window.location.reload()을 사용하였다 사실 window.location.reload()을 너무 많이 사용한 것이 이번 개인프로젝트에서 매우 아쉬운 부분이다. 개선하도록 다시 시도 중이다.