Conversation
|
스크롤이 계속 되고 상세페이지 넘어간 후에 뒤로가기 눌렀을때 예를들어, 사용자가 위 흐름대로 하고싶었는데요. 아니면 다른 방식이 있는지 궁금합니다. |
| const [boards, setBoards] = useState<Board[]>([]); | ||
| const [isFetching, setIsFetching] = useState(false); | ||
| const [hasMore, setHasMore] = useState(true); | ||
| const [isLoading, setIsLoading] = useState(false); |
There was a problem hiding this comment.
api호출하는 부분만을 뭔가.. 공통적으로 쓰게 hook을 만들고 싶었는데
문제가 많더라구요..useApi 이렇게 만들어놓긴했는데 저걸 가져다쓰니까 데이터가 strict mode도 껐는데 데이터가 2번호출되고.. 먼가 꼬여서 일단은 한곳에 넣어두었습니다.
api호출부분만을 공통적으로 따로 빼는 방향을 어떻게 잡아야할지 궁금합니다
There was a problem hiding this comment.
P3:
멘토링때 같이 보고 된다고 말씀하셨던 기억이 납니다~
만약 문제가 생긴다면 어떤 점이 문제인지 더 자세히 말씀해주시면 답변하는데 도움이 될 것 같아요!
There was a problem hiding this comment.
희진님 이번 스프린트 미션 고생하셨습니다~
작업도 잘 하셨고 고민하셨던 부분은 멘토링때 얘기해주셔서 크게 코멘트 드릴 부분이 없었습니다 👍
고민하셨던 부분들과 이에 대한 방법도 얘기 나눴으니 다음에는 이를 구현해보시면 좋을 것 같습니다~
스크롤이 계속 되고 상세페이지 넘어간 후에 뒤로가기 눌렀을때
해당위치에 스크롤을 위치하고 싶었는데..못했습니다.
예를들어, 사용자가
스크롤위치: 500
page: 10
까지 목록에서 보고 맨밑의 게시물 상세 페이지를 클릭함
->
상세페이지에서 뒤로가기를 함
->
그럼다시 스크롤위치: 500에 page: 10까지 봤던 곳으로 뒤돌아감
위 흐름대로 하고싶었는데요.
그럴려면 뒤로가기 했을때 (목록페이지에서)
page:10 & 스크롤위치 기억해두었다가
page:1,2,3,4,5,,,10 api를 하나씩 다시 호출해서 모든 게시물을 다시 조회하고, 스크롤위치를 시켜야하는 방향으로 해야하는건지
아니면 다른 방식이 있는지 궁금합니다.
세부 동작은 다를 수 있겠지만 -예를 들어 위의 예시처럼 10개씩 10 page까지 본 경우, 호출 횟수를 줄이기 위해 처음에는 1 페이지에 100개의 page 사이즈로 호출한다던지- 위의 동작 방식을 구현하기 위해서는 생각하신 것처럼 page와 스크롤 포지션 값을 저장해두시고 이를 구현해야합니다.
|
|
||
| useEffect(() => { | ||
| wrappedFunction(params); | ||
| }, [JSON.stringify(params), wrappedFunction]); |
There was a problem hiding this comment.
P3:
왜 이렇게 하셨을까요? 가능하면 param을 deps array에 넣어주시고
이를 통해 구현하고자 하셨던 바는 다른방식으로 구현하시는것이 더 좋을 것 같아요
| }, [JSON.stringify(params), wrappedFunction]); | |
| }, [params, wrappedFunction]); |
| const [boards, setBoards] = useState<Board[]>([]); | ||
| const [isFetching, setIsFetching] = useState(false); | ||
| const [hasMore, setHasMore] = useState(true); | ||
| const [isLoading, setIsLoading] = useState(false); |
There was a problem hiding this comment.
P3:
멘토링때 같이 보고 된다고 말씀하셨던 기억이 납니다~
만약 문제가 생긴다면 어떤 점이 문제인지 더 자세히 말씀해주시면 답변하는데 도움이 될 것 같아요!
| {isLoading && <div>Loading...</div>} | ||
| {error && <div>{error}</div>} | ||
| </section> | ||
| <div ref={observerRef} style={{ height: '1px' }}></div> |
There was a problem hiding this comment.
P3:
해당 태그가 보이면 데이터를 추가로 가지고 오게 되니 이러한 요소는 마지막 요소보다 마지막에서 조금 더 위의 요소,
예를 들면 10개의 아이템중 마지막이 아닌 7번째 요소에 이벤트를 걸어두는 것이 더 좋습니다.
그러면 유저의 스크롤이 다 되기전에 미리 데이터를 불러오게 되어 UX 측면에서 장점이 있습니다.
요구사항