[TIL] 0607 | React with Redux, Next.js, TypeScript

Teasanยท2022๋…„ 6์›” 7์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
3/36
post-thumbnail

๋ชฉ์ฐจ

  • ์š”์•ฝ
  • State ๋ฐ ์ปดํฌ๋„ŒํŠธ ์ž์„ธํžˆ ์‚ดํŽด๋ณด๊ธฐ
  • State ์Šค์ผ€์ค„๋ง ๋ฐ ์ผ๊ด„ ์ฒ˜๋ฆฌ ์ดํ•ดํ•˜๊ธฐ
  • useMemo()๋กœ ์ตœ์ ํ™”ํ•˜๊ธฐ

โœง ์š”์•ฝ

  • ๋ฆฌ์•กํŠธ ์•ฑ์—์„œ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ†ตํ•ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ตœ์‹  ๋ฆฌ์•กํŠธ์—์„œ๋Š” ์ฃผ๋กœ ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•  ๊ฒƒ์ด๋‹ค. ์ด๋Ÿฐ ์ปดํฌ๋„ŒํŠธ(ex. App)๋Š” ๊ฒฐ๊ตญ ํ•˜๋‚˜์˜ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•  ๊ฒƒ์ด๋ฉฐ, JSX ์ฝ”๋“œ๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
return (
  <div className="app">
    <h1>Hi there!</h1>
    <DemoOutput show={showParagraph} />
    <Button onClick={allowToggleHandler}>Allow Toggling</Button>
    <Button onClick={toggleParagraphHandler}>Toggle Paragraph!</Button>
  </div>
);
  • ์ด๊ฒƒ์€ ๋ฆฌ์•กํŠธ์—๊ฒŒ ์ปดํฌ๋„ŒํŠธ์˜ ์ถœ๋ ฅ์ด ๋ฌด์—‡์ธ์ง€๋ฅผ ์•Œ๋ ค์ค€๋‹ค. ์ด๋Ÿฐ ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” ์ƒํƒœ(state)์™€ props, ์ปจํ…์ŠคํŠธ๋ฅผ ์ด์šฉํ•ด์„œ ์ž‘์—…ํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  props์™€ ์ปจํ…์ŠคํŠธ๋Š” ๊ฒฐ๊ตญ ์ƒํƒœ(state)์˜ ๋ณ€๊ฒฝ์œผ๋กœ ์ด์–ด์ง€๊ธฐ ๋•Œ๋ฌธ์— ์ปดํฌ๋„ŒํŠธ์˜ ๋ณ€๊ฒฝ๊ณผ ํ˜น์€ ์ปดํฌ๋„ŒํŠธ์— ์˜ํ–ฅ์„ ์ฃผ๊ฑฐ๋‚˜ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ผ๋ถ€์— ์˜ํ–ฅ์„ ๋ฏธ์น˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋ณ€๊ฒฝํ•˜๊ฒŒ ๋œ๋‹ค.

์ปดํฌ๋„ŒํŠธ์—์„œ ์ƒํƒœ(state)๋ฅผ ๋ณ€๊ฒฝํ•  ๋•Œ๋งˆ๋‹ค ์ปดํฌ๋„ŒํŠธ๋Š” ์žฌํ‰๊ฐ€ ๋œ๋‹ค

  • ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” ์ƒํƒœ(state)๋ฅผ ๋ณ€๊ฒฝํ•  ๋•Œ๋งˆ๋‹ค ์ด ๋ณ€๊ฒฝ๋œ ์ƒํƒœ(state)๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์ปดํฌ๋„ŒํŠธ๋Š” ์žฌํ‰๊ฐ€ ๋  ๊ฒƒ์ด๋‹ค. ์ฆ‰, ์ด ๋ง์€ ์ปดํฌ๋„ŒํŠธ ํ•จ์ˆ˜๊ฐ€ ์ƒํƒœ(state)๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ๋งˆ๋‹ค ์žฌ์‹คํ–‰ ๋œ๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค. ๋”ฐ๋ผ์„œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์žฌ์‹คํ–‰ ๋  ๋•Œ๋งˆ๋‹ค ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์˜ ๋ชจ๋“  ์ฝ”๋“œ ์—ญ์‹œ ์žฌ์‹คํ–‰๋˜๊ณ , ์ƒˆ๋กœ์šด ์ถœ๋ ฅ ๊ฐ’์„ ์–ป๊ฒŒ ๋œ๋‹ค. ๋ฌผ๋ก  ์ถœ๋ ฅ ๊ฐ’์€ ์ด์ „๊ณผ ๋™์ผํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ์‹ค์ œ๋กœ๋Š” ๋‹ค๋ฅธ ์˜๋ฏธ๋ฅผ ๊ฐ€์ง„๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๋‹จ๋ฝ ์ „์ฒด๊ฐ€ ๋ Œ๋”๋ง ๋˜๊ฑฐ๋‚˜ ์•ˆ๋  ์ˆ˜๋„ ์žˆ๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค.
<DemoOutput show={showParagraph} />
  • DemoOutput ์™€ ๊ฐ™์€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์˜ˆ๋ฅผ ๋“ค์–ด๋ณด์ž.
const DemoOutput = (props) => {
  console.log("DemoOutput RUNNUNG");
  return <MyParagraph>{props.show ? "This is New!" : ""}</MyParagraph>;
};
  • ์—ฌ๊ธฐ DemoOutput ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์˜ ํ…์ŠคํŠธ("This is New!")๋Š” ๋ Œ๋”๋ง๋˜์ง€ ์•Š์„ ์ˆ˜๋„ ์žˆ๋‹ค. ๋ฆฌ์•กํŠธ๋Š” ๋‹จ์ˆœํžˆ ์ตœ์‹  ํ‰๊ฐ€์˜ ๊ฒฐ๊ณผ๋ฅผ ๊ฐ€์ ธ์™€์„œ ์ง์ „ ํ‰๊ฐ€์˜ ๊ฒฐ๊ณผ์™€ ๋น„๊ตํ•ด์„œ ๋ฆฌ์•กํŠธ์˜ DOM์— ์ „๋‹ฌํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๋Š” ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ์— ํ•ด๋‹น ๋œ๋‹ค.

๋ฆฌ์•กํŠธ DOM์˜ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์€ ๋ธŒ๋ผ์šฐ์ €์˜ ์‹ค์ œ DOM ์— ์ ์šฉ ๋œ๋‹ค

  • ๋ฆฌ์•กํŠธ๋Š” ์ตœ์‹  ํ‰๊ฐ€ ๊ฒฐ๊ณผ์™€ ์ง์ „ ํ‰๊ฐ€ ๊ฒฐ๊ณผ์™€ ๋น„๊ตํ•ด์„œ ์‹ค์งˆ์ ์œผ๋กœ ์—…๋ฐ์ดํŠธ ๋˜๋Š” ๋ถ€๋ถ„์„ ์ฒดํฌํ•œ ๋’ค ๋ฆฌ์•กํŠธ DOM์— ์ „๋‹ฌํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด ๋ฆฌ์•กํŠธ DOM์„ ํ†ตํ•ด index.js ํŒŒ์ผ์„ ๋ Œ๋”๋งํ•˜๊ณ  ๋ฆฌ์•กํŠธ DOM์€ ์ด ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ๋ธŒ๋ผ์šฐ์ €์˜ ์‹ค์ œ DOM์— ์ ์šฉํ•˜๋ฉฐ, ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์€ ๊ฒƒ๋“ค์€ ๊ทธ๋Œ€๋กœ ๋‘”๋‹ค.
return (
  <div className="app">
    <h1>Hi there!</h1>
    <DemoOutput show={showParagraph} />
    <Button onClick={allowToggleHandler}>Allow Toggling</Button>
    <Button onClick={toggleParagraphHandler}>Toggle Paragraph!</Button>
  </div>
);
  • ์ด์ œ ๋ฆฌ์•กํŠธ๊ฐ€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์žฌํ‰๊ฐ€ ํ•  ๋•Œ ๋‹จ์ˆœํžˆ ์ปดํฌ๋„ŒํŠธ ์žฌํ‰๊ฐ€์—์„œ ๊ทธ์น˜์ง€ ์•Š๊ณ  ์ „์ฒด ํ•จ์ˆ˜๋ฅผ ์žฌ์‹คํ–‰ํ•˜๊ณ  ์ด๋ฅผ ํ†ตํ•ด ์ฝ”๋“œ ์ „๋ถ€๋ฅผ ๋ฆฌ๋นŒ๋“œํ•œ๋‹ค. ์ด JSX ์ฝ”๋“œ๊ฐ€ ์ตœ์‹  ์Šค๋ƒ…์ƒท์˜ ์ถœ๋ ฅ ๊ฒฐ๊ณผ๋ฅผ ๋ฆฌ๋นŒ๋“œ ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด JSX ์ฝ”๋“œ์— ์žˆ๋Š” ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๋ฅผ ์žฌ์‹คํ–‰ํ•œ๋‹ค. ์œ„์˜ ์ฝ”๋“œ์—์„œ๋Š” DemoOutput ์ปดํฌ๋„ŒํŠธ์™€ ์•„๋ž˜์˜ Button ์ปดํฌ๋„ŒํŠธ ๋‘๊ฐœ๋ฅผ ์žฌ์‹คํ–‰ ํ•  ๊ฒƒ์ด๋‹ค.
const DemoOutput = (props) => {
  console.log("DemoOutput RUNNUNG");
  return <MyParagraph>{props.show ? "This is New!" : ""}</MyParagraph>;
};

export default React.memo(DemoOutput);
  • ํ•˜์ง€๋งŒ ์ด์ œ DemoOutput๋Š” React.memo๋ฅผ ํ†ตํ•ด ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์˜ ๋ถˆํ•„์š”ํ•œ ์žฌ์‹คํ–‰์„ ๋ง‰์•˜๊ณ , ๋ฆฌ์•กํŠธ์—๊ฒŒ props๊ฐ€ ์‹ค์ œ๋กœ ๋ณ€๊ฒฝ๋˜์—ˆ์„ ๋•Œ๋งŒ ์ปดํฌ๋„ŒํŠธ ํ•จ์ˆ˜๋ฅผ ์žฌ์‹คํ–‰ํ•˜๊ณ  ์ƒˆ๋กœ์šด ๊ฐ’์ด ์—†์„ ๋• ํ•จ์ˆ˜๋ฅผ ์žฌ์‹คํ–‰ํ•˜์ง€ ์•Š๋„๋ก ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค.

์ปดํฌ๋„ŒํŠธ์˜ ์žฌํ‰๊ฐ€๋Š” ์ปดํฌ๋„ŒํŠธ ํ•จ์ˆ˜ ์ „์ฒด์˜ ์žฌ์‹คํ–‰์„ ์˜๋ฏธํ•œ๋‹ค

  • ์ปดํฌ๋„ŒํŠธ์˜ ์žฌํ‰๊ฐ€๋Š” ์ปดํฌ๋„ŒํŠธ ํ•จ์ˆ˜ ์ „์ฒด์˜ ์žฌ์‹คํ–‰์„ ์˜๋ฏธํ•œ๋‹ค. App ์ปดํฌ๋„ŒํŠธ ์•ˆ์— ์žˆ๋Š” ๋ชจ๋“  ๊ฒƒ๋“ค์ด ๋‹ค์‹œ ์‹คํ–‰๋œ๋‹ค๋Š” ์‚ฌ์‹ค์„ ์•Œ์ง€ ๋ชปํ•œ๋‹ค๋ฉด ์šฐ๋ฆฌ๋Š” ์ด์ƒํ•œ ๊ฒฐ๊ณผ๋ฅผ ์ดˆ๋ž˜ํ•  ์ˆ˜ ์žˆ์„์ง€๋„ ๋ชจ๋ฅธ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด๋ณด์ž. ํ•จ์ˆ˜ ์•ˆ์— ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค๊ณ  ํ•ด๋‹น ํ•จ์ˆ˜๋ฅผ props๋ฅผ ํ†ตํ•ด ์ปดํฌ๋„ŒํŠธ์— ์ „๋‹ฌํ•˜๋ฉด ์ƒˆ๋กœ์šด ํ•จ์ˆ˜ ๊ฐ์ฒด๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค. ์ด๋ ‡๊ฒŒ ๋˜๋ฉด React.memo๋ฅผ ํ†ตํ•œ ๋ถˆํ•„์š”ํ•œ ์žฌ์‹คํ–‰์„ ๋ง‰์„ ์ˆ˜ ์—†์„ ๊ฒƒ์ด๋‹ค. ์•ž์„œ์„œ ์„ค๋ช…ํ–ˆ๋“ฏ์ด ๊ฐ์ฒด(๋ฐฐ์—ด, ํ•จ์ˆ˜)๋Š” ์ฐธ์กฐ ๊ฐ’์ด๋ฉฐ, React.memo๊ฐ€ ๋‚ด๋ถ€์ ์œผ๋กœ ์‹คํ–‰ํ•˜๋Š” ์ผ๋ฐ˜์ ์ธ ๋น„๊ต ์—ฐ์‚ฐ์ž๋ฅผ ํ†ตํ•œ ๋น„๊ต๋Š” ์ด ์ฐธ์กฐ ๊ฐ’์— ๋Œ€ํ•ด์„œ๋Š” ํ†ต์šฉ๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

