개발자
안녕하세요! api를 활용해서 데이터 받아와서 게시판형태로 list로 뿌리고 게시글 누르면 본문보이는 간단한 형태의 게시판을 만들어보는중 입니다. api를 이용해서 가져오는 함수를 재사용하고싶은데 잘안되네요.. list페이지에서 데이터 전부받아오기위해서 axios로 값을 받아와서 뿌리고, 게시글 누르면 넘어오는 id값으로 디테일페이지를 보려고하면. 또 다시 디테일페이지에서 axios로 api에 접근해서 값을 가져와야하나요? 서칭을해봤는데 다들 그냥 페이지마다 비동기로 값을 받아오는거같은거같은데 재사용보다 매번받아오는게 옳은건가요? redux를 학습하고싶어서 해보는데 잘안되네요..
답변 2
요청 결과가 매번 변경된다면(추천 알고리즘) 매번 받아오는게 올바른 방식입니다. 그게 아니라면 캐싱을 하거나 redux 상태에 보관해두거나 페이지가 reload 되도 값을 유지하고 싶다면 localstorage에 보관하는 방법도 있습니다. 근데 보통 매번 불러오는 방식을 사용하긴 합니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 10월 24일
리액트에서 API를 통해 데이터를 불러오는 경우, 일반적으로 컴포넌트 생명주기(Life Cycle) 혹은 Hooks (useEffect 등)을 이용해 페이지를 로드할 때 한 번만 데이터를 불러옵니다. 이때 불러온 데이터는 Redux와 같은 상태 관리 도구를 써서 전역적으로 접근 가능하도록 저장합니다. 게시글 리스트 페이지에서 API로부터 모든 게시글 정보를 받아와 각 게시글의 간략한 정보(제목, 작성 시간 등)을 리스트로 보여주고 있다면, 각 게시글을 클릭했을 때 다시 API에 요청해서 본문 내용을 받아 올 필요 없이 처음에 받아온 게시글 정보 중 상세 정보를 그대로 사용하면 됩니다. 다만, 이렇게 full-text data가 크거나 실제 사용자가 모든 데이터를 확인하지 않는 경우, 예를 들어 검색 결과의 목록과 같이 디테일 페이지에서 필요한 추가 데이터가 있는 경우에는 굳이 처음부터 모든 데이터를 로드하는 것보다는, 사용자가 해당 디테일 페이지에 접근할 때마다 필요한 부분만 API 요청을 통해 가져오는 것이 효율적입니다. Redux toolkit 은 slice라고하는 기능 단위로 리듀서와 액션을 함께 관리하면서 비동기 처리를 위한 thunk 등을 내장하고 있어 복잡한 작업을 좀 더 편리하게 할 수 있습니다. 이를 활용하여 동일한 API 호출에 대한 액션을 재사용 하려면 createAsyncThunk를 사용해서 비동기 액션을 만들 수 있습니다. 따라서, 데이터의 용량, 요청 빈도 등 상황에 따라 전체 데이터를 미리 받아오는 것과 필요할 때마다 부분적으로 요청하는 것 중 적절한 방법을 선택하는 것이 중요합니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!