error: Rendered more hooks than during the previous render
react-query 를 사용하는데 이런 에러를 만나게 되었다.
에러 콘솔을 확인해보니 렌더링 이전 훅스와 이후 훅스의 개수가 다르다는 것이었다.
상황
상황: 내 코드 상황은 이랬다.
reactQuery가 두곳에서 사용되었다.
부모 : reactQuery(카드 header) 보고 있음
자식 : reactQuery(카드 detail) 보고 있음
여기에서 새로운 카드를 발급 하기 위해서 add card를 누르게 되면
서버에서 값이 아니라 client 에서 새로운 카드 발급창이 생겨야 한다. (취소 할수 있기도 하니 클라이언트에서 관리한다.)
여기에서 isNew 카드 일경우 reactQuery를 호출하면 없는 값이라서 409에러가 나와서
reactQuery 이전에 isNew 값을 확인해서 빈 input 템플릿을 리턴해주었던 것이 화근이 되었다.
처음에는 Query훅스 문제인지 알았는데 검색을 통해서 찾아보니 나와 같은 문제를 겪은 분이 있어서 문제를 해결할수 있었다.
원본의 도움이 된 블로그 사이트 : https://kicksky.tistory.com/49
이분도 나와 비슷한 상황이었다. useEffect를 사용해서 값을 return햇기 때문에 아래 로직의 훅스 까지 도달하지 못하였고 이전 호출과 이후 호출때의 훅스의 개수가 달라서 문제가 발생한 것이었다..
해결
해결 :
나는 관심사를 분리 시켜줌으로써 해결했다.
기왕이면 같은 템플릿이고 함수도 같은것을 사용하는 것이 있어서 한 파일 내에서 관리하고 싶었는데
react-query훅스까지 로직을 타게 하면 에러를 뿜어서 아예 부모에서 isNew값이면 컴포넌트를 분리시켜서 새로운 카드 컴포넌트를 리턴하게 만들었다.
기존 : 부모 , 자식: (새로운 카드 로직) +(서버 카드 디테일 로직 - react Query)
분리 : 부모, 자식:(새로운 카드 만드는 컴포넌트) , (서버카드 디테일 로직 -reactQuery )
컴포넌트를 분리 시켜주었다.
결과
결과 : 한 코드내에서 다 관리하는게 같은 코드를 반복적으로 사용하지 않아서 더 좋은것이라고 생각이 들었는데
따로 분리시켜 놓으니 관심사가 달라서 한눈에 더 파악하기 쉬운것 같기도 하였다.
