[Pre-project] StackOverFlow clone 일지 7 : Thunk로 GET 요청

오늘 한 일

• Redux-toolkit의 creatAsyncThunk를 사용하여 비동기 get 요청
• 하드코딩에서 API로 받아온 데이터 적용

React에서 console.log가 2번씩 찍히는 이유

• <React.StrictMode>

Index.js의 <React.StrictMode> 를 지워보니 console.log가 1번만 찍혔다. 평소에 데이터 흐름 체크를 위해 console.log를 많이 사용하는데 그때마다 useEffect 를 탓했는데 그게 문제가 아니었다니...
그래도 개발중 오류를 잡기 위한 것이므로 2번 찍히는게 거슬리더라도 유지하는게 좋을 것 같다.

StrictMode is a tool for highlighting potential problems in an application.
...
Starting from React 18, React does not suppress any logs. However, if you have React DevTools installed, the logs from the second call will appear slightly dimmed. React DevTools also offers a setting (off by default) to suppress them completely.

비동기 작업과 thunk의 흐름

• createAsyncThunk는 비동기 작업을 위한 action 생성자
  cf. { type : "액션이름", payload : "리듀서로 전달값" }

• createAsyncThunk(A,B)

  • 1번째 전달인자 : "슬라이스이름/액션이름"
  • 2번째 전달인자 : 콜백 함수(async) -> 리턴값이 payload로 적용

  export const fetchPost = createAsyncThunk(
    'postSlice/fetchPost',
    async (url) => {
      const resposeData = await axios.get(url);
      try {
        return resposeData.data.question; 
        /* 리턴 중요 -> payload에 저장되는 값*/
      } catch (error) {
        throw new Error('get요청 에러 발생');
      }
    }
  );

• state의 값을 변경하는 로직은 해당 slice의 extraReducers 에 객체의 형태로 정의

  • 비동기 수행과정 3가지 : pending, fulfilled, rejected를 나눠서 정의

    const postSlice = createSlice({
        ...
        extraReducers: (builder) => {
            builder
              .addCase(fetchPost.pending, (/*state, action*/) => {
              /* 실행 대기중, 성공 전에 수행할 작업 */
            })
              .addCase(fetchPost.fulfilled, (state, action) => {
              /* 성공 후 payload에 담긴 데이터 받은 상태에 수행할 작업 */
                return (state = action.payload);
            })
              .addCase(fetchPost.rejected, (state, action) => {
              /* 서버로 응답을 못받았을 때 수행할 작업 */
            });
          },

• Dispatch에 createAsyncThunk 를 이용해 만든 비동기 액션 생성자를 담아서 실행

  dispatch(fetchPost(url));

오늘 총평

비록 오래 걸리긴 했지만 한번 해봤으니 다른 메서드 요청에는 지금보다는 시간이 덜 걸리겠지. 그런데 지금 제일 어려운 건 slice를 어느 기준으로 나눠야할지 모르겠다는 것이다. 질문 댓글 추가, 제거하는데 서버 데이터 변경은 쉬운데 그걸 새 슬라이스를 만들어서 수정하면 되는 것인가? redux-toolkit 정보가 적어서 영어듣기 평가 듣느라 고생했다. 제일 필요한 언어는 역시 영어... redux-toolkit 정리하는 시간 가지고 싶은데 시간이 없다. 아직 완전히 익히진 못했지만 그래도 기본적인 slice 생성하고 적용하는 것은 감이 잡혀서 추석때나 정리를 해봐야겠다.