๐ก PureComponent๋?
ํด๋์ค ์ปดํฌ๋ํธ์์ ์ฌ์ฉ๋๋ Component๋ก ํด๋น ์ปดํฌ๋ํธ๋ก ๋์ด์ค๋ props ํน์ ๋ด๋ถ์ state๋ฅผ ์ด์ ๊ฐ๊ณผ ๋น๊ตํ์ฌ ๋ณ๊ฒฝ์ ๋ฆฌ๋๋๋ง ๋๊ฒ ํด์ฃผ๋ ์ปดํฌ๋ํธ.
๐ก React.memo๋?
๊ณ ์ฐจ์ปดํฌ๋ํธ(HOC)๋ก props ๊ฐ์ memoizingํ๊ณ ์๋ค๊ฐ ๊ฐ์ด ๋ณ๊ฒฝ๋๋ฉด ํด๋น HOC๋ฅผ ๋ฆฌ๋๋๋ง ๋๊ฒํด์ฃผ๋ ํจ์.
์ธ๋ป๋ณด๋ฉด ๋น์ทํด ๋ณด์ด๋ PureComponent ์ React.memo๋ ๋ค์๊ณผ ๊ฐ์ ์ฐจ์ด๊ฐ ์๋ค.
PureComponent๋ ํด๋์คํ ์ปดํฌ๋ํธ์์ ์ฌ์ฉ๋๋ฉฐ ์ฌ์ฉ ์ ์ฌ์ฉํ๋ ค๋ ์ปดํฌ๋ํธ๋ฅผ extend์์ผ ์ฌ์ฉํ๋ค.
import {PureComponent} from 'React'
Class ExampleComponent extends PureComponent {
...
}
React.memo๋ ์ผ๋ฐ์ ์ผ๋ก ํจ์ํ ์ปดํฌ๋ํธ๋ฅผ ์ํ HOC๋ก ์ํ๋ ํจ์ํ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ์ธ์ ์ฌ์ฉํ๋ค.
const ExampleComponent=memo(({ crying }: TCryingProps) => {
return <p data-testid='dog'>๊ฐ์์ง "{crying}"</p>;
});
PureComponent๋ props, state๋ฅผ ๋ชจ๋ ๋น๊ตํ์ฌ ํ๋๋ผ๋ ๋ณ๊ฒฝ๋๋ฉด ๋ฆฌ๋๋๋ง ๋๋ค. React.memo๋ props ๋ง ๋น๊ตํ์ฌ ์ด์ ๊ณผ ๋ค๋ฅด๋ฉด ๋ฆฌ๋๋๋ง ๋๋ค.
๊ณต์๋ฌธ์์ ์์๋ฅผ ์ฐธ์กฐํด๋ณด์.
import { PureComponent, useState } from 'react';
class Greeting extends PureComponent {
render() {
console.log("Greeting was rendered at", new Date().toLocaleTimeString());
return <h3>Hello{this.props.name && ', '}{this.props.name}!</h3>;
}
}
const Greeting = memo(function Greeting({ name }) {
console.log("Greeting was rendered at", new Date().toLocaleTimeString());
return <h3>Hello{name && ', '}{name}!</h3>;
});
์์ ์์์ฒ๋ผ ํ๋ฉด ๋ณํ์ ํ ์ ์๋ค.
์ค์ ์ค๋ฌด๋ ์ฝ๋ ์งค ๋ ๊ธฐ์ตํ๊ณ ์๋ค๊ฐ ๋ถํ์ํ ๋ฆฌ๋๋๋ง์ด ์ผ์ด๋ ๋ ์ ์ฉํด๋ด์ผ๊ฒ ๋ค.!.