요약
Ract로 Fan Letter App 만들기 - thunk로 리팩토링
기존에 만든 팬레터 앱에서 redux에서 react-toolkit을 활용해 react-thunk로 리팩토링하는 작업
고민한 내용
props와 context api는 이해가 잘 되서 금방 적용했는데
기존 redux를 작업한게 많지가 않는게 가장 큰 문제였다.
일단 기존 redux할 것들까지 찾아서 툴킷화하는데 시간이 꽤 많이 걸렸다
1. JSON-SERVER
기존인 더미데이터를 활용해서 화면에 보여주는 형식이었다면,
이번엔 json-server 모듈을 활용해 db.jsoin 파일로 직접 넣어줬다.
.env 파일에 url을 집어넣어서 전역으로 사용했었다.
2. React Thunk
기존 이름에서 -Slice.js로 파일들을 만들었고 안에서 리덕스 툴킷을 활용해 작업했다
export const __editUserList = createAsyncThunk(
"editUserList",
async (payload, thunkAPI) => {
try {
const response = await axios.get(
`${process.env.REACT_APP_SERVER_URL}/lists?userId=${payload.userId}`
);
const listItems = response.data;
const updatePromises = listItems.map(async (item) => {
const itemId = item.id;
const payloadItem = {
nickname: payload.userName,
img: payload.userImg,
};
try {
const updatedResponse = await axios.patch(
`${process.env.REACT_APP_SERVER_URL}/lists/${itemId}`,
payloadItem
);
console.log(
`Item with ID ${itemId} updated successfully`,
updatedResponse.data
);
} catch (updateError) {
console.error(`Error updating item with ID ${itemId}`, updateError);
}
});
await Promise.all(updatePromises);
return thunkAPI.fulfillWithValue(response.data);
} catch (err) {
console.log(err, "Error");
return thunkAPI.rejectWithValue(err);
}
}
);
제일 기억나는 코드로 /list?userId=${userId}
를 하면 해당 아이디를 가져올 수 있어서 이렇게 수정할 수 있겠구나!
했는데 불가능했다. 이걸 해결하기 위해서 꽤 많은 시간을 들였는데...
알고보니 불가능한게 맞았다.
그래서 for문을 돌리는 형태로 작업을 했는데 그러면서 코드가 길어졌다.
안에서는 dispatch문을 사용 할 수 없다라고 봐서 그랬는데, 나중에 보니 그게 아니었다.
결과 화면
회고
라우터도 만들어놓은 틀과 로그인을 집어넣다보니 꼬여서 꽤나 많은 시간을 허비했다..
redux가 잘 이해안되서 못했던 부분을을 재학습하고 심화로 더 알 수 있어서 좋았던 시간이다.
꼭 가지고 싶었던 시간이었는데 좋았다.
거기에 redux내에서 navigate와 dispatch를 사용하고 싶었는데, 다 끝나고 코드들을 공유하면서
'아 불가능하구나'하고 넘겼던게 가능한 사실을 알게 됐다..
다음엔 적극 활용해 봐야겠다.
'TIL' 카테고리의 다른 글
[TIL][23.12.11] 리액트 아웃소싱 프로젝트 - 크롤링 (0) | 2023.12.12 |
---|---|
[TIL][23.12.07] 리액트 아웃소싱 프로젝트 S.A (2) | 2023.12.06 |
[TIL][23.12.05] React, Firebase 활용한 팀 프로젝트 (1) | 2023.12.06 |
[TIL][23.11.21] react, firebase 활용한 팀 프로젝트 S.A (1) | 2023.11.21 |
[TIL][23.11.16] Ract로 팬레터 앱 만들기 - 3 (0) | 2023.11.17 |