5 글 보임 - 1 에서 5 까지 (총 5 중에서)
-
서버쪽 코드는 이런식으로 작성해놨어요 처음엔 3개를 꺼내오고, 더보기 버튼을 누를때마다 +3해주는식으로요
프론트쪽에서는 이렇게..
그리고 dispatch(fetchGetPosts());는 이런식으로 짰어요
// 전체 게시글 가져오기 export const fetchGetPosts = createAsyncThunk( 'posts/fetchByPosts', async (params) => { const { data } = await axios.get('/api/posts', { params });return data; } ); export const postsSlice = createSlice({ name: 'postSlice', initialState: { loading: false, posts: [], post: [], error: null, },extraReducers: (builder) => { builder .addCase(fetchGetPosts.pending, (state, action) => { state.loading = true; state.posts = []; }) .addCase(fetchGetPosts.fulfilled, (state, action) => { state.loading = false; state.posts =action.payload; }) .addCase(fetchGetPosts.rejected, (state, action) => { state.loading = false; })} 대충보기만해도 코드에 문제가 많은거같은데 뭐가 문제인지 갈피를못잡겠습니다.. 초기에는 세개만 잘 보여주는데 더보기버튼을누르면 계속 세개만 보여줘요 (다음 세개의 데이터를 출력해줌) 보기 편하게 영상으로 남겼어요 (클릭)
제가 기대하는 바는 버튼을누르면 기존의 세개 + 세개 = 총 6개, 그다음은 9개 이런식으로 늘어나게끔해주고싶은데.. 서버쪽과 프론트쪽 어느쪽에서 잘못된걸까요? 서버쪽 코드는 그대로두고 프론트쪽에서 state.posts= action.payload; 이 부분을 수정해보고자해봤는데 잘안되네요.. 시도해본것 const copy = [...state.posts]; copy.push(action.payload); state.posts=copy;
등등...
선생님 답변감사합니다. 선생님이 말씀하신대로 코드 작성해보고 다르게 작성하는중인데요,
아래처럼 코드를 짰는데 let page << 이거를 Home 컴포넌트 바깥에 명시해준게 좀 거시기한거같아서요..
리액트사용할때 이런식으로 처리해줘도 괜찮은건가요?
const [page, setPage] = useState(1);
const handlePageChange = async () => { setPage(page+1);params = { page };axios .get('/api/posts', { params }) .then((res) => setPosts([...posts, ...res.data])); };이런식으로 해봤는데, page가 밀려서 저장되더라구요 (state의 비동기..) 그래서 이런식으로도 let page =1; 을 Home 컴포넌트 안에 작성해줘보자해서 해봤는데,
const Home = () => { let page = 1;let params;
const [posts, setPosts] = useState([]); const [loading, setLoading] = useState(false);
const handlePageChange = async () => { page++;params = { page };axios .get('/api/posts', { params }) .then((res) => setPosts([...posts, ...res.data])); };처음한번은 잘되다가 두번쨰부터는 값이 안변하더라구요.. 질문요약: useState로 page 값을 관리하고싶은데 이런경우는 어찌해야할까요?
5 글 보임 - 1 에서 5 까지 (총 5 중에서)
- 답변은 로그인 후 가능합니다.