개발자
리액트쿼리 고수 찾아요!
현재 관리자페이지를 구현중에 있습니다. 수정페이지와 추가페이지를 하나의 컴포넌트 페이지로 구현하려다보니 페이지 진입했을 때에 useParams 로 분기를 나누어 해당 깂으로 useQuery 사용하여 수정일때는 get 하고 추가일때는 안하도록 enabled 옵션을 사용해서 구현하였더니 페이지 컴포넌트 내에 console.log 가 몇수십번씩 찍힙니다ㅠㅠ 리랜더링이 되는것 같은데.. enabled 를 사용히지 않으면 리랜더링이 저렇게 많이 되지 않습니다. 추가와 수정페이지를 나누어서 구현해야할지 다른 해결방법이 있을까요?
답변 1
다양하게 사용할 컴포넌트를 만드신다면 그 컴포넌트 내부에서 데이터 패칭을 하시는 것보다 그 상단에서 정해주는것이 더 좋을 것 같습니다. (2회 이상 혹은 여러번 재활용되는 컴포넌트는 딱 필요한 정보만 넣거나 받아서 보여주는 방식이 좋습니다.) 수정페이지, 추가페이지의 부모 컴포넌트에서 get이 필요한 페이지의 데이터를 가져와 자식에게 props로 넘겨주는 것을 추천드립니다. 적어주신 enabled의 경우 비로그인 로그인을 분별하기 힘들 때 (해당 페이지 진입 시 원하는 key나 id가 있는지 없는지 모르는 경우) 등에 이용하며 적어주신 이미 수정이나 추가등에 들어가기 전 확실하게 get을 해야할지 안해야될지가 정해진 경우에는 다른 방식이 더 바람직해 보입니다.
익명
작성자
2024년 01월 31일
답변 감사합니다! enabled 이 해결방안이 되지 않더라고요ㅠ
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 01월 31일
React 고수가 되고 싶어하시는군요, 그러한 열정 좋습니다. React-query의 useQuery hook은 dependency array로 전달된 값들이 변경될 때 마다 쿼리를 다시 실행합니다. 이 때문에 useParams로 받아온 값이 변하면 계속해서 쿼리가 실행될 것입니다. 설정 mutation을 사용하는 경우에도 문제가 될 수 있습니다. mutation 후에 데이터를 다시 불러와야 하기 때문에 enabled 옵션을 활성화하게 되면서 리랜더링이 발생할 수 밖에 없습니다. 다른 해결 방법 중 하나로는 수정 페이지와 추가 페이지를 별개의 컴포넌트로 분리하는 방법이 있습니다. 각각의 컴포넌트에서 필요한 쿼리만 실행하면 리랜더링은 최소화되며 가독성과 유지보수성도 향상될 것입니다. 또 다른 해결책으로는 useQuery의 select 옵션을 사용하여 필요한 부분만 렌더링하는 것입니다. 이 방식을 사용하면 쿼리 데이터의 일부만 변경되어도 전체 컴포넌트가 리랜더링되지 않습니다. 아니면, enabled 옵션 대신 react-query의 staleTime 옵션을 조절하는 것도 한 가지 방법입니다. StaleTime은 쿼리 데이터가 새로운 것으로 간주되는 시간을 정의합니다. 이 값을 충분히 크게 설정하면, 페이지 진입시마다 쿼리가 실행되는 것을 막을 수 있습니다. 모든 방법이 당신의 상황에 따라 다르기 때문에 모든 경우를 고려하여 가장 최선의 방법을 선택하는 것이 중요합니다. 화이팅하세요!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!