Portfolio

🔥 문제

자주 겪는 골치 아픈 일 중 하나다.

초기에 event를 불러오고 나서, initialState임에도 불구하고, undefined가 발생한다는 이유로 인해 계속해서 제대로 불러와지지 않았다.

왜 이러한 이유가 발생하는 것이며, 해결 방법은 무엇일까?

⭐ 해결 방법

💡

이럴 때일 수록 침착하게 리액트의 동작 방식을 뜯어봐야 한다. 조급함은 오히려 사이드 이펙트를 증가시키는 로직을 구현하도록 하기 때문이다.

잘 생각해보자.

eventId를 동적으로 라우팅한다.

하지만 실행컨텍스트는 평가 → 실행의 과정으로 이루어져 있고, eventId는 단지 평가가 되어 있는 상태이다.

그런데, 리액트를 실행한다고 하면 어떨까?

아직 mount가 되어 있지 않은 상태이므로 동적 라우트를 가져올 수 없다. 따라서 자동으로 초기값이 전달될 것이다.

그렇다면, actions에서는 useEffect를 하며 마운트할 때 값을 가져오게 되고, undefined가 전달되어 버린다.

그러면, actions는 undefined라는 파라미터를 가진 api를 호출하게 되는 것이다.

따라서 결과는 에러가 날 것이고... 결과적으로 우리는 원하는 값을 얻지 못할 것이다. 왜냐하면 정말 undefined가 주소인 이벤트가 없기 때문이다.

그렇다면 이를 해결하려면 어떻게 해야 할까?

이미 initialState는 훌륭하게 동작한다. 따라서 actions의 내용을 수정해야 한다.

매우 간단한데, eventId가 없다면 그냥 리턴시키는 꼴이다.


const dispatchEvent = useCallback(
    async ({ eventId }) => {
      if (!eventId) return;
      dispatchLoading();
      const res = await getEvent({ eventId });
      dispatch({
        type: GET_EVENT,
        payload: { event: res?.data, eventError: res?.error },
      });
    },
    [dispatch, dispatchLoading]
  );

그러면 결과적으로 초기화된 동적 라우트가 전달될 때는 얼리 리턴이 될 것이고, 이후 제대로 된 동적 라우트가 들어온다면 useEffect에서의 감시로 인해 정상적인 로직 처리가 될 것이다.

결과

리소스 낭비도 발생하지 않고 아주 잘 된다!

배운 점

결국 리소스 낭비를 최소화하는 방법과 동일하다고 생각한다.

API가 애초부터 제대로 호출만 잘 됐다면 아무 문제가 발생하지 않았기 때문이다.

undefined로 전달되는 것이 가장 무섭다는 것을 깨달았으며, 이러한 라이프사이클 및 컨텍스트에서의 동작 과정으로 인한 사이드 이펙트가 최소화되도록 항상 고민해야겠다.

👏🏻 참고자료

내 머릿 속에서의 요리조리 시나리오

API 조회한 이후 모든 데이터가 초기 undefined를 안 뜨게 하는 방법

🔥 문제

⭐ 해결 방법

결과

배운 점

👏🏻 참고자료