-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
전역상태관리에 추가적으로 특정페이지별로 상태관리가 필요할때에 대해 질문드립니다
23.10.12 15:49 작성 조회수 313
0
안녕하세요 선생님,
전역상태관리에 추가적으로 특정페이지별로 상태관리가 필요할때에 대해 질문드립니다,
아토믹패턴을 구현할려다보니 props drilling이 너무 많이 일어나서 recoil로 상태관리를 시도했는데 전역에 필요한 상태들말고 특정페이지에서만 쓰이는 상태들까지 포함이 되니 파일이 너무 지저분해져서요,
특정페이지 상태관리는 context api, 전역은 recoil, 이런 조합으로 써도 될까요?
아니면 다른 더 좋은 방법이 있을까요? 감사합니다
답변을 작성해보세요.
0
노원두
지식공유자2023.10.13
안녕하세요! Chansoo님!
컴포넌트 구조를 설계하시는데에 도움을 드리자면, 우선 너무 깊은 depth는 자제해 주시는게 좋을 것 같아요!
물론 예외는 있겠지만, 최대 4단계정도로만 내려가겠다! 정도를 기준으로 잡아주시면 좋을 것 같아요!
이러한 상황아래, 마지막 depth에 존재하는 단위 컴포넌트(또는 아톰 및 몰러큘정도)는 일반적으로, 유저서비스, 관리자서비스, 사장님서비스 등 여러 프론트엔드에서 재사용해야하므로 일반적으로 사내 private npm에 라이브러리로 올려놓고 다운로드 받아서 사용하게 됩니다.
따라서, 이 최종depth로의 props 이동은 반드시 필요하며, 이를 제외하면 나머지 최대 2~3단계 정도의 drilling이 일어날 수 있겠어요!
여기서 나머지 2단계정도는 props.children을 활용한 컴포넌트 합성 방식으로 문제를 해결하실 수 있습니다.(수업에서 리팩토링 git에 포함되어 있으니 참고해 보세요!^^)
이렇게 되면, 정말 어쩔 수 없는 drilling을 제외하고는 hooks, 로컬데이터캐시(recoil), 서버데이터캐시(react-query 또는 apollo-client) 정도로만 깔끔하게 해결 가능합니다!^^
추가로, context-api는 불필요한 리렌더링(부모컨텍스트의 자식 A, B중 A가 바뀌면 B도 리렌더링 되는 문제) 문제가 있으므로 추천드리지는 않으며, 그럼에도 불구하고 위 3개 이외에 저장소가 필요하시다면, recoil을 나눠보실 것을 추천드려봅니다!^^
Chansoo
질문자2023.10.13
답변감사합니다, context-api사용은 피해야겠네요,
추가로 하나만 더 질문드릴게요,
예를들어 아토믹패턴에서 searchBar컴포넌트가 몰러큘에 포함되고 searchPage에 비즈니스로직을쓰면 상태올리기를 3단가량 해야하는데 차라리 searchTerm상태는 recoil로 처리하는게 나을까요?
노원두
지식공유자2023.10.17
네! Chansoo님!
설계에 따라 많이 달라질 것 같아요!
따라서, drilling이 많이 일어나는 상황이라면 가급적 구조 재설계로 문제를 해결하시는게 더 효율적일 것 같아요!
만약, Searchbar와 list를 묶을 수 있다면 이를 묶어서 한번의 props 끌어올리기로 처리하시면 좋을 것 같아요!(물론 Searchbar 내부에서 drilling이 일어날 수 있으나 이는 Searchbar를 npm에 업로드하였다는 가정으로 배제하도록 할게요)
다음으로, Searchbar와 list를 묶을 수 없는(두 컴포넌트가 멀리 떨어진) 상황이라면 recoil 등의 전역상태를 사용하는 방법이 대안이 될 것 같아요!
가급적 설계를 검토하시어 심플하게 문제를 풀어내는게 장기적으로도 복잡도를 줄이며 유지보수성을 높일 수 있을 것 같아요!
답변 1