inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

Post Browser 페이징

Post 상태 관리

39

정재웅

작성한 질문수 6

0

  1. 서버로부터 받아오는 Posts를 <PostList/> 컴포넌트에서 상태로 관리하는데, 이것은 전역 상태로 관리하지 않는 이유가 있을까요?

  2. postStore에서 getTotalPages를 할때, 고정된 값 100을 사용했는데, 실제 서비스라면 어떻게 처리해야하나요?
    postStore에서 posts.length와 같은 전체 개수를 알아야할것같은데.

react react-router redux-toolkit zustand react.js

답변 2

0

수코딩

안녕하세요!

posts 상태는 다른 컴포넌트에서 사용하지 않기 때문에 전역 상태로 관리할 필요가 없습니다. 전역 상태 관리는 보통 여러 컴포넌트에서 상태를 공유해야 하거나, props로 전달하기 번거로울 때 활용하는 것이 좋습니다.

또 실제 서비스라면 posts를 불러오는 요청의 응답에 전체 게시물의 개수(total count)가 함께 포함되어 오는 경우가 많습니다. 그 값을 활용하면 페이지네이션 계산도 훨씬 수월해집니다.

도움이 되셨길 바랍니다 🙂
감사합니다!

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 정재웅님.

1. 컴포넌트에서 Posts 상태를 전역이 아닌 로컬 상태로 관리하는 이유

<PostList /> 컴포넌트에서 Posts를 상태로 관리하고 있다면, 이는 주로 다음과 같은 이유에서입니다:

  • 컴포넌트 독립성 유지: 특정 컴포넌트에서만 사용하는 상태는 해당 컴포넌트 내에서 관리하는 것이 좋습니다. 이는 코드의 복잡성을 줄이고 유지보수를 용이하게 하며, 불필요한 전역 상태 사용을 피할 수 있습니다.

  • 성능 최적화: 전역 상태로 관리하면 상태가 변경될 때 불필요한 컴포넌트들이 다시 렌더링 될 수 있습니다. 로컬 상태로 관리하여, 해당 컴포넌트가 필요할 때만 렌더링되는 장점을 얻을 수 있습니다.

2. postStore에서 getTotalPages를 사용할 때, 고정된 값 100의 대안

실제 서비스에서 페이지 수를 계산할 때는 고정된 값 대신 동적으로 전체 데이터의 크기를 파악해야 합니다:

  • API 응답 사용: 서버에서 데이터를 받을 때, 총 데이터 개수를 함께 받아오는 방법이 있습니다. 예를 들어, API가 데이터를 반환할 때 메타 정보를 포함하여 전체 개수를 전달할 수 있습니다.

  • 계산 기반 동적 처리: posts.length와 같은 방식으로 현재 가져온 데이터의 개수를 사용할 수 있지만, 초기 로딩 시 실제 API 응답에서 전체 데이터 개수를 함께 받아와야 페이지를 동적으로 계산할 수 있습니다.

이 점들을 고려하여 코드를 구현하신다면 더욱 효과적인 상태 관리와 데이터 처리 방식을 구현할 수 있을 것입니다.

관련된 추가 정보를 원하신다면, 아래의 링크들을 확인하시면 도움이 될 수 있습니다:
- React에서 컴포넌트별 상태 관리와 전역 상태 사용 방법
- API 응답에서 페이지네이션 처리하기

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

상태(State) 가 "시간이 지남~" 에 대해 질문 있습니다.

0

34

2

import {} 중괄호 차이점

0

38

2

[ 문의]몽고DB connect 의 건

0

47

2

제공되는 react_code.zip 중에 ..

0

47

2

커리큘럼 비활성화

0

46

2

설명하시는 개념들을 잘 모르겠습니다.

0

43

2

이해가 절반 정도 되는데요.

0

56

1

styled-components(전역)

0

56

1

cloudinary 관련

0

71

3

useOptimistic 실전-1 useState

0

87

2

discord 초대장 갱신이 필요한거같습니다.

0

83

1

할일 관리 앱(메모이제이션)

0

99

2

Web 플랫폼 등록

0

141

2

함수 정의 기준

0

87

2

fetch는 사용되는가

0

88

2

전역상태 관리 선택 기준

0

110

2

tailwind css는 언제 사용되는가 또 다른 css와의 차이

0

210

2

카카오 web플랫폼 등록

0

193

2

컴포넌트 그리고 폴더 구조에 대해

0

78

2

152강 보는중입니다. 초시계부분이구요. 넘버가 timeout을 받을수없다는 에러가 나오고 있어요

0

52

1

폼테그 다른 태그를 하나의 상태 객체로 묶기

0

55

2

class를 className으로 전부 수정하실 때

0

50

2

JWT에 대한 개념도 학습할 수 있나요?

0

74

2

수업자료 다운로드

0

61

2