인프런 커뮤니티 질문&답변

제로초님 안녕하세요. 

react-router를 이용해서 중첩된 구조의 페이지를 만들던 도중에 궁금한 점이 생겨서 여쭤보려고 합니다. 

현재 HomePage 컴포넌트에서 비동기로 patients list를 가져오고 이 데이터를 가지고 HomePage 안에서 PatientsList와 그 안에 있는 PatientNameCard와 같은 하위 컴포넌트들을 생성하고, PatientNameCard를 클릭하면 그 데이터와 연결된 PatientPage로 이동합니다. 노드버드 강좌를 들으면서 mainPosts를 통해서 post를 전부 다 받아와서 PostCard 하나하나에 데이터를 넣어주는 방식을 참고해서 이렇게 구현했는데요. PatientPage로 이동할 때는 HomePage에서 PatientsList 컴포넌트가 있던 자리만 PatientPage 컴포넌트로 바뀌고요. 그런데 HomePage를 거쳐서 PatientPage로 넘어가면 문제가 없는데, HomePage를 거치지 않고 url을 이용해서 PatientPage로 넘어가면 patients list 데이터를 가져오는 과정이 생략되니 에러가 발생하는데요. 리덕스를 이용해서 앱의 전체적인 상태관리를 하면서 세부적으로 중첩된 라우터를 사용하다보니 생기는 이슈인 것 같은데, 이런 경우는 어떻게 해결을 하고, 또 어떤 식으로 구조 설계를 하는 것이 좋을까요? 

일단 PatientPage로 왔을 때 데이터가 없을 경우 따로 비동기 요청을 해서 그 patient에 해당하는 데이터만 받아오도록 하면 작동은 하게 만들 수 있을 것 같은데, 이런 방식이 반복되면 라우터 구조가 더 복잡해지거나 했을 때 전체적인 상태 관리를 하는 게 복잡해질 것 같다는 생각이 들어서 좋은 해결책인지는 잘 모르겠고요. 그렇다고 patient 페이지 하나를 띄우기 위해서 patients list를 다 받아오게끔 하는 것도 비효율적인 것이 아닌가 하는 생각이 듭니다. 

아니면 애초에 patients list를 받아올 때도 리스트를 보여주기 위한 최소한의 정보만 받아오고 PatientPage에서도 리덕스 스토어의 patients list에 저장된 데이터를 받아오는 것이 아니라 따로 비동기 요청을 해서 해당 Patient를 위한 정보만 받아와서 보여주는 식으로 전체적인 설계를 변경해야하나 하는 생각도 해보았는데, 비동기 요청은 되도록이면 줄이는 게 좋지 않은가 하는 생각이 들기도 해서요. 아니면 아예 이런 식으로 접근하지 못하게 데이터가 없을 때는 잘못된 경로라는 식으로 응답을 줘버려야하는 생각이 들기도 합니다. 

리덕스로 전체적인 상태 관리를 하면서 라우터의 구조가 복잡해지는 경우는 현업에서도 자주 있는 일일 것 같은데, 혹시 이런 경우는 어떤 식으로 다루는지 궁금합니다. 매번 감사합니다.