[리액트 심화] -팬레터 컬렉션 업그레이드(4)

createAsyncThunk를 사용한 비동기 작업 처리

export const __getLetters = createAsyncThunk(
  "letter/getLetters",
  async () => {
    const response = await axios.get("https://moneyfulpublicpolicy.co.kr/letters");
    return response.data;
  }
);

비동기 데이터 처리와 조건부 렌더링

useEffect(() => {
  dispatch(__getLetters());
}, [dispatch]);

const { userData } = useSelector((state) => state.auth);
const userDataObj = userData ? JSON.parse(localStorage.getItem("nowLogin")) : null;

return (
  <MainList>
    {letters.map(function (item) {
      const avatar = item.userId === userId ? (userData ? userData.avatar : userDataObj.avatar) : item.avatar;
      const nickname = item.userId === userId ? (userData ? userData.nickname : userDataObj.nickname) : item.nickname;
    })}
  </MainList>
);

오늘은 Redux toolkit의 createAsyncThunk를 이용해 비동기 작업을 처리하는 방법에 찾아보고 서버에서 사용자의 프로필 정보를 비동기적으로 가져와 Redux store에 저장하는 일련의 과정을 진행해 보았다.

하지만, 비동기 작업은 항상 동기 작업과는 다르게 동작한다는 점을 다시 한번 깨달았다. 컴포넌트가 처음 렌더링될 때, 비동기적으로 불러오는 데이터가 아직 준비되지 않은 상태일 수 있다는 점을 명심해야 했다. 이를 해결하기 위해, 준비된 데이터가 있을 때와 없을 때에 따라 다른 렌더링 로직을 선택하는 방법을 배웠다.
오늘 과제를 진행해본 내용을 토대로, 비동기 작업을 처리하고 그 결과를 화면에 반영하는 더 나은 방법을 찾아보는게 좋겠다. 복잡한 애플리케이션을 구축할 때 큰 도움이 될 것 같다.