🚨 문제 발생
잘못된 리덕스 사용
저번주에 API 데이터를 redux 대신 react-query 담아오도록 변경했다.
⇒ 이 과정에서 api데이터는 react-query로 가져오고 그중 현재 페이지 트윗데이터는 또 redux로 관리하였다.
⇒ react-query로 가져온 서버데이터를 또 redux에 담는것이 어색하고 불필요하게 느껴졌다.
⇒ redux에 담은 이유는 무한스크롤링에 따라 페이지가 변할때마다 현재 페이지 데이터를 변수에 담아서 트윗 박스에 보내주기 위함이었는데 이 데이터는 다른 곳에서 사용되는 것이 아니라 트윗 페이지에서만 사용되는 데이터이기때문에 store에서 전역변수로 관리될 필요가 없었다.
잘못된 컴포넌트 분리
또한 컴포넌트 파일로 분리한 tweetBox파일에서 데이터를 가져와서 관리하고 있었다.
⇒ 컴포넌트를 분리하는 이유는 그 레이아웃을 분리해서 재사용하기 위해서이다. 따라서 데이터를 그 컴포넌트 파일에서 관리할게 아니고 페이지 파일에서 props로 데이터를 넘겨줘서 로딩하고, 컴포넌트 파일에서는 컴포넌트 레이아웃만 사용하는것이 올바른 사용이다.
const { isLoading, isError, data, error } = useQuery(
["selectExploreData", pageCount],
tweetFocusApi,
{
refetchOnWindowFocus: true, // react-query는 사용자가 사용하는 윈도우가 다른 곳을 갔다가 다시 화면으로 돌아오면 이 함수를 재실행합니다. 그 재실행 여부 옵션 입니다.
retry: 0, // 실패시 재호출 몇번 할지
onSuccess: (res: any) => {
console.log(res.data.data);
dispatch(changeCurrentPosts(res.data.data));
},
onError: (e: any) => {
console.log(e.message);
},
}
);🙋🏻♀️ 해결과정
✅ 컴포넌트 레이아웃만 분리해서 사용하고 필요한 데이터는 페이지 파일에서 props로 넘겨주었다.
잘못 사용되고 있었던 컴포넌트 파일이 두개나 있었다.
- tweetBox
- searchBar
⇒ 둘다 레이아웃은 두고 데이터는 props로 받아쓰는걸로 수정하였다.
tweetBox컴포넌트
//explore 페이지
<TweetBox data={exploreData} />
//tweet 페이지
<TweetBox data={addData} />
const TweetBox = (prop: any) => {
let data = prop.data;
/////
}search컴포넌트
//explore페이지
<Searchbar onSearchbar={onExploreSearch} />
//message페이지
<Searchbar onSearchbar={peopleApi} />
const Searchbar = (onSearchbar: any) => {
const onSearch = (event: any) => {
dispatch(changSearchState(search));
event.preventDefault();
onSearchbar.onSearchbar();
};
<button
type="submit"
onClick={onSearch}
className="p-2.5 ml-2 text-sm font-medium text-white bg-blue-300 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600"
>
<span className="sr-only">Search</span>
</button>
}redux로 관리하던 데이터를 props로 넘겨주기 위한 과정에서 많은 에러들을 발견했다.
- axios 요청보낼때 params 데이터 또는 focus 데이터가 업데이트가 안됨.
⇒ ✅ queryKey에 변수로 담아주니까 해결됨. queryKey가 업데이트가 되면서 각 변수값도 업데이트가 되어서 들어갈것이라고 예상했음. 그 전에는 쿼리키가 모두 무효화되어도 변경되어야하는 값들이 변수로 관리되어지지 않아서 똑같은 값으로 들어갔을거라고 추측.
데이터를 변경 하는 state가 있는 경우 Key가 변경 될 때 마다 React Query가 트리거 되어 자동으로 refetching하기 때문에 우리는 Key에 저장하기만 하면 된다. 필터를 적용하려면 state를 변경 시키면 된다.
//api요청 함수
const tweetFocusApi = () => {
return customAxios.get(`/getTweets/${focus}`, {
params: { search, currentPage },
const { isLoading, isError, data, error } = useQuery(
//변경전 ["selectExploreData", pageCount],
//변경후
["selectExploreData", currentPage, focus],
tweetFocusApi,
{
refetchOnWindowFocus: true, // react-query는 사용자가 사용하는 윈도우가 다른 곳을 갔다가 다시 화면으로 돌아오면 이 함수를 재실행합니다. 그 재실행 여부 옵션 입니다.
refetchOnWindowFocus: true,
// react-query는 사용자가 사용하는 윈도우가 다른 곳을 갔다가 다시 화면으로 돌아오면 이 함수를 재실행합니다. 그 재실행 여부 옵션 입니다.
retry: 0, // 실패시 재호출 몇번 할지- onSearch is not function 에러
기존의 코드는 onSearchbar()로 되어있었음.
const onSearch = (event: any) => {
dispatch(changSearchState(search));
event.preventDefault();
onSearchbar();
};하지만 onSearchbar를 console.log를 찍어보니… 그 안에 또 오브젝트 형태로 onSearchbar 키 내가 실행하고자하는 함수 값으로 이루어져있었음.
따라서 onSearchbar.onSearchbar()로 바꿔서 해결.
아직 수정해야될 것들
- 하트 버튼을 누르면 select로 시작하는 모든 쿼리가 무효화 되어서 새로 데이터를 가져오게 되는데 그때 api함수기능에 따라서 변경된 tweet이 담긴 페이지 데이터를 가져오는 것이 아니라, 현재 페이지에 해당되는 데이터를 가져옴
- 또한 하트가 업데이트될때마다 데이터를 가져와서 데이터 배열에 추가됨. ⇒ 하트에 대한 데이터뿐만아니라 불필요한 데이터가 중복으로 담겨짐
- people 데이터 type이 다른 데이터 배열 type과 다르기때문에 따로 처리해야함.
참고
