[프로젝트] 날씨 칵테일 | 3. 로딩 상태에 따른 UI 변경하기(로딩 중 문구 만드는 법)

 

사용자에게 로딩이 진행되고 있다는 것을 보여주는 것은 중요하다. slice에서 addCase를 통해 정의된 로딩 상태에 따라 컴포넌트의 렌더링 여부를 결정하는 로직을 구현하였다. 위의 이미지에서 '재추천받기' 버튼을 눌렀을 때 '칵테일 추천 중..' 이라는 문구를 띄우고자 한다. 컴포넌트 return 값은 삼항연산자를 활용하여 조건부를 작성하였다. '칵테일 추천 중..' 문구는 status가 loading 단계일 때 잠깐 등장한다. 이내 status가 succeded되고 payload로 cocktailInfo가 업데이트되면 해당 state를  불러온다. cocktailInfo가 없는 경우(즉, status가 failed)이면 '연결 오류: 칵테일 정보 수신 불가' 메세지를 띄운다. 아래는 상세한 코드이다:

 

// [GetCocktail.tsx]

function GetCocktail({ weatherName }: GetCocktailProps) {
// 중략..

return (
    <>
      {status === 'loading' ? (
        <div className={styles.loading}>칵테일 추천 중...🍸</div>
      ) : cocktailInfo ? (
        <>
          <h4 className={styles.cocktailName}>{cocktailInfo.strDrink}</h4>
          <img
            src={cocktailInfo.strDrinkThumb}
            alt={cocktailInfo.strDrink}
            className={styles.drinkImg}
          />
          <MakeBtns
            reloadCocktail={() => dispatch(fetchCocktail(weatherName))}
            cocktailId={cocktailInfo.idDrink}
            cocktailName={cocktailInfo.strDrink}
          />
        </>
      ) : (
        <div className={styles.loading}>연결 오류: 칵테일 정보 수신 불가</div>
      )}
    </>
  );

// cocktailSlice.ts

// 중략..
const cocktailSlice = createSlice({
  name: 'cocktail',
  initialState,
  reducers: {}, // 동기 작업
  extraReducers: (builder) => {
    // 비동기 작업
    builder
      .addCase(fetchCocktail.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchCocktail.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.cocktailInfo = action.payload;
      })
      .addCase(fetchCocktail.rejected, (state) => {
        state.status = 'failed';
      });
  },
});