"React.memo() ๊ฐ€ ํ•˜๋Š” ์ผ์€ props ์˜ ๊ฐ’์„ ํ™•์ธํ•˜๊ณ , ์ด์ „์˜ props ์™€ ๊ฐ€์žฅ ์ตœ๊ทผ์˜ props ์Šค๋ƒ…์ƒท์„ ๋น„๊ตํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด ๋น„๊ต ์ž‘์—…์€ ์ผ๋ฐ˜์ ์ธ ๋น„๊ต ์—ฐ์‚ฐ์ž๋ฅผ ํ†ตํ•ด ์ด๋ค„์ง„๋‹ค. ์ผ๋ฐ˜์ ์ธ ์›์‹œ ๊ฐ’์ด๋ผ๋ฉด ์ด๋Ÿฐ ์ผ๋ฐ˜์ ์ธ ๋น„๊ต ์—ฐ์‚ฐ์ž๋ฅผ ํ†ตํ•ด์„œ ๋น„๊ต๊ฐ€ ๊ฐ€๋Šฅํ•  ๊ฒƒ์ด๋‹ค. ํ•˜์ง€๋งŒ ๋ฐฐ์—ด์ด๋‚˜ ๊ฐ์ฒด, ํ•จ์ˆ˜๋ฅผ ๋น„๊ตํ•œ๋‹ค๋ฉด ๋ง์ด ๋‹ฌ๋ผ์ง„๋‹ค. ๋ฐฐ์—ด์ด๋‚˜ ๊ฐ์ฒด, ํ•จ์ˆ˜๋Š” ์ฐธ์กฐ ๊ฐ’์ด๊ธฐ ๋•Œ๋ฌธ์— ์ผ๋ฐ˜์ ์ธ ๋น„๊ต ์—ฐ์‚ฐ์ž๋ฅผ ํ†ตํ•ด์„œ๋Š” ๋™์ผํ•œ ๊ฐ’์œผ๋กœ ์ทจ๊ธ‰ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค."

  • ๊ทธ๋ž˜์„œ ์šฐ๋ฆฌ๋Š” useCallback๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค. ๋ฐ”๋กœ ์ด useCallback์„ ํ†ตํ•ด ์ฐธ์กฐ ๊ฐ’๋„ ๋น„๊ตํ•˜์—ฌ ๋ถˆํ•„์š”ํ•œ ์žฌ์‹คํ–‰์„ ๋ง‰์„ ์ˆ˜ ์žˆ๋„๋ก ํ•œ ๊ฒƒ์ด๋‹ค.

"useCallback ์€ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ปดํฌ๋„ŒํŠธ ์‹คํ–‰ ์ „๋ฐ˜์— ๊ฑธ์ณ ํ•จ์ˆ˜๋ฅผ ์ €์žฅํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” hook ์œผ๋กœ์จ useCallback๋ฅผ ํ†ตํ•ด์„œ ๊ฐ์‹ผ ํ•จ์ˆ˜๋ฅผ ์ €์žฅํ•˜์—ฌ ์ด ํ•จ์ˆ˜๊ฐ€ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๋งค๋ฒˆ ์‹คํ–‰๋  ๋•Œ๋งˆ๋‹ค ์žฌ์ƒ์„ฑํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค๋Š” ๊ฒƒ์„ React์— ์•Œ๋ฆฌ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค. useCallback์„ ์‚ฌ์šฉํ•˜์—ฌ ํŠน์ • ํ•จ์ˆ˜๋ฅผ ๊ฐ์‹ผ๋‹ค๋ฉด, ์ด ํ•จ์ˆ˜ ๊ฐ์ฒด๊ฐ€ ๋ฉ”๋ชจ๋ฆฌ์˜ ๋™์ผํ•œ ์œ„์น˜์— ์ €์žฅ๋˜๋ฏ€๋กœ ์ด๋ฅผ ํ†ตํ•ด ๋น„๊ต ์ž‘์—…์„ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค. "

  • useCallback์„ ํ†ตํ•ด ๋ฆฌ์•กํŠธ์—๊ฒŒ useCallback์œผ๋กœ ํŠน์ • ํ•จ์ˆ˜๋ฅผ ๊ฐ์‹ธ์„œ ํ•จ์ˆ˜๋ฅผ ์ €์žฅํ•˜๋„๋ก ํ•˜๊ณ , ํ•ด๋‹น ํ•จ์ˆ˜๊ฐ€ ์žฌ์‹คํ–‰๋˜์–ด๋„ ํŠน์ • ์˜์กด์„ฑ์ด ๋ณ€๊ฒฝ๋˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ๋ฉด ํ•จ์ˆ˜ ์žฌ์ƒ์„ฑ์„ ๋ง‰์„ ์ˆ˜ ์žˆ๋‹ค.

โœง State ๋ฐ ์ปดํฌ๋„ŒํŠธ ์ž์„ธํžˆ ์‚ดํŽด๋ณด๊ธฐ

  • ๋ฆฌ์•กํŠธ์—์„œ ์ƒํƒœ(state)๋Š” ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๊ฐœ๋…์ด๋‹ค. ์ด ์ƒํƒœ(state)๋ผ๋Š” ๊ฒƒ์€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‹ค์‹œ ๋ Œ๋”๋งํ•˜๊ณ , ํ™”๋ฉด์— ํ‘œ์‹œ๋˜๋Š” ๊ฒƒ๋“ค์„ ์—…๋ฐ์ดํŠธ ํ•ด์ค€๋‹ค. ๋”ฐ๋ผ์„œ ์ปดํฌ๋„ŒํŠธ์™€ ์ด ์ƒํƒœ(state)์™€์˜ ์ƒํ˜ธ์ž‘์šฉ์€ ๋ฆฌ์•กํŠธ์˜ ํ•ต์‹ฌ ๊ฐœ๋…์ด๋ผ ํ•  ์ˆ˜ ์žˆ๋‹ค.

์ƒํƒœ(state)์™€ ์ปดํฌ๋„ŒํŠธ

  • ์ƒํƒœ(state)์™€ ์ปดํฌ๋„ŒํŠธ ๋ชจ๋‘ ๋ฆฌ์•กํŠธ๊ฐ€ ๊ด€๋ฆฌํ•œ๋‹ค๋Š” ๊ฒƒ์— ์ฃผ๋ชฉํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค. ์ด๋Ÿฌํ•œ ์ปดํฌ๋„ŒํŠธ์˜ ๊ฐœ๋…์€ ๋ฆฌ์•กํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ๋‚˜์˜จ ๊ฒƒ์ด๋ฉฐ, ๋ฆฌ์•กํŠธ๋Š” ์ด ์ปดํฌ๋„ŒํŠธ์™€ ์—ฐ๊ฒฐ๋œ ์ƒํƒœ(state)๋„ ํ•จ๊ป˜ ์ฒ˜๋ฆฌํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. useState hook ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒŒ ๋ฐ”๋กœ ๊ทธ ์˜ˆ์‹œ๊ฐ€ ๋  ์ˆ˜ ์žˆ๋‹ค. useState๋ฅผ ํ†ตํ•ด ์ปดํฌ๋„ŒํŠธ์™€ ์ƒํƒœ(state)๊ฐ„์˜ ์ƒํ˜ธ ์ž‘์šฉ์„ ์ฒ˜๋ฆฌํ•œ๋‹ค.

useState๋Š” ๊ฐ€์žฅ ์ผ๋ฐ˜์ ์ธ ํ˜•ํƒœ์˜ ์ƒํƒœ(state) ๊ด€๋ฆฌ ๋ฐฉ๋ฒ•์ด๋‹ค

  • ๊ฐ€์žฅ ์ผ๋ฐ˜์ ์ธ ํ˜•ํƒœ์˜ ์ƒํƒœ(state) ๊ด€๋ฆฌ๋Š” useState ํ›…์„ ์ด์šฉํ•˜๋Š” ๊ฒƒ์ด๋‹ค. useState๋ฅผ ์ด์šฉํ•˜๋ฉด ์ƒˆ๋กœ์šด ์ƒํƒœ(state)๋ฅผ ๋งŒ๋“ค์–ด์„œ ์ž๋™์ ์œผ๋กœ useState๋ฅผ ํ˜ธ์ถœํ•œ ์ปดํฌ๋„ŒํŠธ์— ์ด๋ฅผ ์—ฐ๊ฒฐํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๋Ÿฐ ์ข…๋ฅ˜์˜ '์—ฐ๊ฒฐ'๋„ ๋ฆฌ์•กํŠธ๊ฐ€ ๋‹ด๋‹นํ•˜๋Š” ์—ญํ• ์ด๋‹ค.

  • useState๋ฅผ ํ˜ธ์ถœํ•˜๊ฒŒ ๋˜๋ฉด ๋ฆฌ์•กํŠธ๋Š” ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ์ด๋ฅผ ๊ด€๋ฆฌํ•˜๊ณ , ์ปดํฌ๋„ŒํŠธ์™€ ์ด๋ฅผ ๋ฌถ์–ด์ค„ ์ƒˆ๋กœ์šด ์ƒํƒœ(state) ๋ณ€์ˆ˜๋ฅผ ๋งŒ๋“ค๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์ด์ „์˜ ํ•™์Šต์—์„œ๋„ ๊ฐ•์กฐํ–ˆ๋“ฏ์ด useState๋ฅผ ํ˜ธ์ถœํ–ˆ์Œ์—๋„ App ์ปดํฌ๋„ŒํŠธ ํ•จ์ˆ˜๊ฐ€ ๋งค๋ฒˆ ๋‹ค์‹œ ์‹คํ–‰๋˜๋Š” ๊ฒƒ์€ ํ™•์‹คํžˆ ์ด์ƒํ•ด ๋ณด์ธ๋‹ค. ์™œ๋ƒํ•˜๋ฉด ์•ž์„œ ๊ฑฐ๋ก ํ•œ ๋ฌธ์ œ๋กœ ์ธํ•ด์„œ ์ƒํƒœ(state)์— ๋Œ€ํ•œ ์–ด๋–ค ์ข…๋ฅ˜์˜ ์†์‹ค์ด ๋ฐœ์ƒํ•˜๊ฑฐ๋‚˜ ์ƒํƒœ(state) ์ดˆ๊ธฐํ™”๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ๊ฒƒ ๊ฐ™์ง€๋Š” ์•Š๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

