๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

React

React.memo์™€ useMemo ์ฐจ์ด์ 

React.memo

React.memo๋Š” Higher-Order Components(HOC)์ด๋‹ค.

๐Ÿ‘€ Higher-Order Components(HOC)๋ž€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ธ์ž๋กœ ๋ฐ›์•„ ์ƒˆ๋กœ์šด ์ปดํฌ๋„ŒํŠธ๋กค ๋‹ค์‹œ returnํ•ด์ฃผ๋Š” ํ•จ์ˆ˜์ด๋‹ค.

const NewComponent = higherOrderComponent(WrappedComponent);

์ผ๋ฐ˜ ์ปดํฌ๋„ŒํŠธ๋Š” ์ธ์ž๋กœ ๋ฐ›์€ props๋ฅผ UI์— ํ™œ์šฉํ•˜๋Š” ๋ฐ˜๋ฉด์—, higher-order component๋Š” ์ธ์ž๋กœ ๋ฐ›์€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ƒˆ๋กœ์šด ๋ณ„๋„์˜ ์ปดํฌ๋„ŒํŠธ๋กœ ๋งŒ๋“ ๋‹ค. HOC๋Š” ๋ฆฌ์•กํŠธ์˜ API๊ฐ€ ์•„๋‹ˆ๋ผ ๋ฆฌ์•กํŠธ๊ฐ€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š”๋ฐ ์žˆ์–ด์„œ์˜ ์ผ์ข…์˜ ํŒจํ„ด์ด๋ผ๊ณ  ๋ณด๋ฉด๋œ๋‹ค.

 

React.memo์˜ ์‚ฌ์šฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

const MyComponent = React.memo((props) => {
	return (/*์ปดํฌ๋„ŒํŠธ ๋ Œ๋”๋ง ์ฝ”๋“œ*/)}
);

๋งŒ์•ฝ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๊ฐ™์€ props๋ฅผ ๋ฐ›์„ ๋•Œ ๊ฐ™์€ ๊ฒฐ๊ณผ๋ฅผ ๋ Œ๋”๋งํ•œ๋‹ค๋ฉด React.memo๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ถˆํ•„์š”ํ•œ ์ปดํฌ๋„ŒํŠธ ๋ Œ๋”๋ง์„ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ๋‹ค.

์ฆ‰, ์ปดํฌ๋„ŒํŠธ์— ๊ฐ™์€ props๊ฐ€ ๋“ค์–ด์˜จ๋‹ค๋ฉด ๋ฆฌ์•กํŠธ๋Š” ์ปดํฌ๋„ŒํŠธ ๋ Œ๋”๋ง ๊ณผ์ •์„ ์Šคํ‚ตํ•˜๊ณ  ๋งˆ์ง€๋ง‰์— ๋ Œ๋”๋ง๋œ ๊ฒฐ๊ณผ๋ฅผ ์žฌ์‚ฌ์šฉํ•œ๋‹ค.

 

React.memo๋Š” ์˜ค์ง props๊ฐ€ ๋ณ€๊ฒฝ๋๋Š”์ง€ ์•„๋‹Œ์ง€๋งŒ ์ฒดํฌํ•œ๋‹ค. ๋งŒ์•ฝ React.memo์— ๊ฐ์‹ธ์ง„ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ useState๋‚˜ useContext๊ฐ™์€ ํ›…์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค๋ฉด, state๋‚˜ context๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ๋งˆ๋‹ค ๋ฆฌ๋ Œ๋”๋ง๋œ๋‹ค.

 

๊ธฐ๋ณธ์ ์œผ๋กœ props๋กœ ๋“ค์–ด์˜จ object๋Š” shallow compare๋กœ ๋น„๊ตํ•œ๋‹ค. ์ฆ‰, props๋กœ ๋“ค์–ด์˜จ number, string๊ณผ ๊ฐ™์€ scarlar ๊ฐ’์€ ์‹ค์ œ ๊ฐ’์ด ๋™์ผํ•œ๊ฐ€๋ฅผ ๋น„๊ตํ•˜์ง€๋งŒ, object์˜ ๊ฒฝ์šฐ scarlar ๊ฐ’๊ณผ ๋‹ฌ๋ฆฌ ๊ฐ™์€ ๊ฐ’์„ 'reference(์ฐธ์กฐ)'ํ•˜๊ณ  ์žˆ๋Š”์ง€๋ฅผ ๋น„๊ต ํ•œ๋‹ค.

 

๋งŒ์•ฝ ๋น„๊ต๋ฐฉ์‹์„ ์ปค์Šคํ…€ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ์•„๋ž˜ ์ฝ”๋“œ์ฒ˜๋Ÿผ ๋น„๊ตํ•จ์ˆ˜๋ฅผ React.memo์˜ ๋‘๋ฒˆ์งธ ์ธ์ž๋กœ ๋„ฃ์–ด์ฃผ๋ฉด ๋œ๋‹ค.

function MyComponent(props) {
  /* ์ปดํฌ๋„ŒํŠธ ๋ Œ๋”๋ง ์ฝ”๋“œ */
}
function areEqual(prevProps, nextProps) {
  /*
  ๋งŒ์•ฝ ์ „๋‹ฌ๋˜๋Š” nextProps๊ฐ€ prevProps์™€ ๊ฐ™๋‹ค๋ฉด true๋ฅผ ๋ฐ˜ํ™˜, ๊ฐ™์ง€ ์•Š๋‹ค๋ฉด false๋ฅผ ๋ฐ˜ํ™˜
  */
}

