useAsync Custom hook 사용하기
useAsync
해당 코드는 출처에 담긴 코드를 사용하였고
그 코드를 잘 다루기 위해서 사용하였다.
사용할 컴포넌트
해당컴포넌트를 응용해서 수정해본다.
코드 내용
import Avatar from "@mui/material/Avatar";
import AvatarGroup from "@mui/material/AvatarGroup";
import CircularProgress from "@mui/material/CircularProgress";
import Box from "@mui/material/Box";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import useAsync from "../utils/hooks/useAsync";
const useStyles = makeStyles({
avatar: ({ width, height }) => ({
width: `${width}px!important`,
height: `${height}px!important`,
}),
});
const wait = (timeToDelay) =>
new Promise((resolve) => setTimeout(resolve, timeToDelay));
//dummy Data
const dataArr = [
{
name: "mmmm",
image: "/",
id: "khw970421",
},
{
name: "김",
image: "/",
id: "khw97wdlwloed0",
},
{
name: "박",
image: "",
id: "kii9222swwsss",
},
{
name: "윤",
image: "",
id: "kqwjeowos11ss",
},
{
name: "윤",
image: "",
id: "kqwjeowos11ss",
},
{
name: "윤",
image: "",
id: "kqwjeowos11ss",
},
{
name: "윤",
image: "",
id: "kqwjeowos11ss",
},
];
// 사이즈 크기 자유롭게
async function getUsers() {
await wait(1000);
return dataArr;
}
const Profile = ({ max, width, height }) => {
const classes = useStyles({ width, height });
const [state, refetch] = useAsync(getUsers, []);
const { loading, data: users, error } = state; // state.data 를 users 키워드로 조회
console.log(max, width, height, refetch);
//Avatar 태그 클릭시 이벤트
const clickAvatarHandler = (id) => {
//해당 대상의 마이페이지로 이동하는 함수 구현
console.log(id);
};
if (loading)
return (
<Box sx={{ display: "flex" }}>
<CircularProgress style={{ color: "#FD9F28", width, height }} />
</Box>
);
if (error) return <div>에러가 발생했습니다</div>;
if (!users) return null;
return (
<>
<AvatarGroup max={max} classes={{ avatar: classes.avatar }}>
{users.map(({ name, image, id }) => {
return (
<Avatar
key={id + Math.random()}
alt={name}
src={image}
onClick={() => {
clickAvatarHandler(id);
}}
/>
);
})}
</AvatarGroup>{" "}
</>
);
};
Profile.defaultProps = {
max: 3,
width: 40,
height: 40,
};
Profile.propTypes = {
max: PropTypes.number,
width: PropTypes.number,
height: PropTypes.number,
};
export default Profile;
추가한 코드
- wait메소드 (아직 API가 제대로 되어있지않아 setTimeout을 async await에서 사용하기 위해)
- useAsync Hook
- if문 형식 (기존에 삼항연산자일때는
users
를 미리 알아야하는데 이를 가져오지 못해서 에러가 났다.)
- 결과 자체는 기존 링크의 코드와 동일하나 해당 Hook을 통해 각각의 컴포넌트마다 따로 Loading을 고려하고 처리하는 중복되는 코드를 막을 수 있다.
setTimeout async await
setTimeout은 Promise반환을 하지 않기 때문에 async와 await를 적용해도 동기적으로 적용되지 않는다
- 즉, Promise를 반환하게 직접 작성 후 async와 await를 적용해야한다.
const wait = (timeToDelay) =>
new Promise((resolve) =>
setTimeout(resolve, timeToDelay)) //이와 같이 선언 후
await wait(5000)
- 따라서 코드는 이와 같이 적용시켜야한다.
출처
해당 코드는 출처에 담긴 코드를 사용하였고
그 코드를 잘 다루기 위해서 사용하였다.
해당컴포넌트를 응용해서 수정해본다.
코드 내용
import Avatar from "@mui/material/Avatar";
import AvatarGroup from "@mui/material/AvatarGroup";
import CircularProgress from "@mui/material/CircularProgress";
import Box from "@mui/material/Box";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import useAsync from "../utils/hooks/useAsync";
const useStyles = makeStyles({
avatar: ({ width, height }) => ({
width: `${width}px!important`,
height: `${height}px!important`,
}),
});
const wait = (timeToDelay) =>
new Promise((resolve) => setTimeout(resolve, timeToDelay));
//dummy Data
const dataArr = [
{
name: "mmmm",
image: "/",
id: "khw970421",
},
{
name: "김",
image: "/",
id: "khw97wdlwloed0",
},
{
name: "박",
image: "",
id: "kii9222swwsss",
},
{
name: "윤",
image: "",
id: "kqwjeowos11ss",
},
{
name: "윤",
image: "",
id: "kqwjeowos11ss",
},
{
name: "윤",
image: "",
id: "kqwjeowos11ss",
},
{
name: "윤",
image: "",
id: "kqwjeowos11ss",
},
];
// 사이즈 크기 자유롭게
async function getUsers() {
await wait(1000);
return dataArr;
}
const Profile = ({ max, width, height }) => {
const classes = useStyles({ width, height });
const [state, refetch] = useAsync(getUsers, []);
const { loading, data: users, error } = state; // state.data 를 users 키워드로 조회
console.log(max, width, height, refetch);
//Avatar 태그 클릭시 이벤트
const clickAvatarHandler = (id) => {
//해당 대상의 마이페이지로 이동하는 함수 구현
console.log(id);
};
if (loading)
return (
<Box sx={{ display: "flex" }}>
<CircularProgress style={{ color: "#FD9F28", width, height }} />
</Box>
);
if (error) return <div>에러가 발생했습니다</div>;
if (!users) return null;
return (
<>
<AvatarGroup max={max} classes={{ avatar: classes.avatar }}>
{users.map(({ name, image, id }) => {
return (
<Avatar
key={id + Math.random()}
alt={name}
src={image}
onClick={() => {
clickAvatarHandler(id);
}}
/>
);
})}
</AvatarGroup>{" "}
</>
);
};
Profile.defaultProps = {
max: 3,
width: 40,
height: 40,
};
Profile.propTypes = {
max: PropTypes.number,
width: PropTypes.number,
height: PropTypes.number,
};
export default Profile;
추가한 코드
- wait메소드 (아직 API가 제대로 되어있지않아 setTimeout을 async await에서 사용하기 위해)
- useAsync Hook
- if문 형식 (기존에 삼항연산자일때는
users
를 미리 알아야하는데 이를 가져오지 못해서 에러가 났다.)
- 결과 자체는 기존 링크의 코드와 동일하나 해당 Hook을 통해 각각의 컴포넌트마다 따로 Loading을 고려하고 처리하는 중복되는 코드를 막을 수 있다.
setTimeout async await
setTimeout은 Promise반환을 하지 않기 때문에 async와 await를 적용해도 동기적으로 적용되지 않는다
- 즉, Promise를 반환하게 직접 작성 후 async와 await를 적용해야한다.
const wait = (timeToDelay) =>
new Promise((resolve) =>
setTimeout(resolve, timeToDelay)) //이와 같이 선언 후
await wait(5000)
- 따라서 코드는 이와 같이 적용시켜야한다.
출처
Author And Source
이 문제에 관하여(useAsync Custom hook 사용하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@khw970421/useAsync-Custom-hook-사용하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)