스크럼 회의(14:00)
리드미 완성은 중간발표 이후 ~ 최종 발표 전
=> 트러블 슈팅 등 안 들어간 내용 위주로 정리할 것
(PostList.jsx)
const PostList = ({ posts, detail, __getDetail, state, setState }) => {
const navigate = useNavigate();
const dispatch = useDispatch();
const params = useParams();
const onClickHandler = (data) => {
dispatch(__getDetail(data));
navigate(`${detail}/${data}`);
};
const [page, setPage] = useState(0); //페이지수
const [loading, setLoading] = useState(false);
const [ref, inView] = useInView();
/** 서버에서 아이템을 가지고 오는 함수 */
const obj = {
page : page,
state: state,
}
const getItems = useCallback(async () => {
//의존하는 값(deps)들이 바뀌지 않는 한 기존 함수를 재사용할 수 있습니다.
dispatch(__getAddPost(obj));
}, [page, params]);
// `getItems` 가 바뀔 때 마다 함수 실행
useEffect(() => {
getItems();
}, [getItems]);
useEffect(() => {
setState({ ...state, pageNumber: page });
}, [page]);
useEffect(() => {
// 사용자가 마지막 요소를 보고 있고, 로딩 중이 아니라면
if (inView && !loading) {
setPage((prevState) => prevState + 1);
}
}, [inView, loading]);
useEffect(() => {
setPage(0);
}, [params]);
...
...
<div ref={ref}></div>
<Div></Div>
// 바뀌는 파트 찾아서 ref 걸기. Div는 공간 만들기용
(PostsSlice.jsx)
export const __getAddPost = createAsyncThunk(
"posts/__getAddPost",
async (payload, thunkAPI) => {
console.log(payload)
try {
const data = await axios.get(
`${process.env.REACT_APP_SERVER}/api/post/${payload.state.paramObj}?page=${payload.page}&size=${payload.state.pageSize}&sort=${payload.state.postSort},DESC`,
//백엔드에서 받아온 uri 맞춰주기
{
headers: {
"Content-Type": `application/json`,
Access_Token: accessToken,
Refresh_Token: refreshToken,
"Cache-Control": "no-cache",
},
}
);
const obj = {
payload: payload.page,
data: data.data.content
}
// obj로 받아서 fulfill 시켜주기
return thunkAPI.fulfillWithValue(obj);
} catch (error) {
return thunkAPI.rejectWithValue(error);
}
}
);
...
...
[__getAddPost.fulfilled]: (state, action) => {
state.isLoading = false;
if(action.payload.payload === 0) {
state.posts.splice(0)
state.posts.push(...action.payload.data)
}else{
state.posts.push(...action.payload.data)
}
// 페이지 값이 0이 되게 하고 계속 반복되도록 한 로직