์ปดํฌ๋„ŒํŠธ๊ฐ€ ์—…๋ฐ์ดํŠธ๋  ๋•Œ๋งˆ๋‹ค useState ์— ์ „๋‹ฌ๋œ ๊ธฐ๋ณธ ๊ฐ’๋„ ๋‹ค์‹œ ์ดˆ๊ธฐํ™” ๋ ๊นŒ?

  • ์ปดํฌ๋„ŒํŠธ ํ•จ์ˆ˜๊ฐ€ ์žฌ์‹คํ–‰ ๋  ๋•Œ๋งˆ๋‹ค ์ƒํƒœ(state) ๊ฐ’์€ ์ดˆ๊ธฐํ™”๋˜์ง€ ์•Š๋Š” ์ด์œ ๋Š” ๊ฐ„๋‹จํ•˜๋‹ค. useState๋Š” ๋ฆฌ์•กํŠธ๊ฐ€ ์ œ๊ณตํ•˜๋Š” ํ›…์ด๋ฉฐ, ๋ฆฌ์•กํŠธ๋Š” ์ƒํƒœ(state)๋ฅผ ๊ด€๋ฆฌํ•˜๊ณ  ์ปดํฌ๋„ŒํŠธ์™€์˜ ์—ฐ๊ฒฐ์„ ๊ด€๋ฆฌํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด ๋ฆฌ์•กํŠธ์˜ ๊ด€๋ฆฌ ํ”„๋กœ์„ธ์Šค์˜ ์ผ๋ถ€๋กœ ๋ฆฌ์•กํŠธ๋Š” useState์™€ ์—ฌ๊ธฐ์— ์ „๋‹ฌ๋œ '๊ธฐ๋ณธ ๊ฐ’'์— ๋Œ€ํ•ด์„œ๋Š” ํ•œ ๋ฒˆ๋งŒ ๊ณ ๋ คํ•˜๋„๋ก ์ฒ˜๋ฆฌ๊ฐ€ ๋˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ํ•œ ๋ฒˆ๋งŒ ๊ณ ๋ คํ•œ๋‹ค๋Š” ๋ง์€ ๋ฌด์—‡์ผ๊นŒ? ๋ฐ”๋กœ App ์ปดํฌ๋„ŒํŠธ(์˜ˆ์‹œ)๊ฐ€ ์ตœ์ดˆ ์‹คํ–‰๋  ๋•Œ์—๋งŒ ๊ณ ๋ คํ•œ๋‹ค๋Š” ๋ง์ด๋‹ค.
import React, { useState, useCallback } from "react";

function App() {
  const [showParagraph, setShowParagraph] = useState(false);
  const [allowToggle, setAllowToggle] = useState(false);

  ...
}
  • App ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ตœ์ดˆ ์‹คํ–‰๋˜๊ณ  useState๊ฐ€ ์‹คํ–‰๋˜๋ฉด, ๋ฆฌ์•กํŠธ๊ฐ€ ๊ด€๋ฆฌํ•˜๋Š” ์ƒˆ๋กœ์šด ์ƒํƒœ(state) ๋ณ€์ˆ˜๋ฅผ ๋งŒ๋“ค๊ฒŒ ๋œ๋‹ค. ๊ทธ๋Ÿฐ ํ›„, ๋ฆฌ์•กํŠธ๋Š” ์ด ๋ณ€์ˆ˜๊ฐ€ ์–ด๋Š ์ปดํฌ๋„ŒํŠธ์— ์†ํ•˜๋Š”์ง€๋ฅผ ๊ธฐ์–ตํ•ด๋‘”๋‹ค. (์šฐ๋ฆฌ์˜ ๊ฒฝ์šฐ์—๋Š” App ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋  ๊ฒƒ์ด๋‹ค.) ๊ทธ๋ฆฌ๊ณ  useState์— ์ „๋‹ฌ๋œ ๊ธฐ๋ณธ ๊ฐ’์„ ์‚ฌ์šฉํ•ด์„œ ์ƒํƒœ(state) ๊ฐ’์„ ์ดˆ๊ธฐํ™”ํ•œ๋‹ค. ์ดํ›„ App ์ปดํฌ๋„ŒํŠธ๋ฅผ ์žฌํ‰๊ฐ€ํ•˜๊ฒŒ ๋  ๋•Œ useState๋ฅผ ํ˜ธ์ถœํ•˜๊ฒŒ ๋˜๋ฉด(์ปดํฌ๋„ŒํŠธ ํ•จ์ˆ˜๊ฐ€ ์žฌํ‰๊ฐ€ ๋  ๋•Œ๋งˆ๋‹ค ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ ํ•จ์ˆ˜์˜ ๋ชจ๋“  ์ฝ”๋“œ๋“ค์€ ์žฌ์‹คํ–‰-ํ˜ธ์ถœ ๋œ๋‹ค.) ์ƒˆ๋กœ์šด ์ƒํƒœ(state)๋Š” ์ƒ์„ฑ๋˜์ง€ ์•Š๋Š”๋‹ค. ๋ฆฌ์•กํŠธ๋Š” ์—ฌ๊ธฐ์—์„œ App ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•œ ์ƒํƒœ(state)๊ฐ€ ์ด๋ฏธ ์กด์žฌํ•จ์„ ๊ธฐ์–ตํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ํ•„์š”ํ•œ ๊ฒฝ์šฐ์—๋งŒ ์ด ์ƒํƒœ(state)๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๊ฒŒ ๋œ๋‹ค. App ์ปดํฌ๋„ŒํŠธ ํ•จ์ˆ˜๊ฐ€ ์žฌ์‹คํ–‰๋˜๊ณ  ๋ช‡ ๋ช‡์˜ ์ƒํƒœ(state)๋Š” ์—…๋ฐ์ดํŠธ๋  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๋”ฐ๋ผ์„œ ๋ฆฌ์•กํŠธ๋Š” ์ƒํƒœ(state)์˜ ๊ด€๋ฆฌ์™€ ๊ฐฑ์‹ ๋งŒ์„ ๋‹ด๋‹นํ•œ๋‹ค.

์ •๋ฆฌ

  • ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๊ฐ€ DOM์—์„œ ์™„์ „ํžˆ ์‚ญ์ œ๋˜๊ฑฐ๋‚˜ ํ•˜์ง€ ์•Š๋Š” ์ด์ƒ ์ƒํƒœ(state)์˜ ์ดˆ๊ธฐํ™”๋Š” ๋‹ค์‹œ ์ด๋ฃจ์–ด์ง€์ง€ ์•Š๋Š”๋‹ค. ๊ฒŒ๋‹ค๊ฐ€ ์šฐ๋ฆฌ๊ฐ€ ์˜ˆ์‹œ๋กœ ๋“ค๊ณ  ์žˆ๋Š” App ์ปดํฌ๋„ŒํŠธ๋Š” root ์ปดํฌ๋„ŒํŠธ์ด๊ธฐ์— ์•ž์„œ ๊ฑฐ๋ก ํ•œ ์˜ˆ์™ธ์ ์ธ ์ผ์€ ์•„์˜ˆ ๋ฐœ์ƒํ•˜์ง€๋„ ์•Š์„ ๊ฒƒ์ด๋‹ค. ๋ฌผ๋ก  ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์˜ ๊ฒฝ์šฐ๋ผ๋ฉด ์กฐ๊ฑด์— ๋”ฐ๋ผ ๋ Œ๋”๋ง๋  ์ˆ˜๋„ ์žˆ์ง€๋งŒ ๋ง์ด๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์‚ญ์ œ๋˜์—ˆ๋‹ค๊ฐ€ ๋‹ค์‹œ ์—ฐ๊ฒฐ๋œ๋‹ค๋ฉด ์ƒˆ๋กœ์šด ์ƒํƒœ(state)๊ฐ€ ํ˜ธ์ถœ๋˜๊ณ  ๋‹ค์‹œ ์ดˆ๊ธฐํ™”๋  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค. ํ•˜์ง€๋งŒ DOM ์— ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์—ฐ๊ฒฐ๋˜๊ณ  ์œ ์ง€๋˜๋Š” ๋™์•ˆ์—๋Š” ์ƒํƒœ(state)๋Š” ์ตœ์ดˆ์˜ ์ดˆ๊ธฐํ™” ์ดํ›„์—๋Š” '๊ฐฑ์‹ '๋งŒ ๋œ๋‹ค. ์ด๋Š” ์•„์ฃผ ์ค‘์š”ํ•œ ๊ฐœ๋…์ด๋‹ค. ๋ฌผ๋ก  useReducer์— ๋Œ€ํ•ด์„œ๋„ ์ด ๊ฐœ๋…์€ ๋™์ผํ•˜๊ฒŒ ์ ์šฉ๋œ๋‹ค.

โœง State ์Šค์ผ€์ค„๋ง ๋ฐ ์ผ๊ด„ ์ฒ˜๋ฆฌ ์ดํ•ดํ•˜๊ธฐ

  • ์ง€๊ธˆ๊นŒ์ง€ ๋ฆฌ์•กํŠธ๊ฐ€ ์–ด๋–ป๊ฒŒ ์ƒํƒœ(state)๋ฅผ ๊ด€๋ฆฌํ•˜๋Š”์ง€์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์•˜๋‹ค. ํ•˜์ง€๋งŒ ์•ž์„œ ๊ฑฐ๋ก ํ–ˆ๋“ฏ์ด ๊ฐ•์กฐํ•ด์•ผ ํ•  ์ค‘์š”ํ•œ ๊ฐœ๋…์ด ์žˆ๋‹ค. ๊ทธ๊ฒƒ์€ ๋ฆฌ์•กํŠธ๊ฐ€ ์ƒํƒœ(state)์— ๋Œ€ํ•œ '๊ฐฑ์‹ '์„ ์–ด๋–ป๊ฒŒ ํ•˜๋Š”์ง€์— ๋Œ€ํ•œ ๊ฒƒ ๋ง์ด๋‹ค.
function MyProduct() {
  const [currentState, setCurrentState] = useState("DVD");
}
  • ์˜ˆ์‹œ ์ฝ”๋“œ๋ฅผ ํ•œ ๋ฒˆ ๋ณด์ž. ์šฐ๋ฆฌ๋Š” MyProduct ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์กด์žฌํ•œ๋‹ค. ์ด ์ปดํฌ๋„ŒํŠธ ์•ˆ์—์„œ๋Š” useState ํ›…์„ ํ†ตํ•ด ์ผ๋ถ€ ์ƒํƒœ(state)๋“ค์„ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฆ‰, ๋ฆฌ์•กํŠธ๊ฐ€ ์ƒํƒœ(state)๋ฅผ ๊ด€๋ฆฌํ•ด์ค„ ์ˆ˜ ์žˆ๋‹ค. MyProduct ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์˜ currentState ์ƒํƒœ(state)๋Š” 'DVD' ๋ผ๋Š” ๋ฌธ์ž์—ด ์ดˆ๊ธฐ๊ฐ’์„ ๊ฐ€์กŒ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด์ž. ์•„๋งˆ๋„ ์–ด๋–ค ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๋ ์ง€๋Š” ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ ์‚ฌ์šฉ์ž๊ฐ€ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๊ฑฐ๋‚˜ ํ•˜๋ฉด์„œ ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ ์•ˆ์—์„œ ์ƒํƒœ(state)๊ฐ€ ์—…๋ฐ์ดํŠธ๋˜๊ณ  ๊ฐฑ์‹ ๋  ๊ฒƒ์ด๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ƒํƒœ(state) ์—…๋ฐ์ดํŠธ ํ•จ์ˆ˜์ธ setCurrentState ๋ฅผ ํ†ตํ•ด์„œ ์ƒˆ๋กœ์šด ๊ฐ’์œผ๋กœ ์—…๋ฐ์ดํŠธ ๋  ๊ฒƒ์ด๋‹ค.
function MyProduct() {
  const [currentState, setCurrentState] = useState("DVD");

  const buttonClickHandler = () => {
    setCurrentState("BOOK");
  };
}
  • ๊ทธ๋ฆฌ๊ณ  ์ด์ œ ์ด ์ œํ’ˆ์„ 'DVD'์—์„œ 'BOOK'์œผ๋กœ ๋ณ€๊ฒฝํ•˜๊ณ ์ž ํ•œ๋‹ค. buttonClickHandler ํ•จ์ˆ˜์—์„œ ๋ฐœ์ƒํ•˜๋Š” ์ผ์€ setCurrentState ๊ฐ€ ์‹คํ–‰๋˜์—ˆ์Œ์—๋„ ๊ธฐ์กด์˜ cuurentState ์ดˆ๊ธฐ ๊ฐ’์ธ 'DVD' ๊ฐ€ ์ฆ‰๊ฐ์ ์œผ๋กœ ๋ณ€๊ฒฝ๋˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ๋Œ€์‹ ์— ์ƒํƒœ(state) ์—…๋ฐ์ดํŠธ ํ•จ์ˆ˜์ธ setCurrentState ๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด, 'BOOK' ๋ฐ์ดํ„ฐ๋กœ ์ƒํƒœ(state) ์—…๋ฐ์ดํŠธ๋ฅผ ํ•˜๋„๋ก ์˜ˆ์•ฝ์„ ํ•˜๊ฒŒ ๋œ๋‹ค. ์ด๊ฒƒ์ด ์ƒํƒœ(state) ๊ฐฑ์‹  ์˜ˆ์•ฝ์ด๋‹ค.