export default React.memo(MyComponent, areEqual);

 

useMemo

useMemo๋Š” ๋ฉ”๋ชจ์ด์ฆˆ๋œ ๊ฐ’์„ returnํ•˜๋Š” hook์ด๋‹ค.

์ธ์ž๋กœ ํ•จ์ˆ˜์™€ ์˜์กด ๊ฐ’(dependencies)์„ ๋ฐ›๋Š”๋‹ค. useMemo๋Š” ๋‘๋ฒˆ์งธ ์ธ์ž๋กœ ์ค€ ์˜์กด ์ธ์ž ์ค‘์— ํ•˜๋‚˜๋ผ๋„ ๋ณ€๊ฒฝ๋˜๋ฉด ๊ฐ’์„ ์žฌ ๊ณ„์‚ฐํ•œ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๋งค ๋ Œ๋”์‹œ๋งˆ๋‹ค ์†Œ์š”๋˜๋Š” ๋ถˆํ•„์š”ํ•œ ๊ณ„์‚ฐ์„ ํ”ผํ•  ์ˆ˜ ์žˆ๋‹ค. ๋งŒ์•ฝ dependencies ์ธ์ž๋กœ ์•„๋ฌด๊ฒƒ๋„ ์ „๋‹ฌ๋˜์ง€ ์•Š๋Š”๋‹ค๋ฉด, ๋ Œ๋”์‹œ๋งˆ๋‹ค ํ•ญ์ƒ ๊ฐ’์„ ์ƒˆ๋กญ๊ฒŒ ๊ณ„์‚ฐํ•˜์—ฌ returnํ•œ๋‹ค.

 

์•„๋ž˜์˜ ์ฝ”๋“œ๋Š” a, b๊ฐ’์ด ๋ณ€ํ•  ๋•Œ๋งŒ ์ฒซ๋ฒˆ์งธ ์ธ์ž๋กœ ๋“ค์–ด์˜จ ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜์–ด ์žฌ๊ณ„์‚ฐ์ด ๋˜๊ณ , ๊ทธ๋ ‡์ง€ ์•Š์€ ๊ฒฝ์šฐ์—๋Š” ๋ฉ”๋ชจ์ด์ฆˆ๋œ ๊ฐ’์„ returnํ•œ๋‹ค.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

 

๊ณตํ†ต์ 

React.memo์™€ useMemo ๋ชจ๋‘ props๊ฐ€ ๋ณ€ํ•˜์ง€ ์•Š์œผ๋ฉด(์ด์ „ props์™€ ๋™์ผํ•˜๋ฉด) ์ธ์ž๋กœ ๋„˜๊ธด ํ•จ์ˆ˜๋Š” ์žฌ์‹คํ–‰๋˜์ง€ ์•Š๊ณ , ์ด์ „์˜ ๋ฉ”๋ชจ์ด์ฆˆ๋œ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค๋Š” ์ ์—์„œ ๊ณตํ†ต์ ์ด์žˆ๋‹ค. 

 

์•„๋ž˜ React.memo์™€ useMemo๋ฅผ ์‚ฌ์šฉํ•œ ์ฝ”๋“œ๋ฅผ ๋ณด๋ฉด ๋‘๊ฐ€์ง€ ์ฝ”๋“œ๋Š” props.name์˜ ๊ฐ’์ด ๋ณ€ํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ๋ฆฌ๋ Œ๋”๋ง ๋˜์ง€ ์•Š๊ณ  ์ด์ „์˜ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค๋Š” ์ ์—์„œ ๋™์ผํ•˜๊ฒŒ ๋™์ž‘ํ•œ๋‹ค.

/*๋ณ„๋„๋กœ ๋‘๋ฒˆ์งธ ์ธ์ž๋ฅผ ๋„˜๊ธฐ์ง€ ์•Š์„ ๊ฒฝ์šฐ props๊ฐ€ ๋ณ€ํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ์žฌ๋ Œ๋”๋ง ๋˜์ง€ ์•Š์Œ*/
const NameTag = React.memo(
  (props) => <div>{props.name}</div>
);

/*๋งŒ์•ฝ ๋‘๋ฒˆ์งธ ์ธ์ž๋กœ ํŠน์ • props.name๊ฐ’์ด ๊ฐ™์ง€ ์•Š์„๋•Œ๋งŒ ์žฌ๋ Œ๋”๋ง ํ•˜๋„๋ก ์ปค์Šคํ…€ ๋น„๊ต ํ•จ์ˆ˜๋ฅผ ๋„ฃ์–ด์ฃผ๊ณ  ์‹ถ์„ ๋•Œ*/
const NameTag = React.memo(
  (props) => <div>{props.name}</div>
,
  (prevProps, nextProps) => prevProps.name === nextProps.name
)
function NameTag(props) {
  return useMemo(
    () => <div>{props.name}</div>
  ,
    [props.name]
  )
}

 

์ฐจ์ด์ 

1. React.memo๋Š” HOC, useMemo๋Š” hook์ด๋‹ค.

2. React.memo๋Š” HOC์ด๊ธฐ ๋•Œ๋ฌธ์— ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ, ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ ๋ชจ๋‘ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜์ง€๋งŒ, useMemo๋Š” hook์ด๊ธฐ ๋•Œ๋ฌธ์— ์˜ค์ง ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ ์•ˆ์—์„œ๋งŒ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค.

 

ํƒœ๊ทธ