Loading ๊ด๋ จ ์ฝ๋ ์์ ํ๊ธฐ ์ํด ๋๋ฒ๊น
์์
์ค
๋ฌดํ ์คํฌ๋กค ์ ์ด์ ๋์ผํ ๋ฐ์ดํฐ์ ์นด๋ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง๋๋๊ฑธ ํ์ธํ๊ฒ ๋์๋ค.
์ด๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ์ตํ๋ ๋ฉ๋ชจ์ด์ ์ด์ ์ ๋ํด ์ ์ฉํด ๋ณด๋ ค๊ณ ํ๋ค.
๋ฉ๋ชจ์ด์ ์ด์
ํ๊ธฐ ์ ์ React.memo
๊ฐ ๋ฌด์์ธ์ง ๊ฐ๋ตํ๊ฒ ์๊ณ ๊ฐ์.
๊ณต๋ถํ๋ ๋ด์ฉ์ผ๋ก ํน์ ํ๋ฆฐ ๊ฐ๋ ์ด ์๋ค๋ฉด ๋ง์ํด์ฃผ์ธ์!
๋ฌดํ ์คํฌ๋กค ์ ์ด์ ์ ์๋ ์นด๋ ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง ๋ ์ดํ์ ๋ถ๋ฌ์จ ์ปดํฌ๋ํธ๊ฐ ๋ถ๋ฌ์์ง๋ค.
React Query๋ก ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์ค๊ณ ์๊ธฐ์ ์บ์ฑ๋๋ ์ค ์์์ผ๋,
์๋ฌด๋๋ ๋ฌดํ ์คํฌ๋กค์ React Query์์ ์ ๊ณตํ๋ hook์ ์ฌ์ฉํ์ง ์๊ณ
๋ค๋ฅธ ๋ฐฉ์์ผ๋ก ๊ตฌํํด์ ๊ทธ๋ฐ๋ฏ ์ถ๋ค.
์ด์ ์ ๋ํด์ React Query๋ก ์ฝ๋๋ฅผ ์์ ํ ๋ค์ ํ์ธํด ๋ด์ผ๊ฒ ๋ค.
๋ํ, state๋ ๋์ผ ํ ๊ฐ์ ํธ์ถํด๋ ๋ฆฌ๋ ๋๋ง ๋๋ ๋ฌธ์ ์ ์ ๊ฐ์ง๊ณ ์์ด,
๋ฉ๋ชจ์ด์ ์ด์
์์
์ด ํ์ํ๋ค.
// memo importํ๊ธฐ
import { memo } from 'react';
.
.
.
const PokeInfoCard = ({ name }: { name: string }) => {
.
.
.
return (
<>
<PokemonDetail name={name} />
<PokeCardContainer id={name} onClick={() => handlerModal(name)}>
<TextWrap>
<NumText>no. {pokeData?.id}</NumText>
<NameText>{pokeName}</NameText>
<TypeBox>
{pokeData?.types.map((el: TypesT, idx: number) => <TypeText key={idx} typename={el.type.name} />)}
</TypeBox>
</TextWrap>
<Img src={pokeData?.sprites.front_default} loading="lazy" alt={pokeData?.name} />
<BgImg>
<Pokeball color="#f5f5f5" />
</BgImg>
</PokeCardContainer>
</>
);
};
// ๋ฉ๋ชจ์ด์ ์ด์
ํ ์ปดํฌ๋๋ฅผ memo์ ์ธ์๋ก ์ถ๊ฐํ๊ธฐ
export default memo(PokeInfoCard);
๋์ผํ ์นด๋ ์ปดํฌ๋ํธ๋ฅผ ๋ฆฌ๋ ๋๋ง ํ๊ณ ์๊ธฐ์ ์ด๋ฅผ ๋ง๊ธฐ ์ํด
React.memo๋ฅผ ์ถ๊ฐํ๋ค.
์ถ๊ฐํ๋ ๋ฐฉ๋ฒ์ ์ตํ๋จ์ memo(์ปดํฌ๋ํธ)
ํ์์ผ๋ก ์์ฑํ๋ ๋ฐฉ์๋ ์์ผ๋ฉฐ,
ํจ์์ปดํฌ๋ํธ์ useMemo ๋ฑ์ ํ์์ผ๋ก ์์ฑํ๋ ๋ฐฉ์๋ ์๋ค.
์ดํ ํ์ธํ์ ๋ ๋์ผํ ์ปดํฌ๋ํธ๋ ๋ฆฌ๋ ๋๋ง ๋์ง ์๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
๋จ, ๋ฉ๋ชจ์ด์ ์ด์
์ ์ด์ ์ ๊ฐ์ ๋ฏธ๋ฆฌ
์ ์ฅํด ๋๊ธฐ ๋๋ฌธ์ ๊ทธ๋งํผ ๋ฉ๋ชจ๋ฆฌ ์๋ชจ๊ฐ ๋๋ค.
๊ฐ๋ฐ์๋ ์ดํ๋ฆฌ์ผ์ด์
์ ๊ฐ๋ฐํ ๋ ํด๋น ์์๊ฐ ๋ถํ์ํ๊ฒ ๋ฆฌ๋ ๋๋ง๋๊ณ ,
์ด๋ฅผ ํตํด ์๋ฒ์ ํฌ๊ฒ ๋ถํ๋ฅผ ์ฃผ๋ ์์์ธ์ง ์ฒดํฌํ์ฌ ๋ฉ๋ชจ์ด์ ์ด์
ํด์ผํ๋ค.
์ฌ์ค ๋ค๋ฅธ๊ฑฐ ์์ ํ๋ ค๋ค ๋ถํ์ํ ๋ ๋๋ง์ด ๋ฐ์ํ๊ณ ์์ด, React.memo๋ฅผ ์ ์ฉํด ๋ณด์๋ค.
ํฌ์ผ๋ชฌAPI๋ฅผ ๋ฌด๋ฃ๋ก ์ ๊ณตํ๊ณ ์์ผ๋ฉฐ ๋๊ตฐ๊ฐ ์ถ๊ฐ ๋ฐ ์ญ์ ํ ์ ์๋ ๋ฐ์ดํฐ์ด๋ค.
๊ทธ๋ฐ์ ์์ ๋ฉ๋ชจ์ด์ ์ด์
์ ํด๋ ๊ด์ฐฎ๋ค ์๊ฐํ์ฌ ์ ์ฉํด ๋ดค๋ค.
์๋ง React Query์์ ์ ๊ณตํ๋ hook์ ์ฌ์ฉํด
๋ฌดํ ์คํฌ๋กค ๋ก์ง์ ์์ ํ๊ฒ ๋๋ค๋ฉด ๊ตณ์ด ๋ฉ๋ชจ์ด์ ์ด์
ํ ํ์๊ฐ ์์ง ์์๊น ์ถ๋ค.
์ด ์ ์ ๋ํด์ ์ถํ ๋ฆฌํฉํ ๋ง ํ ํฌ์คํ ํด์ผ๊ฒ ๋ค.
๊ธ ์ ์ฝ์์ต๋๋ค~ ์ด๋ค ๋ฌธ์ ์ ์ด ๋ฐ์ํ๋์ง?๋ผ๋ ์ ๋ชฉ ๋ฐ์ ์ฐ์ธ
๋ฐ๋ณต ์ปดํฌ๋ํธ ์ฌ์ฉ์ ์ฒดํฌํ ์ ์๋ ์ฌ์ง์ ์ด๋ค ํด์ ์ฌ์ฉํด์ ์ถ์ถํ์ ๊ฑด๊ฐ์??