์ƒํƒœ(state) ๊ฐฑ์‹  ์˜ˆ์•ฝ์ด๋ž€ ๋ฌด์—‡์ธ๊ฐ€

  • ๋ฆฌ์•กํŠธ๋Š” ์ƒํƒœ(state) ์—…๋ฐ์ดํŠธ ํ•จ์ˆ˜์ธ setCurrentState ๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  ์ƒํƒœ(state) ์—…๋ฐ์ดํŠธ๊ฐ€ ํ•„์š”ํ•˜๋‹ค๋Š” ๊ฒƒ์„ ์ธ์ง€ํ•˜๊ณ  ์žˆ๊ณ  ๋˜ํ•œ ์ฒ˜๋ฆฌํ•  ๊ณ„ํš๊นŒ์ง€ ์ค€๋น„ํ•˜๊ณ  ์žˆ์ง€๋งŒ ์ด๋ฅผ ์ฆ‰์‹œ ์ฒ˜๋ฆฌํ•˜์ง€๋Š” ์•Š๋Š”๋‹ค. ์‚ฌ์‹ค ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ์—๋Š” ์ƒํƒœ(state) ๋ณ€๊ฒฝ์ด ๋ฐœ์ƒํ•˜๋ฉด ์ƒํƒœ(state) ๊ฐฑ์‹ ์— ๋Œ€ํ•œ ์Šค์ผ€์ค„ ์ž‘์—…์„ ๋งค์šฐ ๋น ๋ฅด๊ฒŒ ๋ฐœ์ƒํ•œ๋‹ค. ๊ฑฐ์˜ ์ฆ‰๊ฐ์ ์ธ ๊ฑฐ๋‚˜ ๋‹ค๋ฆ„ ์—†๋‹ค. ์‹ค์ œ๋กœ๋Š” ์ˆœ๊ฐ„์ ์œผ๋กœ ๋ฐœ์ƒํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด๋ฉฐ, ์‚ฌ์šฉ์ž ์—ญ์‹œ ์ด๋Ÿฌํ•œ '์ง€์—ฐ'์— ๋Œ€ํ•ด์„œ๋Š” ์•Œ์ง€ ๋ชปํ•œ๋‹ค. ํ•˜์ง€๋งŒ ๋ฆฌ์•กํŠธ๋Š” ์ด ์ƒํƒœ(state) ๋ณ€ํ™”๋ฅผ '์ง€์—ฐ' ์‹œํ‚ค๊ฒŒ ๋œ๋‹ค.

๋ฆฌ์•กํŠธ๋Š” ์ƒํƒœ(state) ๋ณ€ํ™”๋ฅผ ์ง€์—ฐ ์‹œํ‚จ๋‹ค

  • ๋Œ€๋‹ค์ˆ˜์˜ ์„ฑ๋Šฅ ๊ธฐ๋ฐ˜์˜ ์ž‘์—…๋“ค์€ ๊ฑฐ์˜ ๋™์‹œ์— ์ง„ํ–‰๋˜๋Š”๋ฐ, ์ž ์žฌ์ ์œผ๋กœ ๋ฆฌ์•กํŠธ๋Š” ๋” ๋†’์€ ์šฐ์„  ์ˆœ์œ„๋ฅผ ๊ฐ–๋Š” ๊ฒƒ์œผ๋กœ ๊ฐ„์ฃผํ•œ๋‹ค. ํ™”๋ฉด์— ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ๋Š” ์ธํ’‹ ์ฐฝ์ด ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด์ž. ์‚ฌ์šฉ์ž ์ž…๋ ฅ์— ์‘๋‹ตํ•˜๋Š” ๊ฒƒ์ด ํ™”๋ฉด์˜ ๋ฌธ์ž๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค๋Š” ๋” ์šฐ์„  ์ˆœ์œ„๊ฐ€ ๋†’์„ ๊ฒƒ์ด๋‹ค. ์ด๋Ÿฌํ•œ ์ด์œ ๋กœ ๋ฆฌ์•กํŠธ๋Š” ์˜ˆ์ •๋œ ์ƒํƒœ(state) ๋ณ€๊ฒฝ์„ '์ง€์—ฐ' ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.

๋ฆฌ์•กํŠธ๋Š” ์ƒํƒœ(state) ๋ณ€ํ™”๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์šฐ์„ ์ˆœ์œ„์— ๋”ฐ๋ผ ๊ฐ™์€ ํƒ€์ž…์ž„์„ ๋ณด์ฆํ•œ๋‹ค

  • ๋ฆฌ์•กํŠธ๊ฐ€ ํ•˜๋Š” ์ผ์€ ์ƒํƒœ(state) ๋ณ€ํ™”๊ฐ€ ๋ฐœ์ƒํ•˜๊ฒŒ ๋˜๋ฉด ์ด ์ƒํƒœ(state) ๋ณ€ํ™”์˜ ์ˆœ์„œ๋ฅผ ๋ช…ํ™•ํ•˜๊ฒŒ ํ•ด์„œ, ๊ฐ™์€ ํƒ€์ž… ์ž„์„ ๋ณด์ฆํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ์•ž์„œ ์‚ดํŽด๋ณด์•˜๋˜ ์ฝ”๋“œ๋ฅผ ๋‹ค์‹œ ๋ณด์ž.
function MyProduct() {
  const [currentState, setCurrentState] = useState("DVD");

  const buttonClickHandler = () => {
    setCurrentState("BOOK");
  };
}
  • ์ฆ‰๊ฐ ์‹คํ–‰์ด ํ•„์ˆ˜์ ์ธ ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค. ๊ฒฐ๊ตญ ์–ธ์  ๊ฐ€๋Š” ์ฒ˜๋ฆฌ๊ฐ€ ๋˜๊ณ  ์ƒํƒœ(state)๋Š” 'BOOK'์œผ๋กœ ๋ฐ”๋€” ๊ฒƒ์ด๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ƒํƒœ(state)๊ฐ€ ํ™œ์„ฑํ™”๋˜๋ฉด ๋˜ ์ƒํƒœ(state) ๋ณ€ํ™”๊ฐ€ ์ฒ˜๋ฆฌ๋˜๋ฉด ๋ฆฌ์•กํŠธ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ์žฌํ‰๊ฐ€ํ•˜๊ณ  ์ปดํฌ๋„ŒํŠธ ํ•จ์ˆ˜๋ฅผ ์žฌ์‹คํ–‰ํ•  ๊ฒƒ์ด๋‹ค.

state์˜ ์Šค์ผ€์ฅด๋ง

  • ์ƒํƒœ(state)์˜ ์Šค์ผ€์ค„๋ง ๋•Œ๋ฌธ์— ๋‹ค์ˆ˜์˜ ์ƒํƒœ(state) ๊ฐฑ์‹  ์˜ˆ์•ฝ์ด ๋™์‹œ์— ์žˆ์„ ๊ฐ€๋Šฅ์„ฑ๋„ ์žˆ๋‹ค. ์ด ๋•Œ๋ฌธ์— ๋™์‹œ์— ์—ฌ๋Ÿฌ ๋ฒˆ์˜ ๊ฐฑ์‹ ์ด ์Šค์ผ€์ค„ ๋  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ, ์ƒํƒœ(state)๋ฅผ ๊ฐฑ์‹ ํ•  ๋•Œ๋Š” ํ•จ์ˆ˜ ํ˜•ํƒœ๋ฅผ ์ด์šฉํ•ด์„œ ๊ฐฑ์‹ ํ•˜๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•œ๋‹ค. ํŠนํžˆ ์ด์ „ ์ƒํƒœ(state) ์Šค๋ƒ…์ƒท์— ์˜์กดํ•ด์•ผ ํ•œ๋‹ค๋ฉด ๋ง์ด๋‹ค.
const toggleParagraphHandler = useCallback(() => {
  if (allowToggle) {
    setShowParagraph((prevParagraph) => !prevParagraph);
  }
}, [allowToggle]);
  • ํ•ด๋‹น ์ฝ”๋“œ๋Š” ๋‹ค๋ฅธ ์˜ˆ์‹œ์ง€๋งŒ, ํ•จ์ˆ˜ ํ˜•ํƒœ๋กœ ์ƒํƒœ(state)๋ฅผ ๊ฐฑ์‹ ํ•˜๊ณ  ์žˆ๊ธฐ์— ๊ฐ€์ ธ์™”๋‹ค. ์‚ฌ์‹ค ๋งŽ์€ ๊ฒฝ์šฐ์— ํ•จ์ˆ˜ ํ˜•ํƒœ๋กœ ์ƒํƒœ(state)๋ฅผ ๊ฐฑ์‹ ํ•˜์ง€ ์•Š๋Š”๋‹ค๊ณ  ํฐ ๋ฌธ์ œ๊ฐ€ ๋˜๋Š” ์ผ์€ ๋ณ„๋กœ ์—†๋‹ค. ๋˜ํ•œ ๊ต‰์žฅํžˆ ๋น ๋ฅด๊ฒŒ ์ฒ˜๋ฆฌ๊ฐ€ ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฆฌ์•กํŠธ์—์„œ ์Šค์ผ€์ค„๋ง์œผ๋กœ ์ธํ•œ '์ง€์—ฐ' ์กฐ์ฐจ ์‚ฌ์šฉ์ž๋Š” ๋Š๋ผ์ง€ ๋ชปํ•  ๊ฐ€๋Šฅ์„ฑ์ด ๋” ํฌ๋‹ค. ํ•˜์ง€๋งŒ ์ด๋ก ์ƒ์œผ๋กœ๋Š” ๋ถ„๋ช… ์ด ์Šค์ผ€์ค„๋ง ์ž‘์—…์œผ๋กœ ์ธํ•œ '์ง€์—ฐ'์ด ๋ฐœ์ƒ๋  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ํ•จ์ˆ˜ ํ˜•ํƒœ๋กœ ์—…๋ฐ์ดํŠธ ํ•˜๋Š” ๊ฒƒ์ด ์ƒํƒœ(state) ๋ณ€๊ฒฝ์ด ์ˆœ์„œ๋Œ€๋กœ ์ฒ˜๋ฆฌ๋˜๊ณ  ์ด์ „ ์ƒํƒœ(state)๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๋งค ํšŒ ์ƒํƒœ(state) ๋ณ€๊ฒฝ์ด ๋ฐœ์ƒํ•  ๋•Œ๋งˆ๋‹ค ๊ฐ€์ƒ ์ตœ์‹ ์˜ ์ƒํƒœ(state)๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ์•ˆ์ „ํ•œ ๋ฐฉ๋ฒ•์ธ ๊ฒƒ์€ ๋ช…๋ฐฑํ•  ๊ฒƒ์ด๋‹ค.

