인프런 커뮤니티 질문&답변
작성한 질문수
fetchOneBook API 사용하는거 대신 fetchBooks API 호출한 데이터를 props로 전달하는 방식으로 대체하기
해결된 질문
작성
·
43
0
안녕하세요!
좋은 강의 감사합니다.
이번 강의를 들으며, Link 를 사용해 /book/${id} API를 호출하여 데이터를 불러오는 방식 대신, fetchBooks API로 받아온 books 데이터를 props로 전달하는 방식은 어떨까 라는 생각이 들었습니다.
정답은 없는 것 같지만 강사님의 생각이 궁금해서 여쭤봤습니다.
답변 2
0
안녕하세요 이정환입니다.
말씀하신대로 구현할 경우 book/[id] 페이지로 바로 접속했을 때에는 데이터를 불러오는 작업이 불가능하게 됩니다. 만약 전역적으로 모든 도서의 정보를 불러온 다음 하나의 도서 정보를 추려 보여주는 방법으로 우회한다면 해결은 가능하겠지만 그만큼 많은 데이터를 백엔드 서버에게 요청하고 받아와야 한다는 점이 단점이 될 수 있습니다. 따라서 데이터의 개수가 가변적인 경우 보통은 요렇게 처리하게 됩니다 😃
0
안녕하세요, 인프런 AI 인턴입니다. qjatjs123123님.
먼저, 강의를 즐기고 계신다니 기쁘네요!
관심을 가져주신 부분은 굉장히 중요한 주제입니다. 데이터를 효율적으로 관리하고 전달하는 방법은 프론트엔드 개발에서 성능과 코드의 유지보수성에 큰 영향을 미칩니다.
fetchOneBook vs fetchBooks
fetchOneBook API 활용: 특정 도서에 대한 자세한 정보를 가져오는 데에 적합합니다. 이 접근 방식은, 예를 들어 상세 페이지에 들어갈 때마다 개별 도서 데이터를 서버에서 가져올 수 있다는 점에서 유리합니다. 이는 동적이고 변화가 잦은 데이터에 적합합니다.
fetchBooks로 데이터 전달 후 prop 사용: 모든 도서 데이터를 한 번에 가져와서 필요한 컴포넌트에 prop으로 전달하는 방식입니다. 특정 상황에서, 예를 들어 리스트 페이지에 모든 도서 정보를 이미 로드해둔 상태라면, 상세 페이지로 이동할 때 해당 리스트에서 필요한 정보를 참조하면 되기 때문에 API 호출을 별도로 하지 않아도 되는 효율적인 방법이 될 수 있습니다.
고려해야 할 점
데이터의 규모와 빈도: fetchBooks로 모든 도서 데이터를 한 번에 가져오는 것은 데이터의 양이 적고, 자주 갱신되지 않는 경우 유리할 수 있습니다.
성능과 사용자 경험: 모든 데이터를 한 번에 로드하는 경우 초기 로딩 시간이 길어질 수 있으며, 네트워크 대역폭을 많이 차지할 수 있습니다. 반면, 필요한 데이터만 로드하는 방식은 사용자에게 더 나은 경험을 제공할 수 있습니다.
관련된 구현 방식이 있는 질문으로 다음을 참고할 수 있습니다:
- SSR 실습 질문: 다이나믹하게 데이터 불러오기: 이 질문에서는 SSR을 사용한 데이터 관리 예제와 같은 방식으로 데이터를 효율적으로 가져오는 방법을 다루고 있습니다.
이러한 모든 부분을 종합적으로 고려하여, 프로젝트의 요구 사항과 성격에 맞는 최적의 방식으로 접근하시는 것이 좋습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
그러네요!!
답변 감사합니다