React-query 데이터 업데이트

문제 발생

---

Explore 페이지에서 top Latest People로 이동할때 데이터가 제대로 업데이트가 안된채 prop로 넘겨지는 문제가 발생.

 

설명

---

 

데이터가 넘겨지는 과정

Explore 페이지에서 react-query로 데이터를 받음

➡️ 성공하면 응답값을 set함수로 exploreData라는 state에 담기

➡️ tweetBox컴토넌트에 prop으로 exploreData 넘겨줌

여기서 다른 종류의 데이터를 받아와야하는 페이지로 이동하면 과거의 데이터만 보내지고 새로운 데이터로 업데이트가 안됨.

 

Chat gpt에 물어봤더니 두가지 방법을 제시해줌.

1. react-query에서 자동적으로 업데이트 시켜주는 data를 prop으로 바로 보내주거나

2. useCallback으로 exploreData 상태를 업데이트하는 함수를 만든다음, useEffect을 사용해서 데이터가 변경될때마다 set함수 실행시켜주기

 

 

 ✅ 도움이 되었던 답변

 

react-query에서 set 함수를 사용하면 exploreData가 업데이트되어도 해당 데이터를 사용하는 컴포넌트가 자동으로 업데이트되지는 않습니다.직접 set 함수를 사용하여 exploreData 값을 업데이트하면 useQuery 훅에서 반환하는 데이터 객체의 data 값은 변경되지 않습니다. 따라서, 해당 데이터를 사용하는 컴포넌트가 자동으로 업데이트되지 않습니다.이 문제를 해결하기 위해서는 set 함수를 사용하는 대신, mutate 함수를 사용하여 exploreData 값을 업데이트해야 합니다.

 

🚨 react-query에서 onSuccess 콜백함수로 exploreData가 자동적으로 업데이트 되는데 왜 tweetBox에 prop으로 넘겨줄때는 exploreData가 업데이트가 되지 않은채 넘어가는지 아직도 이해가 안되어서 다시 찾아봄

 

그 결과… 다음과 같은 답변을 받았다.

 

props의 reference가 전달됩니다. 이 말은 즉, props가 변경되면 해당 값이 전달된 자식 컴포넌트에서 props를 다시 받아와도, props의 reference가 같기 때문에 이전에 받아온 값과 동일한 값을 받아오게 된다는 것입니다.

따라서, tweetBox 컴포넌트에 전달된 exploreData prop은 초기 렌더링 시에 해당 값의 reference가 전달되어 해당 컴포넌트 내부에서 사용됩니다. 그 이후, exploreData 값이 변경되어도, 해당 값을 받아와서 다시 렌더링하는 것이 아니라, 변경된 값의 reference가 생성되어 해당 컴포넌트 내부에서 사용되는 것이 아니기 때문에 변경된 값을 감지할 수 없게 됩니다.

 

결론

---

 

 

1️⃣ exploreData를 변경할때 set함수를 사용하더라도 같은 reference를 참조하기때문에 리렌더링이 일어나지 않는다.

2️⃣ 따라서 업데이트된 데이터 값을 tweetBox에 prop값으로 넘겨주고 싶으면 prop값으로 data.data.data값을 넘겨주거나(react-query에서는 이전 data값과 다른 경우 컴포넌트를 자동적으로 리렌더링하기때문에)

3️⃣ useEffect를 사용해서 setExploreData가 발생될떄마다 리렌더링 발생시키야한다.