ํ•จ์ˆ˜ ํ˜•ํƒœ๋กœ ์ƒํƒœ(state)๋ฅผ ์—…๋ฐ์ดํŠธํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ์–ด๋–ค ๊ฒฐ๊ณผ๋ฅผ ์ดˆ๋ž˜ํ• ๊นŒ?

  • ๋งŒ์•ฝ ํ•จ์ˆ˜ ํ˜•ํƒœ๋กœ ์ƒํƒœ(state)๋ฅผ ์—…๋ฐ์ดํŠธํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ์–ด๋–ค ๊ฐ€๋Šฅ์„ฑ์ด๋ž€ ๋ฌด์—‡์ผ๊นŒ? ์ปดํฌ๋„ŒํŠธ ํ•จ์ˆ˜๊ฐ€ ๋งˆ์ง€๋ง‰์œผ๋กœ ์‹คํ–‰๋  ๋•Œ์˜ ์ƒํƒœ(state)๋ฅผ ์–ป๋Š”๋‹ค๋Š” ๊ฒƒ์€ ์ฆ‰ ์ƒํƒœ(state) ๋ณ€๊ฒฝ์ด ์ˆœ์„œ๋Œ€๋กœ ์‹คํ–‰๋  ๋•Œ์™€๋Š” ์กฐ๊ธˆ ๋‹ค๋ฅธ ๊ฒฐ๊ณผ๋ฅผ ๋‚ณ์„ ๊ฐ€๋Šฅ์„ฑ์ด ๋†’๋‹ค๋Š” ๋œป์ด๋‹ค. ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ์˜ ์žฌ ๋ Œ๋”๋ง ์ฃผ๊ธฐ๋Š” ๋ชจ๋‘ ๋™์ผํ•˜๊ณ  ์™„๋ฃŒ๋˜์ง€ ์•Š์€ ์ƒํƒœ(state) ๋ณ€๊ฒฝ ์ž‘์—…์ด ์—ฌ๋Ÿฌ ๊ฐœ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ด๋ณด์ž. ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์— ์žˆ๋Š” ๋ชจ๋“  ์ฝ”๋“œ๋“ค์€ ์ตœ์ข… ์ปดํฌ๋„ŒํŠธ ์Šค๋ƒ…์ƒท์œผ๋กœ๋ถ€ํ„ฐ ๋ฐœ์ƒํ•˜์ง€๋งŒ, ๋‹น์—ฐํžˆ ์ƒํƒœ(state) ๋ณ€๊ฒฝ ์ž‘์—…์ด ์ฒ˜๋ฆฌ๋œ ๊ฒฝ์šฐ์—๋Š” ์ปดํฌ๋„ŒํŠธ๋Š” ์ค‘๊ฐ„์— ๋‹ค์‹œ ๋ Œ๋”๋ง ๋  ๊ฒƒ์ด๋‹ค. ํ•˜์ง€๋งŒ ์ƒํƒœ(state) ๋ณ€๊ฒฝ ์ž‘์—…๋“ค์€ ์ด๋ฏธ ๊ฐฑ์‹ ์— ๋Œ€ํ•œ ์˜ˆ์•ฝ์ด ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์™„๋ฃŒ๋˜์ง€ ์•Š์€ ์ƒํƒœ(state) ๋ณ€๊ฒฝ ์ž‘์—…์€ ์ƒˆ๋กœ์šด ์ปดํฌ๋„ŒํŠธ์˜ ๊ฒฐ๊ณผ๋ฅผ ๊ณ ๋ คํ•˜์ง€ ์•Š๊ฒŒ ๋œ๋‹ค.

์ƒํƒœ(state) ์—…๋ฐ์ดํŠธ๋Š” ํ•จ์ˆ˜ ํ˜•ํƒœ๋กœ !

  • ์ƒํƒœ(state) ์—…๋ฐ์ดํŠธ๋Š” ํ•จ์ˆ˜ ํ˜•ํƒœ๋กœ ์‚ฌ์šฉํ•ด์•ผ ๋ฆฌ์•กํŠธ๊ฐ€ ๋ฏธ์™„๋ฃŒ๋œ ์ƒํƒœ(state) ๋ณ€๊ฒฝ ์ž‘์—…์— ๋Œ€ํ•˜์—ฌ ์ตœ์‹ ์˜ ์ƒํƒœ(state)๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์žฌ๋ Œ๋”๋ง๋˜์—ˆ์„ ๊ทธ ์‹œ์ ์˜ ์ƒํƒœ(state)๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค. ์ด๊ฒƒ์ด ํ•จ์ˆ˜ ํ˜•ํƒœ๋ฅผ ์‚ฌ์šฉํ•˜๊ธธ ๊ถŒ์žฅํ•˜๋Š” ์ด์œ ๊ฐ€ ๋œ๋‹ค. ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์žฌ๋ Œ๋”๋ง ๋˜์—ˆ์„ ๋•Œ์˜ ์‹œ์ ๊ณผ ์ƒํƒœ(state) ๋ณ€๊ฒฝ์ด ์˜ˆ์•ฝ๋˜๋Š” ์‹œ์ ์˜ ์ฐจ์ด๋ฅผ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์€ ์ค‘์š”ํ•˜๋‹ค. ํ•˜๋‚˜์˜ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์žฌํ‰๊ฐ€ ๋˜๋ฉด์„œ ๋ฏธ์™„๋ฃŒ๋œ ์ƒํƒœ(state) ๋ณ€๊ฒฝ ์ž‘์—…์ด ์—ฌ๋Ÿฌ ๊ฐœ ์žˆ์„ ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๊ฒƒ์ด ๋ฐ”๋กœ ํ•จ์ˆ˜ ํ˜•ํƒœ๋กœ ์ƒํƒœ(state) ์—…๋ฐ์ดํŠธ๋ฅผ ํ•ด์•ผ ํ•˜๋Š” ํ•ต์‹ฌ์ ์ธ ์ด์œ ๊ฐ€ ๋œ๋‹ค.

๋™์ผํ•œ ์ด์Šˆ(๊ฐ€์žฅ ์ตœ์‹ ์˜ ์ƒํƒœ(state)๋ฅผ ๋ฐ›์•„์˜ค์ง€ ์•Š์„ ๊ฐ€๋Šฅ์„ฑ)๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๋˜ ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•

  • ์šฐ๋ฆฌ๊ฐ€ ์ด์ „์— useEffect์— ๋Œ€ํ•ด ํ•™์Šตํ–ˆ๋˜ ์ ์„ ๊ธฐ์–ตํ•  ๊ฒƒ์ด๋‹ค.

    section 10 ์ฐธ์กฐ

// Reducer์˜ ์ƒํƒœ ๊ฐ’์„ ์ด์šฉํ•œ ๊ฐ์ฒด ๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹น
const { isValid: emailValid } = emailState;
const { isValid: passwordValid } = passwordState;

useEffect(() => {
  const identifier = setTimeout(() => {
    console.log("Checking form validity!");
    setFormIsValid(emailValid && passwordValid);
  }, 500);

  return () => {
    console.log("CLEANUP");
    clearTimeout(identifier);
  };
}, [emailValid, passwordValid]);
  • ์ด์ „์˜ ์ฝ”๋“œ์—์„œ useEffect ๋‚ด๋ถ€์—์„œ ์ด๋ฉ”์ผ๊ณผ ๋น„๋ฐ€๋ฒˆํ˜ธ์˜ ์œ ํšจ ์ƒํƒœ(state)๋ฅผ ํ†ตํ•ด ํผ์˜ ์œ ํšจ์„ฑ์„ ์—…๋ฐ์ดํŠธํ•˜๋Š” ๊ฒƒ์ด ์ข€ ๋” ์•ˆ์ „ํ•˜๋‹ค๊ณ  ํ–ˆ๋˜ ๊ฒƒ์„ ๊ธฐ์–ตํ•  ๊ฒƒ์ด๋‹ค. ์ด์ „ ์ƒํƒœ(state)์˜ ์Šค๋ƒ…์ƒท์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์ƒํƒœ(state)๋ฅผ ๊ฐฑ์‹ ํ•˜๊ธฐ ์œ„ํ•ด ํ•จ์ˆ˜ ํ˜•์‹์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๊ณผ ๋™์ผํ•˜๊ฒŒ useEffect ์ƒํƒœ(state) ๋˜๋Š” ์ข…์†๋œ ๊ฐ’์ด ๋ณ€๊ฒฝ๋  ๋•Œ๋งˆ๋‹ค ์˜์กด์„ฑ ๋ฉ”์ปค๋‹ˆ์ฆ˜์„ ํ†ตํ•ด ๋‚ด๋ถ€์—์„œ ์„ ์–ธํ•œ ์ดํŽ™ํŠธ๊ฐ€ ์žฌ์‹คํ–‰ ๋˜๋„๋ก ํ•˜๋Š” ๋ฐฉ๋ฒ• ๋ง์ด๋‹ค. ์ด๋ฅผ ํ†ตํ•ด์„œ ์ปดํฌ๋„ŒํŠธ ํ•จ์ˆ˜๊ฐ€ ์žฌ์‹คํ–‰๋˜๋ฉด์„œ ๋งค๋ฒˆ ๋ฆฌํŽ™ํŠธ ์—ญ์‹œ ๋‹ค์‹œ ์žฌ์‹คํ–‰๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฏธ์™„๋ฃŒ๋œ ์ƒํƒœ(state) ๋ณ€๊ฒฝ ์ž‘์—…์ด ๋น ์ง์—†์ด ์‹คํ–‰๋œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์‹ค์ œ๋กœ ์ดํŽ™ํŠธ๋Š” ์ด ์ดํ›„์— ์‹คํ–‰๋˜๊ธฐ์— ์ด๋Ÿฐ ์ž‘์—…์ด ์ˆ˜ํ–‰๋  ๋•Œ๋งˆ๋‹ค ๊ฐ€์žฅ ์ตœ์‹ ์˜ ๊ฒฐ๊ณผ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.

๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ• ์ค‘์— ์–ด๋–ค ๊ฒƒ์„ ์„ ํƒํ•ด์„œ ์‚ฌ์šฉํ•ด์•ผ ํ• ๊นŒ?

  • ์ด ๋‘๊ฐ€์ง€ ๋ฐฉ๋ฒ•์€ ๋ชจ๋‘ '๊ฐ€์žฅ ์ตœ์‹ ์˜ ์ƒํƒœ(state)๋ฅผ ๋ฐ›์•„์˜ฌ ์ˆ˜ ์žˆ๋„๋ก' ํ•˜๋Š” ๋ฐฉ๋ฒ•๋“ค์ด๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด ๋‘๊ฐ€์ง€ ๋ฐฉ๋ฒ• ์ค‘์— ์–ด๋–ค ๊ฑธ ์„ ํƒํ•˜๋Š๋ƒ๋Š” ์šฐ๋ฆฌ๊ฐ€ ์ด๋ฅผ ํ†ตํ•ด์„œ ๋ฌด์—‡์„ ์–ป๊ณ  ์‹ถ์€์ง€์— ๋”ฐ๋ผ์„œ ๋‹ฌ๋ผ์ง„๋‹ค.

์ƒํƒœ(state) ๊ฐฑ์‹  ์Šค์ผ€์ค„๋ง์„ ๊ธฐ์–ตํ•ด์•ผ๋งŒ ํ•˜๋Š” ์ด์œ 

  • ์ƒํƒœ(state) ๊ฐฑ์‹  ์Šค์ผ€์ค„๋ง์€ ๊ผญ ๊ธฐ์–ตํ•ด์•ผ๋งŒ ํ•˜๋Š” ๋ฉ”์ปค๋‹ˆ์ฆ˜์ด๋‹ค. ๋‹จ์ˆœํžˆ ์ด ๋ฉ”์ปค๋‹ˆ์ฆ˜์„ ํ†ตํ•ด ๋ฌด์–ธ๊ฐ€๋ฅผ ํ•˜๋ ค๊ณ  ํ•˜๋Š” ๊ฒŒ ์•„๋‹ˆ๋ฉฐ ์‚ฌ์‹ค์ƒ ์Šค์ผ€์ค„ ์—…๋ฐ์ดํŠธ ๊ด€๋ฆฌ๋Š” ๋ฆฌ์•กํŠธ๊ฐ€ ํ•ด์ฃผ๊ณ  ์žˆ์ง€๋งŒ ๋ง์ด๋‹ค. ๋‹ค๋งŒ ์šฐ๋ฆฌ๊ฐ€ ๋ฐ์ดํ„ฐ ์—†์ด ์ž‘์—…์„ ํ•  ๋•Œ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ์ž ์žฌ์ ์ธ ์œ„ํ—˜์„ ๋ฐฐ์ œํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋ฐ˜๋“œ์‹œ ์งš๊ณ  ๋„˜์–ด๊ฐ€์•ผํ•˜๋Š” ๊ฐœ๋…์ด๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด ์ž ์žฌ์  ์ด์Šˆ๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ์šฐ๋ฆฌ๊ฐ€ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋Š” ๋‘๊ฐœ์˜ ๊ฐ€๋Šฅ์„ฑ(ํ•จ์ˆ˜ ํ˜•ํƒœ๋กœ ์ƒํƒœ(state) ์—…๋ฐ์ดํŠธํ•˜๊ธฐ, useEffect๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ) ๋˜ํ•œ ๊ธฐ์–ตํ•ด์•ผ ํ•œ๋‹ค.
