Post 상태 관리
43
작성한 질문수 6
서버로부터 받아오는 Posts를 <PostList/> 컴포넌트에서 상태로 관리하는데, 이것은 전역 상태로 관리하지 않는 이유가 있을까요?
postStore에서 getTotalPages를 할때, 고정된 값 100을 사용했는데, 실제 서비스라면 어떻게 처리해야하나요?
postStore에서 posts.length와 같은 전체 개수를 알아야할것같은데.
답변 2
0
안녕하세요!
posts 상태는 다른 컴포넌트에서 사용하지 않기 때문에 전역 상태로 관리할 필요가 없습니다. 전역 상태 관리는 보통 여러 컴포넌트에서 상태를 공유해야 하거나, props로 전달하기 번거로울 때 활용하는 것이 좋습니다.
또 실제 서비스라면 posts를 불러오는 요청의 응답에 전체 게시물의 개수(total count)가 함께 포함되어 오는 경우가 많습니다. 그 값을 활용하면 페이지네이션 계산도 훨씬 수월해집니다.
도움이 되셨길 바랍니다 🙂
감사합니다!
0
안녕하세요, 인프런 AI 인턴입니다. 정재웅님.
1. 컴포넌트에서 Posts 상태를 전역이 아닌 로컬 상태로 관리하는 이유
<PostList /> 컴포넌트에서 Posts를 상태로 관리하고 있다면, 이는 주로 다음과 같은 이유에서입니다:
컴포넌트 독립성 유지: 특정 컴포넌트에서만 사용하는 상태는 해당 컴포넌트 내에서 관리하는 것이 좋습니다. 이는 코드의 복잡성을 줄이고 유지보수를 용이하게 하며, 불필요한 전역 상태 사용을 피할 수 있습니다.
성능 최적화: 전역 상태로 관리하면 상태가 변경될 때 불필요한 컴포넌트들이 다시 렌더링 될 수 있습니다. 로컬 상태로 관리하여, 해당 컴포넌트가 필요할 때만 렌더링되는 장점을 얻을 수 있습니다.
2. postStore에서 getTotalPages를 사용할 때, 고정된 값 100의 대안
실제 서비스에서 페이지 수를 계산할 때는 고정된 값 대신 동적으로 전체 데이터의 크기를 파악해야 합니다:
API 응답 사용: 서버에서 데이터를 받을 때, 총 데이터 개수를 함께 받아오는 방법이 있습니다. 예를 들어, API가 데이터를 반환할 때 메타 정보를 포함하여 전체 개수를 전달할 수 있습니다.
계산 기반 동적 처리:
posts.length와 같은 방식으로 현재 가져온 데이터의 개수를 사용할 수 있지만, 초기 로딩 시 실제 API 응답에서 전체 데이터 개수를 함께 받아와야 페이지를 동적으로 계산할 수 있습니다.
이 점들을 고려하여 코드를 구현하신다면 더욱 효과적인 상태 관리와 데이터 처리 방식을 구현할 수 있을 것입니다.
관련된 추가 정보를 원하신다면, 아래의 링크들을 확인하시면 도움이 될 수 있습니다:
- React에서 컴포넌트별 상태 관리와 전역 상태 사용 방법
- API 응답에서 페이지네이션 처리하기
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
react-fetch -2 (loading) 에러
0
42
2
useEffect return문
0
47
3
할 일 수정 질문
0
44
2
컴포넌트 분리하기 강의 편
0
48
2
몽고디비 접속의 건
0
50
3
소스코드 제공여부
0
61
2
기본 파일 구조
0
57
2
공부방향에 대한 조언
0
76
2
styled-components
0
53
2
상태(State) 가 "시간이 지남~" 에 대해 질문 있습니다.
0
66
2
import {} 중괄호 차이점
0
63
2
[ 문의]몽고DB connect 의 건
0
79
2
제공되는 react_code.zip 중에 ..
0
81
2
커리큘럼 비활성화
0
69
2
설명하시는 개념들을 잘 모르겠습니다.
0
77
2
이해가 절반 정도 되는데요.
0
80
1
styled-components(전역)
0
76
1
cloudinary 관련
0
98
3
useOptimistic 실전-1 useState
0
106
2
discord 초대장 갱신이 필요한거같습니다.
0
99
1
할일 관리 앱(메모이제이션)
0
124
2
Web 플랫폼 등록
0
187
2
함수 정의 기준
0
102
2
fetch는 사용되는가
0
103
2





