-
카테고리
-
세부 분야
풀스택
-
해결 여부
해결됨
useSWR 로직을 hooks로 사용하는 경우
23.07.18 18:34 작성 조회수 356
0
로그인 유지를 swr 방식으로 교체하려고 합니다.
https://swr.vercel.app/ko/docs/getting-started
공식문서에는 useSWR을 hook으로 활용하는 가이드를 제시하고 있습니다.
(재사용 가능하게 만들기 항목)
가이드와 같은 방식으로 외부 파일에 hooks를 만들고, 적용했습니다.
useMyInfo.js
import axios from 'axios';
export default function useMyInfo(useSWR) {
const fetcher = url =>
axios.get(url, { withCredentials: true }).then(result => result.data);
const {
data: me,
error: myInfoError,
isLoading: myInfoLoading,
} = useSWR(`${process.env.NEXT_PUBLIC_BACK_END_DOMAIN}/user/me`, fetcher);
// mutate('ME', { me, myInfoError, myInfoLoading });
return {
me,
myInfoError,
myInfoLoading,
};
}
index.js
const Home = () => {
const { freePosts, loadFreePostsStatus, postTotal, addPostStatus } =
useSelector(state => state.post);
useEffect(() => {
useMyInfo(); // hooks 호출
}, []);
...// 생략
매개변수로 전달하는 방식으로도 바꿔봤습니다.
import useSWR from 'swr'
const Home = () => {
const { freePosts, loadFreePostsStatus, postTotal, addPostStatus } =
useSelector(state => state.post);
useEffect(() => {
useMyInfo(useSWR); // hooks 호출, hooks에서는 매개변수 받아서 적용하는 방식으로 변경했음
}, []);
...// 생략
여전히 같은 에러가 뜹니다.
공식문서 가이드와 달리 hook으로 만들어 재사용하는 것이 잘 안되는데 어떻게 해결할수 있나요? 간단한 get요청 하나 가져오는게 편할줄 알았는데 redux 보다 어려운거 같네요..
답변을 작성해보세요.
0
조현영
지식공유자2023.07.18
useEffect 안에서 다른 훅을 호출하면 안 됩니다. 리액트 처음 배울 때 배우는 훅의 기본 법칙입니다;;; ㅎㅎㅎ
그냥 useMyInfo만 하세요.
useSWR도 import로 하고 매개변수로 하지 마세요.
BBB AAA
질문자2023.07.18
감사합니다. 기본적인걸 잊고 있었네요 ;;
그런데 변화가 업데이트가 안되네요
useSWR 아래에 해당코드를 추가했는데요
mutate('ME', { me, myInfoError, myInfoLoading});
me를 사용할 컴포넌트에서 이렇게 가져와서 적용했습니다.
const { data: me } = useSWR('ME');
근데 이렇게 해도 업데이트가 안되네요. mutate를 쓰면 안되는건가요?
답변 1