const exampleHandler = () => {
  setFirstState(something1);
  setSecondState(something2);
};
  • ์˜ˆ์‹œ ์ฝ”๋“œ๋ฅผ ๋ณด์ž. exampleHandler ํ•จ์ˆ˜ ๋‚ด๋ถ€์˜ ๋‘ ๊ฐœ์˜ ์ƒํƒœ(state) ๊ฐฑ์‹ ์ด ์Šค์ผ€์ค„๋ง ๋  ๊ฒƒ์ด๋‹ค. ํ•˜์ง€๋งŒ ์ปดํฌ๋„ŒํŠธ ์—ญ์‹œ ์žฌ์‹คํ–‰๋˜๊ณ  ์žฌํ‰๊ฐ€๋œ๋‹ค๋Š” ๊ฒƒ๋„ ์˜๋ฏธํ•œ๋‹ค. ์‚ฌ์‹ค ์ด๊ฒƒ๋“ค์€ ๋ฆฌ์•กํŠธ๊ฐ€ ํ•˜๋Š” ์—ญํ• ์ด ์•„๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ๋‘ ๊ฐœ์˜ ์ƒํƒœ(state) ๊ฐฑ์‹ ์ด ๊ฐ™์€ ์ฝ”๋“œ ์กฐ๊ฐ์— ์กด์žฌํ•œ๋‹ค๋ฉด, ์ฆ‰ ๊ฐ™์€ ํ•จ์ˆ˜๊ฐ€ ์„œ๋กœ ๋‹ค๋ฅธ ํ”„๋กœ๋ฏธ์Šค์— ์žˆ์ง€ ์•Š๊ณ , ๊ฐ™์€ ๊ณณ์— ์กด์žฌํ•œ๋‹ค๋ฉด ์ด ๋‘˜ ์‚ฌ์ด์— ์‹œ๊ฐ„ '์ง€์—ฐ'๊ณผ ๊ฐ™์€ ํ˜„์ƒ์€ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š”๋‹ค.
setFirstState(something1);
setSecondState(something2);
  • ๋‘ ๊ฐœ์˜ ์ƒํƒœ(state) ๊ฐฑ์‹  ํ•จ์ˆ˜๊ฐ€ ๊ฐ™์€ ๊ณณ(exampleHandler)์— ์œ„์น˜ํ•˜๊ณ  ์ด ๋‘˜ ๋ชจ๋‘ ์ง€๊ธˆ๊ณผ ๊ฐ™์ด ์ƒํƒœ(state) ๊ฐฑ์‹  ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ๋‹ค๋ฉด ๋ฆฌ์•กํŠธ๋Š” ์ด๋“ค์— ๋Œ€ํ•œ ์ƒํƒœ(state) ๊ฐฑ์‹ ์„ ํ•˜๋‚˜์˜ ๋™๊ธฐํ™” ํ”„๋กœ์„ธ์Šค์—์„œ ๊ฐ™์ด ์‹คํ–‰ํ•˜๊ฒŒ ๋œ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด์„œ, ํ•˜๋‚˜์˜ ํ•จ์ˆ˜๊ฐ€ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ์–ด๋– ํ•œ ์ฝœ๋ฐฑ์ด๋‚˜ ํ”„๋กœ๋ฏธ์Šค ์—†์ด ์‹คํ–‰๋œ๋‹ค๋ฉด ๋ฆฌ์•กํŠธ๋Š” ์ด ํ•จ์ˆ˜๋กœ๋ถ€ํ„ฐ ๋ฐœ์ƒํ•˜๋Š” ๋ชจ๋“  ์ƒํƒœ(state) ๊ฐฑ์‹  ์ž‘์—…์„ ํ•˜๋‚˜์˜ ์ƒํƒœ(state) ๊ฐฑ์‹  ์ž‘์—…์œผ๋กœ ์ฒ˜๋ฆฌํ•œ๋‹ค๋Š” ๋œป์ด๋‹ค.

์ •๋ฆฌ

  • ํ•˜๋‚˜์˜ ํ•จ์ˆ˜ ์•ˆ์—์„œ ์•„์˜ˆ ๋‹ค๋ฅธ ๊ฒƒ์œผ๋กœ ์—…๋ฐ์ดํŠธ๋ฅผ ํ•œ๋‹ค๋ฉด ๋‘ ๊ฐœ์˜ ์ƒํƒœ(state)๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ํ•˜๋‚˜์˜ ์ƒํƒœ(state) ๋ณ€๊ฒฝ ์ž‘์—… ์Šค์ผ€์ค„์ด ์กด์žฌํ•˜๊ฒŒ ๋œ๋‹ค. ์ด๋Š” ๋‹จ ํ•˜๋‚˜์˜ ํ”„๋กœ์„ธ์Šค๋งŒ์„ ๊ฐ€์ง€๋ฉฐ, ์ปดํฌ๋„ŒํŠธ์˜ ์žฌ์‹คํ–‰-์žฌํ‰๊ฐ€๋กœ ์ธํ•œ ๋‘ ๋ฒˆ์˜ ๋ณ€๊ฒฝ ์ž‘์—…์ด ์•„๋‹ˆ๋ผ ํ•จ์ˆ˜ ๋‚ด์˜ ๋ชจ๋“  ์ƒํƒœ(state) ๋ณ€๊ฒฝ์„ ํ•˜๋‚˜์˜ ์ž‘์—…์œผ๋กœ ๊ฒฐํ•ฉํ•ด ๋†“์€ ์Šค์ผ€์ค„์ด๋ž€ ๋œป์ด๋‹ค. ๋”ฐ๋ผ์„œ ์ƒํƒœ(state) ๋ฐฐ์น˜ ์ž‘์—…์€ ๋ฆฌ์•กํŠธ๋ฅผ ํ†ตํ•œ ์ž‘์—…์—์„œ ๋ฐ˜๋“œ์‹œ ์•Œ์•„์•ผ ํ•˜๋Š” ๋˜ ๋‹ค๋ฅธ ๊ฐœ๋…์ด๋‹ค.

โœง useMemo()๋กœ ์ตœ์ ํ™”ํ•˜๊ธฐ

  • useCallback์ฒ˜๋Ÿผ ๋˜ ๋‹ค๋ฅธ ์ตœ์ ํ™” ๋ฐฉ๋ฒ•์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” useMemo ํ›…์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณผ ๊ฒƒ์ด๋‹ค. ๊ทธ ์ „์— ๋จผ์ € ์˜ˆ์ œ์˜ ์ฝ”๋“œ์—์„œ ์šฐ๋ฆฌ๊ฐ€ ์ด์ „์— ์ตœ์ ํ™”ํ–ˆ๋˜ ๋ฐฉ๋ฒ•์ธ useCallback์ด ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ๋Š”์ง€๋ฅผ ํ•˜๋‚˜์”ฉ ํ™•์ธํ•ด๋ณผ ๊ฒƒ์ด๋‹ค.

App.js

function App() {
  const [listTitle, setListTitle] = useState("My List");

  const changeTitleHandler = useCallback(() => {
    setListTitle("New Title");
  }, []);

  return (
    <div className="app">
      <DemoList title={listTitle} items={[5, 3, 1, 10, 9]} />
      <Button onClick={changeTitleHandler}>Change List Title</Button>
    </div>
  );
}
  • ์˜ˆ์ œ์˜ App ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ฒœ์ฒœํžˆ ์‚ดํŽด๋ณด์ž. changeTitleHandler ํ•จ์ˆ˜์—์„œ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” useCallback์€ ๊ธฐ๋ณธ์ ์œผ๋กœ ํ•จ์ˆ˜๋ฅผ ์ €์žฅํ•˜๋ฉฐ, ์ €์žฅ๋œ ํ•จ์ˆ˜๋ฅผ ๋‹ค์‹œ ์žฌ์‹คํ–‰ํ•˜๊ฑฐ๋‚˜ ์žฌํ‰๊ฐ€ํ•˜๋Š” ์ผ์€ ์˜์กด์„ฑ ๋ฐฐ์—ด์— ์˜ํ•œ ๋ณ€๊ฒฝ์„ ์ œ์™ธํ•˜๊ณ ๋Š” ์—†๋„๋ก ๋งŒ๋“ค์–ด์ค€๋‹ค.
<Button onClick={changeTitleHandler}>Change List Title</Button>
  • ๊ทธ๋ฆฌ๊ณ  Button ์ปดํฌ๋„ŒํŠธ์—์„œ onClick props๋ฅผ ํ†ตํ•ด ํ•ด๋‹น ํ•จ์ˆ˜๋ฅผ ์ „๋‹ฌํ•˜๊ณ  ์žˆ๋‹ค.
export default React.memo(Button);
  • Button ์ปดํฌ๋„ŒํŠธ๋Š” ๋‚ด๋ถ€์ ์œผ๋กœ React.memo๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ useCallback์„ ํ†ตํ•ด ํ•จ์ˆ˜๋ฅผ ์ €์žฅํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ฒ„ํŠผ์˜ props ๋Š” ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์œผ๋ฏ€๋กœ ์ด Button ์ปดํฌ๋„ŒํŠธ๋Š” ๋‹ค์‹œ ๋ Œ๋”๋ง ๋˜์ง€ ์•Š์„ ๊ฒƒ์ด๋‹ค.

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-05-29 แ„‹แ…ฉแ„’แ…ฎ 9 28 29

  • ์ €์žฅํ•˜๊ณ  ํ™”๋ฉด์„ ํ™•์ธํ•ด๋ณด๋ฉด, ๋ฆฌ์ŠคํŠธ๊ฐ€ ๋ Œ๋”๋ง ๋˜์žˆ๋Š” ๊ฑธ ์•Œ ์ˆ˜ ์žˆ๋‹ค. ์˜ค๋ฆ„์ฐจ์ˆœ์œผ๋กœ ์ •๋ ฌ์ด ๋œ ์ฑ„๋กœ ๋ง์ด๋‹ค. ๋ถ„๋ช… ์šฐ๋ฆฌ๊ฐ€ ์ž‘์„ฑํ•œ ์ฝ”๋“œ์— ์ž…๋ ฅํ•œ ๋ฐ์ดํ„ฐ๋Š” ์ •๋ ฌ๋˜์ง€ ์•Š์€ ์ƒํƒœ์˜€๋‹ค. ์ด ๋ง์ธ ์ฆ‰์Šจ, ๋ฆฌ์ŠคํŠธ์—์„œ ์–ด๋–ค ์ข…๋ฅ˜์˜ ์ •๋ ฌ์„ ์‹คํ–‰ํ•˜๊ณ  ์žˆ๋‹ค๋Š” ๋œป์ด๋‹ค.

DemoList.js

const DemoList = (props) => {
  const sortedList = props.items.sort((a, b) => a - b);

  return (
    <div className={classes.list}>
      <h2>{props.title}</h2>
      <ul>
        {sortedList.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
};
  • DemoList ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ™•์ธํ•ด๋ณด๋ฉด, ๊ฐ„๋‹จํ•œ ๋‚ด์žฅ ์ •๋ ฌ ๋ฉ”์†Œ๋“œ(sort())๋กœ ๋ฆฌ์ŠคํŠธ๋ฅผ ์ •๋ฆฌํ•œ ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์— ์ด๋Ÿฐ ๋กœ์ง์ด ์žˆ๋‹ค๋Š” ๋œป์€ ์„ฑ๋Šฅ ๋ฉด์—์„œ ๋ฏผ๊ฐํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๋œป์ด๊ธฐ๋„ ํ•˜๋‹ค. ๋ฌผ๋ก  ์˜ˆ์‹œ ์ฝ”๋“œ์ฒ˜๋Ÿผ ๋ฆฌ์ŠคํŠธ๊ฐ€ ์งง๋‹ค๋ฉด ์ •๋ ฌ ์†๋„ ์—ญ์‹œ ๋น ๋ฅด๊ฒ ์ง€๋งŒ ๋งŒ์•ฝ ๋ฆฌ์ŠคํŠธ๊ฐ€ ๊ธธ๋‹ค๋ฉด ํ˜น์€ ๋‹ค๋ฅธ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋Š” ์ค‘์ด๋ผ๋ฉด ๋ถ„๋ช… ๊ธด ์‹œ๊ฐ„์„ ์†Œ์š”ํ•˜๋Š” ๋กœ์ง์ด ๋  ์ˆ˜๋„ ์žˆ์„ ๊ฒƒ์ด๋‹ค. ์ „์ฒด ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์žฌํ‰๊ฐ€๋  ๋•Œ๋งˆ๋‹ค ์ด๋Ÿฐ ๊ธด ์‹œ๊ฐ„์„ ์†Œ์š”ํ•˜๋Š” ๋กœ์ง์„ ์‹คํ–‰ํ•˜๊ณ  ์‹ถ์ง€ ์•Š๋‹ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ• ๊นŒ? ์ด์ „์˜ ํ•™์Šต์—์„œ ๋ถˆํ•„์š”ํ•œ ์žฌํ‰๊ฐ€ ๊ณผ์ •์„ ํ”ผํ•˜๋Š” ์—ฌ๋Ÿฌ ๋ฐฉ๋ฒ•๋“ค์„ ์•Œ์•„๋ดค๋‹ค. React.memo๊ฐ€ ๋ฐ”๋กœ ๊ทธ ์˜ˆ์‹œ ์ค‘์— ํ•˜๋‚˜์ผ ๊ฒƒ์ด๋‹ค.
const DemoList = (props) => {
  const sortedList = props.items.sort((a, b) => a - b);

  return (
    <div className={classes.list}>
      <h2>{props.title}</h2>
      <ul>
        {sortedList.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default React.memo(DemoList);
  • ๋จผ์ €, ๋ถˆํ•„์š”ํ•œ ์žฌ๋ Œ๋”๋ง์„ ํ”ผํ•˜๊ธฐ ์œ„ํ•ด DemoList ์ปดํฌ๋„ŒํŠธ๋ฅผ React.memo๋กœ ๊ฐ์‹ธ์ฃผ์—ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ๋ถˆํ•„์š”ํ•œ ๋™์ž‘์„ ๋ง‰์„ ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค. DemoList ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์— ์ฝ˜์†” ๋กœ๊ทธ๋กœ "DemoList RUNNING"๋ฅผ ์ถœ๋ ฅํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ๊ฐœ๋ฐœ์ž๋„๊ตฌ์—์„œ ํ•œ ๋ฒˆ ํ™•์ธํ•ด๋ณด์ž.

ezgif com-gif-maker (65)

  • ๋‹น์—ฐํžˆ, ์ดˆ๊ธฐ ํ™”๋ฉด์—์„œ๋Š” ์ด "DemoList RUNNING"๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฆ‰ ๋ฆฌ์ŠคํŠธ๊ฐ€ ์ •๋ ฌ๋˜์—ˆ๋‹ค๋Š” ์˜๋ฏธ์ด๊ธฐ๋„ ํ•˜๋‹ค. ํ•˜์ง€๋งŒ ๊ทธ ๋’ค์—๋Š” ์‹คํ–‰๋˜์ง€ ๋ง์•„์•ผ ํ•œ๋‹ค. ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๊ณ  ํŽ˜์ด์ง€์˜ ์ œ๋ชฉ์ด ๋ฐ”๋€๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด ์ œ๋ชฉ์€ ๋ฆฌ์ŠคํŠธ์˜ ์ผ๋ถ€๋ถ„์ด๋‹ค. ๋”ฐ๋ผ์„œ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด DemoList ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์žฌ์‹คํ–‰๋˜๋Š” ๊ฒƒ์ด๋‹ค. props ์˜ ์ผ๋ถ€๊ฐ€ ๋ฐ”๋€Œ์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ œ๋ชฉ์ด ๋ณ€๊ฒฝ๋œ ๊ฒƒ์ด๋‹ˆ ๋‹น์—ฐํžˆ ์žฌ์‹คํ–‰ ๋˜์–ด์•ผ ๋งˆ๋•…ํ•˜๋‹ค. ์ œ๋ชฉ์€ ์‹ค์ œ ๊ฐ’์˜ ๋ณ€๊ฒฝ์ด ์ผ์–ด๋‚ฌ์œผ๋ฏ€๋กœ React.memo๋Š” ์ •์ƒ ์ž‘๋™ํ•˜๊ณ  ์žˆ๋Š” ๊ฒƒ์ด๋‹ค. ์•ž์„œ props์˜ ์ผ๋ถ€๊ฐ€ ๋ฐ”๋€Œ๊ณ  ์‹ค์ œ ๊ฐ’์˜ ๋ณ€๊ฒฝ์ด ์ผ์–ด๋‚ฌ๊ธฐ ๋•Œ๋ฌธ์— React.memo๋กœ ๊ฐ์‹ธ๋„ ๋‹น์—ฐํžˆ ์žฌ์‹คํ–‰์„ ์ˆ˜ํ–‰ํ•œ๋‹ค.

  • ๋ฌผ๋ก , ํ˜„์žฌ๋Š” ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ(App)๊ฐ€ ์žฌ๋ Œ๋”๋ง ๋˜์—ˆ์œผ๋‹ˆ ์–ธ์ œ๋‚˜ ๋‹ค์‹œ ์‹คํ–‰์ด ๋˜๋Š” ๊ฒƒ์ด๋‹ค.

<DemoList title={listTitle} items={[5, 3, 1, 10, 9]} />
  • App ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์˜ ์ฝ”๋“œ์—์„œ DemoList์— ์ „๋‹ฌํ•˜๋Š” items props์˜ ๋ฐฐ์—ด์ด ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ(App) ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์‹คํ–‰๋  ๋•Œ๋งˆ๋‹ค ์ง€์†์ ์œผ๋กœ ์žฌ์ƒ์„ฑ๋˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๋”ฐ๋ผ์„œ ์ œ๋ชฉ์ด ๋ฐ”๋€Œ์ง€ ์•Š๋”๋ผ๋„ ์ƒ์œ„ ๊ตฌ์„ฑ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์—ฌํƒ€ ์ด์œ ๋กœ ์žฌ์‹คํ–‰๋˜๋ฉด ์ƒˆ๋กœ์šด ๋ฐฐ์—ด([5, 3, 1, 10, 9])์„ ์ƒ์„ฑํ•˜๊ธฐ ๋•Œ๋ฌธ์— DemoList ์ปดํฌ๋„ŒํŠธ๋Š” ๋‹น์—ฐํžˆ ๋‹ค์‹œ ์‹คํ–‰๋œ๋‹ค. ํ•จ์ˆ˜์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ, ๋ฐฐ์—ด ์—ญ์‹œ ๊ฐ์ฒด์ด๊ณ  ์ด ๊ฐ์ฒด๋Š” ์ฐธ์กฐ ๊ฐ’์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

  • ๋”ฐ๋ผ์„œ ์ œ๋ชฉ์ด ๋ฐ”๋€๋‹ค๋Š” ๊ฒƒ์€ DemoList๋ฅผ ๋ฆฌ๋นŒ๋“œ ํ•ด์•ผ ํ•˜๋Š” ํƒ€๋‹นํ•œ ์ด์œ ๊ฐ€ ๋  ๊ฒƒ์ด๋‹ค. ํ•˜์ง€๋งŒ ๊ณผ๊ฑฐ์— ํ–ˆ๋˜ ๋ชจ๋“  ์ž‘์—…๋“ค์„ ๋ฐ˜๋ณตํ•˜๊ณ  ์‹ถ์ง€ ์•Š์„ ๋•Œ๋„ ์žˆ๋Š” ๋ฒ•์ด๋‹ค. ํŠนํžˆ ๋‹ค์‹œ ํ•ด์•ผ ํ•  ์ž‘์—…์ด ์„ฑ๋Šฅ์— ๋ฏผ๊ฐํ•œ ์ž‘์—…์ด๋ผ๋ฉด ๋ง์ด๋‹ค. ๋˜ํ•œ, ์ •๋ ฌ์€ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ˆ˜ํ–‰ ๊ฐ€๋Šฅํ•œ ๋Œ€ํ‘œ์ ์ธ ์„ฑ๋Šฅ ์ง‘์•ฝ์  ์ž‘์—… ์ค‘์— ํ•˜๋‚˜์ด๋‹ค.

์ •๋ ฌ ์ž‘์—…์—์„œ ์„ฑ๋Šฅ ์ตœ์ ํ™” ํ•˜๊ธฐ

  • ์ด์— ๋Œ€ํ•œ ํ•ด๊ฒฐ์ฑ…์ด ์žˆ์„๊นŒ? ์ด์ „์ฒ˜๋Ÿผ useCallback์„ ์‚ฌ์šฉํ•˜์—ฌ ํ•จ์ˆ˜ ๊ฐ์ฒด๋ฅผ ์ €์žฅํ•˜๊ณ  ์ž…๋ ฅ ๊ฐ’์ด ๋ณ€๊ฒฝ๋  ๊ฒฝ์šฐ์—๋งŒ ๋ฆฌ๋นŒ๋“œํ•  ์ˆ˜๋„ ์žˆ๋‹ค. ๋‹ค๋ฅธ ์ข…๋ฅ˜์˜ ๋ฐ์ดํ„ฐ์—๋„ ๋น„์Šทํ•œ ์—ญํ• ์„ ํ•˜๋Š” ํ›…์ด ์žˆ๋‹ค. ๋ฐ”๋กœ useMemo ์ด๋‹ค.

useMemo ๋กœ ์„ฑ๋Šฅ ์ตœ์ ํ™” ํ•˜๊ธฐ

  • useMemo๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์ €์žฅ์„ ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, useCallback์ด ํ•จ์ˆ˜์— ๋Œ€ํ•œ ๊ฒƒ์„ ์ €์žฅํ•˜๋“ฏ์ด ๋ชจ๋“  ์ข…๋ฅ˜์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.
const sortedList = props.items.sort((a, b) => a - b);
  • ์šฐ๋ฆฌ๊ฐ€ ๋ฐ์ดํ„ฐ๋ฅผ ์ •๋ ฌํ–ˆ๋˜ ๋กœ์ง์ด๋‹ค. ์ด ์ •๋ ฌํ•˜๋Š” ๋กœ์ง์„ useMemo๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ €์žฅํ•˜๊ณ , ์ตœ์ ํ™”๋ฅผ ํ•  ๊ฒƒ์ด๋‹ค.
const sortedList = useMemo(() => {
  return props.items.sort((a, b) => a - b);
});
  • ๋จผ์ € useMemo๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ํ•ด๋‹น ์ •๋ ฌ์˜ ๊ฒฐ๊ณผ๋ฅผ ๊ธฐ์–ตํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  useMemo์˜ ์ฒซ ๋ฒˆ์งธ ์ธ์ž์—๋Š” ํ•จ์ˆ˜๊ฐ€ ๋“ค์–ด๊ฐ€์•ผ ํ•œ๋‹ค. ์ด ๋ง์ธ ์ฆ‰์Šจ, useMemo๊ฐ€ ํ•จ์ˆ˜๋ฅผ ๊ธฐ์–ตํ•˜๋„๋ก ํ•˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๋ฉฐ, ๋‹จ์ง€ ํ•จ์ˆ˜๊ฐ€ ์ €์žฅํ•˜๊ณ  ์‹ถ์€ ๊ฒƒ์„ ๋ฐ˜ํ™˜ํ•˜๊ณ  ์ด ๋ฐ˜ํ™˜๋œ ๊ฒฐ๊ณผ ๊ฐ’์„ ์ €์žฅํ•˜๋„๋ก ํ•  ๋ฟ์ด๋‹ค. ์ด ๊ฒฝ์šฐ์—๋Š” ์ •๋ ฌ๋œ ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•  ๊ฒƒ์ด๋‹ค.
const sortedList = useMemo(() => {
  return props.items.sort((a, b) => a - b);
}, []);
  • useCallback ๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ useMemo๋Š” ๋‘ ๋ฒˆ์งธ ์ธ์ž๊ฐ€ ํ•„์š”ํ•œ๋ฐ, ์ด๋Š” ์—ญ์‹œ ์˜์กด์„ฑ ๋ฐฐ์—ด์ด๋‹ค. ์ด ์˜์กด์„ฑ ๋ฐฐ์—ด์„ ํ†ตํ•ด ์ €์žฅ๋œ ๊ฐ’์— ๋ณ€๊ฒฝ ์‚ฌํ•ญ์ด ์ƒ๊ธธ ๋•Œ๋งˆ๋‹ค useMemo์— ์ €์žฅ๋œ ๊ฐ’์„ ์—…๋ฐ์ดํŠธํ•  ๊ฒƒ์ด๋‹ค. ์—ฌ๊ธฐ์„œ๋Š” ๊ฐ’์ด ๋ณ€๊ฒฝ๋˜๊ณ  ์ƒˆ๋กœ์šด ๊ฐ’์ด ์ถ”๊ฐ€๋  ๋•Œ๋งˆ๋‹ค ์—…๋ฐ์ดํŠธ ๋˜๋„๋ก ํ•  ๊ฒƒ์ด๋‹ค.
const sortedList = useMemo(() => {
  return props.items.sort((a, b) => a - b);
}, [props]);
  • ํ•ด๋‹น ์˜์กด์„ฑ ๋ฐฐ์—ด์— props๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ(props์˜ items ์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.) ์ด๋Š” ์ „์ฒด props ๊ฐ์ฒด๊ฐ€ ์—ฌ๊ธฐ์—์„œ์˜ ์˜์กด์„ฑ ๊ฐ์ฒด๊ฐ€ ๋˜๋ฉฐ, ์ด๋Š” ํ•ญ์ƒ ์žฌ๊ณ„์‚ฐ ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์„ ๊ณ ๋ คํ•˜๋Š” ๊ฒƒ์ด ์ข‹์„ ๊ฒƒ์ด๋‹ค.
const { items } = props;

const sortedList = useMemo(() => {
  return items.sort((a, b) => a - b);
}, [items]);
  • ์ด์ „๋ณด๋‹ค ์ข€ ๋” ์šฐ์•„ํ•˜๊ฒŒ ์˜์กด์„ฑ ๋ฐฐ์—ด์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์•ž์„œ ๋ฐฐ์› ๋˜ ๊ฐ์ฒด ๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹น์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค. props์—์„œ ๊ฐ์ฒด ๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹น์„ ์ด์šฉํ•ด์„œ items๋ฅผ ๊บผ๋‚ด์˜ค๊ณ , ์ด๊ฒƒ์„ useMemo์˜ ์˜์กด์„ฑ ๋ฐฐ์—ด์— ์ถ”๊ฐ€ํ•œ๋‹ค. props ๋กœ items๋ฅผ ์ง์ ‘ ๊บผ๋‚ด์™€์„œ ์ •๋ ฌํ•ด์ฃผ์—ˆ๋˜ ๋กœ์ง๋„ ๊ทธ๋ƒฅ items๋กœ ์ˆ˜์ •ํ•ด์ค€๋‹ค. ์ด์ œ useMemo์˜ ๋กœ์ง์€ ์˜์กด์„ฑ ๋ฐฐ์—ด์ธ items์— ๋ณ€๊ฒฝ ์‚ฌํ•ญ์ด ๋ฐœ์ƒํ•  ๋•Œ๋งŒ ๋ฆฌ๋นŒ๋“œ๋ฅผ ์ง„ํ–‰ํ•  ๊ฒƒ์ด๋‹ค.
const sortedList = useMemo(() => {
  console.log("Items sorted");
  return items.sort((a, b) => a - b);
}, [items]);
  • useMemo๊ฐ€ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜ ๋‚ด๋ถ€์— "Items sorted"๋ฅผ ์ถœ๋ ฅํ•˜๋Š” ์ฝ˜์†” ๋กœ๊ทธ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ์ €์žฅํ•œ ๋’ค ๊ฐœ๋ฐœ์ž ๋„๊ตฌ ์ฝ˜์†”์„ ํ™•์ธํ•ด๋ณด์ž.

ezgif com-gif-maker (66)

  • ์ƒˆ๋กœ ๊ณ ์นจ์„ ํ•˜๋ฉด ์ตœ์ดˆ ์‹คํ–‰์ด ๋˜๋ฉด์„œ "Items sorted"๋ฅผ ์ถœ๋ ฅํ•˜๋Š”๋ฐ, ์ œ๋ชฉ์„ ๋ณ€๊ฒฝํ•ด๋„ ์—ฌ์ „ํžˆ "Items sorted"๋ฅผ ์ถœ๋ ฅํ•˜๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค. ์ƒ๊ฐ๋Œ€๋กœ ๊ตฌ๋™๋˜์ง€ ์•Š๊ณ  ์žˆ๋Š” ๊ฒƒ์ด๋‹ค. ์™œ ๊ทธ๋Ÿด๊นŒ?

  • ์ด์ „์—๋„ ๋งํ–ˆ๋“ฏ์ด, useMemo์˜ ์˜์กด์„ฑ ๋ฐฐ์—ด์ธ items๊ฐ€ ๋ฐ”๋€Œ์—ˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

<DemoList title={listTitle} items={[5, 3, 1, 10, 9]} />
  • ์—ฌ๊ธฐ์„œ props ๋กœ ์ „๋‹ฌํ•˜๋Š” items๋Š” App ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์žฌ์‹คํ–‰๋  ๋•Œ๋งˆ๋‹ค ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ์ƒ์„ฑํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ด ๋ฐฐ์—ด ์—ญ์‹œ ์žฌ์ƒ์„ฑ ๋œ๋‹ค. ๊ทธ๋Ÿฌ๋‹ˆ๊นŒ ๊ธฐ์ˆ ์ ์œผ๋กœ๋Š” ๊ฐ™์€ ๊ฐ’์„ ๊ฐ€์ง€๊ณ  ๊ฐ™์€ ์ˆœ์„œ๋กœ ๋œ ๋น„์Šทํ•œ ๋ฐฐ์—ด์ด์ง€๋งŒ, ๋ฉ”๋ชจ๋ฆฌ์ƒ์—์„œ๋Š” ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์ด๊ธฐ ๋•Œ๋ฌธ์— ๋‚ดํฌํ•œ ๊ฐ’์ด ๊ฐ™๋”๋ผ๋„ ๊ธฐ์กด ๋ฐฐ์—ด๊ณผ ๋‹ค๋ฅธ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด๋กœ ์ทจ๊ธ‰ํ•œ๋‹ค. ์ด ๋ฐฐ์—ด์ด ์•ž์„œ ์—ฌ๋Ÿฌ ๋ฒˆ ์–ธ๊ธ‰ํ–ˆ๋˜ ์ฐธ์กฐ ๊ฐ’์ด๋ผ๋Š” ์‚ฌ์‹ค์„ ์žŠ์ง€ ๋ง์•„์•ผ ํ•œ๋‹ค. ๋”ฐ๋ผ์„œ ์ด์ œ ๋ถˆํ•„์š”ํ•˜๊ฒŒ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ์„ ๋ง‰๊ธฐ ์œ„ํ•ด์„œ ์ด ๋ฐฐ์—ด์— useMemo๋ฅผ ์‚ฌ์šฉํ•  ๊ฒƒ์ด๋‹ค.

useMemo ๋กœ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์˜ ์ƒ์„ฑ์„ ๋ง‰๊ธฐ

<DemoList title={listTitle} items={useMemo(() => [5, 3, 1, 10, 9], [])} />
  • ํ•ด๋‹น ๋ฐฐ์—ด์ด ์žˆ๋Š” ์œ„์น˜์— useMemo ํ•จ์ˆ˜๋กœ ๋ฐฐ์—ด์„ ๋ž˜ํ•‘ํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋นˆ ์˜์กด์„ฑ ๋ฐฐ์—ด์„ ์ถ”๊ฐ€ํ•œ๋‹ค. ์ด ๋นˆ ์˜์กด์„ฑ ๋ฐฐ์—ด์€ ๊ฐ’์— ๋ณ€ํ•จ์ด ์—†๋‹ค. ์™ธ๋ถ€ ์˜์กด์„ฑ์ด ์—†๊ณ  ํ•˜๋“œ ์ฝ”๋”ฉ๋˜์–ด ์žˆ๋‹ค. ๋”ฐ๋ผ์„œ useMemo๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด๋‹ค.
const listItems = useMemo(() => [5, 3, 1, 10, 9], []);
  • useMemo ํ•จ์ˆ˜๋กœ ๋ž˜ํ•‘ํ•œ ๋ฐฐ์—ด ๊ฐ’์„ ๋ณ€์ˆ˜ listItems์— ์ €์žฅํ•˜๊ณ ,
<DemoList title={listTitle} items={listItems} />
  • ์•„๊นŒ ๋ฐฐ์—ด์ด ์žˆ๋˜ ์œ„์น˜์— ๊ทธ ๋ณ€์ˆ˜๋ฅผ ํฌ์ธํ„ฐ ์‹œํ‚จ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•จ์œผ๋กœ์จ ๋ถˆํ•„์š”ํ•œ ์žฌ์ •๋ ฌ์„ ๋ง‰์„ ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค.

ezgif com-gif-maker (67)

  • ์ €์žฅํ•˜๊ณ  ํ™•์ธํ•ด๋ณด์ž. ์ตœ์ดˆ ์‹คํ–‰์—๋Š” ์ถœ๋ ฅ๋˜๋˜ "Items sorted"์ด ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ๋”์ด์ƒ ์ถœ๋ ฅ๋˜์ง€ ์•Š๋Š” ๊ฑธ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. useMemo ๋•๋ถ„์— ์ „๋‹ฌ๋œ ๋ฐฐ์—ด์ด ์žฌ์ •๋ ฌ ๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

์ •๋ฆฌ

  • useMemo๋Š” useCallback์— ๋น„ํ•ด ์‚ฌ์šฉ๋นˆ๋„๊ฐ€ ๋‚ฎ์„ ๊ฒƒ์ด๋‹ค. ๋ฐ์ดํ„ฐ๋ฅผ ๊ธฐ์–ตํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ํ•จ์ˆ˜๋ฅผ ๊ธฐ์–ตํ•˜๋Š” ๊ฒƒ์ด ํ›จ์”ฌ ๋” ๋„์›€์ด ๋˜๋ฉฐ, ๋นˆ๋„์ˆ˜๋„ ๋†’๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๋ฌผ๋ก  ๋ฐ์ดํ„ฐ ์žฌ๊ณ„์‚ฐ๊ณผ ๊ฐ™์€ ์„ฑ๋Šฅ ์ง‘์•ฝ์  ์ž‘์—… ๋•Œ๋ฌธ์— ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•ด์•ผ ํ•  ํ•„์š”๋„ ์žˆ์œผ๋‚˜, ์ด๋Ÿฐ ๊ฒฝ์šฐ๊ฐ€ ์•„๋‹ˆ๋ผ๋ฉด ์‚ฌ์šฉํ•  ์ผ์€ ์—†์„ ๊ฒƒ์ด๋‹ค.
  • ์žŠ์ง€ ๋ง์•„์•ผ ํ•  ์‚ฌ์‹ค์€, useMemo๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•œ๋‹ค๋Š” ๊ฒƒ์€ ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋Š” ๊ฒƒ์ด๋ฉฐ ์ด๋Ÿฐ useMemo๋ฅผ ํ†ตํ•œ ํ•จ์ˆ˜ ์ €์žฅ ์—ญ์‹œ ์ผ์ • ์„ฑ๋Šฅ์„ ์‚ฌ์šฉํ•œ๋‹ค๋Š” ๋œป์ด๊ธฐ๋„ ํ•˜๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ๋”ฐ๋ผ์„œ useMemo๋Š” ์—ฌ๋Ÿฌ ์„ฑ๋Šฅ ๋ฉด์—์„œ ๊ณ ๋ คํ•˜์—ฌ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ๋‹ค๋งŒ ์ง€๊ธˆ๊ณผ ๊ฐ™์ด ๋ญ”๊ฐ€๋ฅผ ์ •๋ ฌํ•˜๋Š” ๊ฒฝ์šฐ๋ผ๋ฉด ์ดํ›„์˜ ์ปดํฌ๋„ŒํŠธ ์—…๋ฐ์ดํŠธ์—์„œ ๋ถˆํ•„์š”ํ•œ ์ •๋ ฌ์„ ๋ง‰์„ ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ useMemo๋ฅผ ๊ณ ๋ คํ•ด๋ณด๋Š” ๊ฒƒ๋„ ๊ดœ์ฐฎ์„ ๊ฒƒ์ด๋‹ค.

โœฆ ์ถœ์ฒ˜


๐Ÿšจ ํ•ด๋‹น ํฌ์ŠคํŒ…์€ Udemy์˜ โŒœReact ์™„๋ฒฝ ๊ฐ€์ด๋“œโŒŸ ๊ฐ•์˜๋ฅผ ๋ฒ ์ด์Šค๋กœ ํ•œ ๊ธฐ๋ก์ž…๋‹ˆ๋‹ค.
โœ๐Ÿป ๊ฐ•์˜ git repo ๋ฐ”๋กœ๊ฐ€๊ธฐ

profile
์ผ๋‹จ ๊ณต๋ถ€๊ฐ€ '์ ์„ฑ'์— ๋งž๋Š” ๊ฐœ๋ฐœ์ž. ๊ทผ์„ฑ์žˆ์Šต๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€