[TIL] Day64 #Virtual DOM #UseMemo #UseCallback

Beanxxยท2022๋…„ 7์›” 27์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
64/120
post-thumbnail

2022.07.27(Wed)

[TIL] Day64
[SEB FE] Day65

๐Ÿงฉย  DOM

: Document Object Model(๋ฌธ์„œ ๊ฐ์ฒด ๋ชจ๋ธ). ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํŠธ๋ฆฌ ๊ตฌ์กฐ๋กœ ๋งŒ๋“  ๋ชจ๋ธ

โœจย ๋ฌธ์„œ ๊ฐ์ฒด๋ž€?
: JS์™€ ๊ฐ™์€ ์Šคํฌ๋ฆฝํŒ… ์–ธ์–ด๊ฐ€ ํƒœ๊ทธ๋“ค์— ์ ‘๊ทผํ•˜๊ณ  ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํƒœ๊ทธ๋“ค์„ ํŠธ๋ฆฌ ๊ตฌ์กฐ๋กœ ๊ฐ์ฒดํ™” ์‹œํ‚จ ๊ฒƒ์„ ์˜๋ฏธ!

๐ŸŒตย ํŠธ๋ฆฌ๋Š” ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ๋” ํšจ๊ณผ์ ์œผ๋กœ ํƒ์ƒ‰ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ โ‡’ ๋น ๋ฅธ ์ž๋ฃŒ ํƒ์ƒ‰ ์„ฑ๋Šฅ์ด ์žฅ์ ์ธ ์ž๋ฃŒ๊ตฌ์กฐ

๐Ÿ‘‰ย ํŠธ๋ฆฌ ๊ตฌ์กฐ๋กœ ๋œ DOM์€ JS์™€ ๊ฐ™์€ ์Šคํฌ๋ฆฝํŒ… ์–ธ์–ด๊ฐ€ ์ ‘๊ทผํ•˜๊ณ  ํƒ์ƒ‰ํ•˜๋Š” ์†๋„๊ฐ€ ๋น ๋ฅด๋ฏ€๋กœ ๋ณ€๊ฒฝ / ์—…๋ฐ์ดํŠธ ์†๋„ ๋˜ํ•œ ๋น ๋ฆ„

โœจย DOM์ด ๋ณ€๊ฒฝ & ์—…๋ฐ์ดํŠธ๋œ๋‹ค = ๋ธŒ๋ผ์šฐ์ €์˜ ๋ Œ๋”๋ง ์—”์ง„์ด Reflowํ•œ๋‹ค!

๐Ÿ‘‰ย JS๋กœ ์กฐ์ž‘ํ•˜๋Š” DOM์˜ ์š”์†Œ๊ฐ€ ๋งŽ์„์ˆ˜๋ก ๋ชจ๋“  DOM ์—…๋ฐ์ดํŠธ์— ๋Œ€ํ•ด ๋ฆฌํ”Œ๋กœ์šฐ๋ฅผ ํ•ด์•ผ ํ•˜๋ฏ€๋กœ DOM ์—…๋ฐ์ดํŠธ์— ๋Œ€ํ•œ ๋น„์šฉ์ด ๋งŽ์ด ๋“ค๊ฒŒ ๋จ

โ˜‘๏ธย Virtual DOM

๐Ÿซฅ like Real DOM์˜ ๊ฐ€๋ฒผ์šด ์‚ฌ๋ณธ ๋Š๋‚Œ ?

  • ์ถ”์ƒํ™”๋œ JS ๊ฐ์ฒด ํ˜•ํƒœ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Œ

  • ์‹ค์ œ DOM๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ HTML ๋ฌธ์„œ ๊ฐ์ฒด ๊ธฐ๋ฐ˜!

  • ์‹ค์ œ DOM ๊ฐ์ฒด์— ์ ‘๊ทผํ•˜์—ฌ ์กฐ์ž‘ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ Virtual DOM์— ์ ‘๊ทผํ•˜์—ฌ ๋ฐ”๋€ ๋ถ€๋ถ„๋งŒ ์ ์šฉ!

    โœ‹ย ์‹ค์ œ DOM ๊ฐ์ฒด์ฒ˜๋Ÿผ ํ™”๋ฉด ๋‚ด์šฉ์„ ์ง์ ‘ ๋ณ€๊ฒฝ โŒย โ†’ ํ›จ์”ฌ ์†๋„ Fast!

  • ๊ฐ€์ƒ UI ์š”์†Œ๋ฅผ ๋ฉ”๋ชจ๋ฆฌ์— ์œ ์ง€ โ†’ ์ด๋ฅผ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ†ตํ•ด ์‹ค์ œ DOM๊ณผ ๋™๊ธฐํ™”์‹œํ‚ด
  • Virtual DOM Tree์˜ ์ด์ „ & ํ˜„์žฌ ๋ฒ„์ „ ๊ฐ„์˜ ์ฐจ์ด ๊ณ„์‚ฐ โ†’ ๋ถ€๋ถ„์ ์œผ๋กœ ๋ฆฌ๋ Œ๋”๋ง
    โ†’ ์—…๋ฐ์ดํŠธ๋œ ํŠธ๋ฆฌ๋Š” ์‹ค์ œ DOM์œผ๋กœ ํ•œ๋ฒˆ์— ์—…๋ฐ์ดํŠธ!

โ˜‘๏ธย React Diffing Algorithm (๋น„๊ต ์•Œ๊ณ ๋ฆฌ์ฆ˜)

โœจย ๊ฐ€์ •

  1. ์„œ๋กœ ๋‹ค๋ฅธ ๋‘ ์š”์†Œ๋Š” ๋‹ค๋ฅธ ํŠธ๋ฆฌ๋ฅผ ๊ตฌ์ถ•ํ•  ๊ฒƒ
  2. key ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์—ฌ๋Ÿฌ๋ฒˆ ๋ Œ๋”๋ง์„ ๊ฑฐ์ณ๋„ ๋ณ€๊ฒฝ๋˜๋ฉด ์•ˆ ๋˜๋Š” ์ž์‹ ์š”์†Œ๊ฐ€ ๋ฌด์—‡์ธ์ง€ ์•Œ์•„๋‚ผ ์ˆ˜ ์žˆ์Œ
  • React๋Š” ๊ธฐ์กด๊ณผ ์ƒˆ๋กญ๊ฒŒ ๋ณ€๊ฒฝ๋œ Virtual DOM Tree๋ฅผ ๋น„๊ตํ•  ๋•Œ, ํŠธ๋ฆฌ์˜ Level ์ˆœ์„œ๋Œ€๋กœ ์ˆœํšŒํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ํƒ์ƒ‰
    ๐Ÿ‘‰ย ๊ฐ™์€ Level(์œ„์น˜)๋ผ๋ฆฌ ๋น„๊ต! (BFS; ๋„ˆ๋น„์šฐ์„ ํƒ์ƒ‰)
    โ†’ ๊ฐ™์€ Level์— ์œ„์น˜ํ•œ ๋…ธ๋“œ ํŒŒ์•… ํ›„, ๋‹ค์Œ ์ž์‹ ์„ธ๋Œ€์˜ ๋…ธ๋“œ๋ฅผ ์ˆœ์ฐจ์ ์œผ๋กœ ํŒŒ์•…!

โœจย ๋‹ค๋ฅธ ํƒ€์ž…์˜ DOM Element์ธ ๊ฒฝ์šฐ

  • DOM Tree๋Š” ๋ถ€๋ชจ์™€ ์ž์‹ ๊ฐ„์˜ ํƒœ๊ทธ๊ฐ€ ํ•œ์ •์ ์ด๋ผ ๋ถ€๋ชจ ํƒœ๊ทธ๊ฐ€ ๋‹ฌ๋ผ์ง„๋‹ค๋ฉด
    React๋Š” ์ด์ „ ํŠธ๋ฆฌ๋ฅผ ๋ฒ„๋ฆฌ๊ณ , ์ƒˆ๋กœ์šด ํŠธ๋ฆฌ๋ฅผ ๊ตฌ์ถ•! โ†’ ์ด์ „ DOM ๋…ธ๋“œ๋“ค์€ ์ „๋ถ€ ํŒŒ๊ดด
  • New ์ปดํฌ๋„ŒํŠธ ์‹คํ–‰ โ†’ ๊ธฐ์กด ์ปดํฌ๋„ŒํŠธ ์™„์ „ํžˆ ํ•ด์ œ(Unmount) โ†’ ๊ธฐ์กด state ํŒŒ๊ดด

โœจย  ๊ฐ™์€ ํƒ€์ž…์˜ DOM Element์ธ ๊ฒฝ์šฐ

  • ํƒ€์ž…์ด ๋ฐ”๋€Œ์ง€ ์•Š์œผ๋ฉด React๋Š” ์ตœ๋Œ€ํ•œ ๋ Œ๋”๋ง ํ•˜์ง€ ์•Š๋Š” ๋ฐฉํ–ฅ์œผ๋กœ ์ตœ์†Œํ•œ์˜ ๋ณ€๊ฒฝ ์‚ฌํ•ญ๋งŒ ์—…๋ฐ์ดํŠธ
  • ์—…๋ฐ์ดํŠธ ํ•  ๋‚ด์šฉ์ด ์ƒ๊ธฐ๋ฉด virtual DOM ๋‚ด๋ถ€ ํ”„๋กœํผํ‹ฐ๋งŒ ์ˆ˜์ • ํ›„,
    ๋ชจ๋“  ๋…ธ๋“œ์˜ ์—…๋ฐ์ดํŠธ๊ฐ€ ๋๋‚˜๋ฉด ๋‹จ ํ•œ๋ฒˆ๋งŒ! ์‹ค์ œ DOM์œผ๋กœ์˜ ๋ Œ๋”๋ง ์‹œ๋„
  • ํ—ค๋‹น DOM ๋…ธ๋“œ ์ฒ˜๋ฆฌ ํ›„, ์ด์–ด์„œ ํ•ด๋‹น ๋…ธ๋“œ์˜ ์ž์‹๋“ค์„ ์ˆœ์ฐจ์ ์œผ๋กœ ์ˆœํšŒํ•˜๋ฉด์„œ ์ฐจ์ด๊ฐ€ ๋ฐœ๊ฒฌ๋  ๋•Œ๋งˆ๋‹ค ๋ณ€๊ฒฝ
    โ‡’ ์žฌ๊ท€์ ์œผ๋กœ ์ฒ˜๋ฆฌ!!

๐Ÿ‘ฟย React๋Š” ์œ„ โ†’ ์•„๋ž˜๋กœ ์ˆœ์ฐจ์ ์œผ๋กœ ๋น„๊ตํ•˜๋ฏ€๋กœ, List ์ฒ˜์Œ ๋ถ€๋ถ„์— ์—˜๋ฆฌ๋จผํŠธ ์‚ฝ์ž…์‹œ ์ด์ „์˜ ์ฝ”๋“œ์— ๋น„ํ•ด ํ›จ์”ฌ ๋‚˜์œ ์„ฑ๋Šฅ์„ ๋ƒ„

<ul>
  <li>first</li>
  <li>second</li>
</ul>

// ์ž์‹ ์—˜๋ฆฌ๋จผํŠธ์˜ ๋์— ์ƒˆ๋กœ์šด ์ž์‹ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ถ”๊ฐ€ -> Good
<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

// ์ž์‹ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ฒ˜์Œ์— ์ถ”๊ฐ€ -> Bad
// ์ž์‹ ๋…ธ๋“œ๊ฐ€ ์„œ๋กœ ๋‹ค๋ฅด๋‹ค๊ณ  ์ธ์ง€ -> ๋ฆฌ์ŠคํŠธ ์ „์ฒด๊ฐ€ ๋ฐ”๋€Œ์—ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•จ
// => ์ƒˆ๋กญ๊ฒŒ ๋ Œ๋”๋งํ•ด๋ฒ„๋ฆผ -> ๋น„ํšจ์œจ์ ์ธ ๋™์ž‘ ๋ฐฉ์‹!
<ul>
	<li>third</li>
  <li>first</li>
  <li>second</li>
</ul>

๐Ÿ‘‰ย ์œ„์˜ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด key ์†์„ฑ ์ง€์› โ†’ ํšจ์œจ์ ์œผ๋กœ ๊ฐ€์ƒ DOM ์กฐ์ž‘ ๊ฐ€๋Šฅ

๐Ÿ“Žย Key

  • ์ž์‹ ๋…ธ๋“œ๋“ค์ด key๋ฅผ ๊ฐ–๊ณ  ์žˆ๋‹ค๋ฉด, React๋Š” ๊ทธ key๋ฅผ ์ด์šฉํ•ด ๊ธฐ์กด & ์ƒˆ๋กœ์šด ํŠธ๋ฆฌ์˜ ์ž์‹์ด ์ผ์น˜ํ•˜๋Š”์ง€ ํ™•์ธ ๊ฐ€๋Šฅ
    • key ์†์„ฑ์—๋Š” ์œ ์ผํ•œ ๊ฐ’(ex. Id) ๋ถ€์—ฌ ํ•ด์ฃผ๊ธฐ!
    • ์ „์—ญ์ ์œผ๋กœ ์œ ์ผํ•  ํ•„์š”๋Š” โŒ, ํ˜•์ œ element ์‚ฌ์ด์—์„œ๋งŒ ์œ ์ผํ•˜๋ฉด ๋จ!

๐Ÿซงย ๋ณต์žก๋„๊ฐ€ ์ปค์งˆ์ˆ˜๋กโฌ†๏ธ ์‹œ๊ฐ„์ด ์˜ค๋ž˜ ๊ฑธ๋ฆผ
๐Ÿซง ๋„ˆ๋น„์šฐ์„ ํƒ์ƒ‰(BFS): ๊ฐ€๊นŒ์šด ์ง€์ ๋ถ€ํ„ฐ ํƒ์ƒ‰ํ•˜๋ฉฐ, ๋ฉ€๋ฆฌ ์žˆ๋Š” ์ง€์ ์€ ๋‚˜์ค‘์— ํƒ์ƒ‰


โ˜‘๏ธย React Hooks

๐Ÿ“Žย Class Component

ย ๐Ÿ‘Žย ์ปดํฌ๋„ŒํŠธ ์‚ฌ์ด์—์„œ ์ƒํƒœ ๋กœ์ง ์žฌ์‚ฌ์šฉ ์–ด๋ ต

class Counter extends Component {
    constructor(props) {
        super(props);
        this.state = {
            counter: 0
        }
        this.handleIncrease = this.handleIncrease.bind(this);
    }

    handleIncrease = () => {
        this.setState({
            counter: this.state.counter + 1
        })
    }

    render(){
       return (
            <div>
                <p>You clicked {this.state.counter} times</p>
                <button onClick={this.handleIncrease}>
                    Click me
                </button>
            </div>
       ) 
    }
}

๐Ÿ“Žย Function Component

ย ๐Ÿ‘ย ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ์— ๋น„ํ•ด ํ›จ์”ฌ ๋” ์ง๊ด€์ ์ด๊ณ , ๋ณด๊ธฐ ์‰ฌ์›€

// useState() Hook์„ ํ˜ธ์ถœํ•ด ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ(function component) ์•ˆ์— state๋ฅผ ์ถ”๊ฐ€ํ•œ ํ˜•ํƒœ
// ์ด state๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง ๋˜์–ด๋„ ๊ทธ๋Œ€๋กœ ์œ ์ง€๋จ

function Counter () {
    const [counter, setCounter] = useState(0); // ์ปดํฌ๋„ŒํŠธ ๋ฆฌ๋ Œ๋”๋ง๋˜์–ด๋„ state๋Š” ๊ทธ๋Œ€๋กœ ์œ ์ง€

    const handleIncrease = () => {
        setCounter(counter + 1)
    }

    return (
        <div>
            <p>You clicked {counter} times</p>
            <button onClick={handleIncrease}>
                Click me
            </button>
        </div>
    )
}

๐Ÿ“Žย Hook

: ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ ์ƒํƒœ๊ฐ’ ๋“ฑ์˜ ์—ฌ๋Ÿฌ ๊ธฐ๋Šฅ ์‚ฌ์šฉ์„ ํŽธ๋ฆฌํ•˜๊ฒŒ ํ•ด์ฃผ๋Š” ๋ฉ”์†Œ๋“œ (ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ์—์„  ๋™์ž‘ โŒ)

โœจย Hook ์‚ฌ์šฉ ๊ทœ์น™

  1. React ํ•จ์ˆ˜ ์ตœ์ƒ์œ„์—์„œ๋งŒ ํ˜ธ์ถœํ•ด์•ผ ํ•จ
  2. ์˜ค์ง React ํ•จ์ˆ˜ ๋‚ด์—์„œ๋งŒ ์‚ฌ์šฉ๋˜์–ด์•ผ ํ•จ
    • ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ๋‚˜ Custom Hook์ด ์•„๋‹Œ ์ผ๋ฐ˜ JS ํ•จ์ˆ˜ ์•ˆ์—์„œ ํ˜ธ์ถœํ•ด์„  โŒ

โœจย ์ปดํฌ๋„ŒํŠธ๋Š” ๋ณดํ†ต ์ƒํƒœ๊ฐ€ ๋ณ€๊ฒฝ๋˜๊ฑฐ๋‚˜ ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ Œ๋”๋ง์ด ๋  ๋•Œ๋งˆ๋‹ค ๋ฆฌ๋ Œ๋”๋งํ•˜๋Š” ๊ตฌ์กฐ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์Œ

โœจย ๋ Œ๋”๋ง ์ตœ์ ํ™”๋ฅผ ์œ„ํ•œ Hook: useCallback, useMemo

โ˜‘๏ธย UseMemo

: ํŠน์ • ๊ฐ’(value)๋ฅผ ์žฌ์‚ฌ์šฉํ•˜๊ณ ์ž ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” Hook

import { useMemo } from "react";

function Calculator({value}){
	// const result = calculate(value);
  const result = useMemo(() => calculate(value), [value]);

	return (
		<>
			<div>
				{result}
			</div>
		</>
	)
}
// add.js
export const add = (num1, num2) => {
  console.log("์ˆซ์ž๊ฐ€ ๋“ค์–ด์˜ต๋‹ˆ๋‹ค.");
  return Number(num1) + Number(num2);
};

// -------------------------------------------

// App.js
const [name, setName] = useState("");
const [val1, setVal1] = useState(0);
const [val2, setVal2] = useState(0);

// name์ด ๋ณ€๊ฒฝ๋  ๋•Œ๋„ add() ํ˜ธ์ถœ
const answer = add(val1, val2);

// useMemo()๋ฅผ ์ด์šฉํ•˜์—ฌ val1, val2 ๊ฐ’์ด ๋ฐ”๋€”๋•Œ๋งŒ add()๊ฐ€ ํ˜ธ์ถœ๋˜๋„๋ก ๋ณ€๊ฒฝ!
const answer = useMemo(() => add(val1, val2), [val1, val2]);
  • ์ด์ „ ๋ Œ๋”๋ง๊ณผ ์ƒˆ๋กœ์šด ๋ Œ๋”๋ง์„ ๋น„๊ตํ•ด value๊ฐ’์ด ๊ฐ™์€ ๊ฒฝ์šฐ์—” ์ด์ „ value๊ฐ’์„ ๊ทธ๋Œ€๋กœ ์žฌํ™œ์šฉ
    โ‡’ Memoization ๊ฐœ๋…๊ณผ ๊ด€๊ณ„!
    ๐Ÿ‘‰ย ๋ณต์žกํ•œ ์—ฐ์‚ฐ ์ค‘๋ณต์„ ํ”ผํ•˜๊ณ , React ์•ฑ์˜ ์„ฑ๋Šฅ์„ ์ตœ์ ํ™”์‹œํ‚ด

๐Ÿ“Žย Memoization

: ๊ธฐ์กด์— ์ˆ˜ํ–‰ํ•œ ์—ฐ์‚ฐ์˜ ๊ฒฐ๊ณผ๊ฐ’์„ ๋ฉ”๋ชจ๋ฆฌ์— ์ €์žฅํ•ด๋‘๊ณ , ๋™์ผํ•œ ์ž…๋ ฅ์ด ๋“ค์–ด์˜ค๋ฉด ์žฌํ™œ์šฉํ•˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ธฐ๋ฒ•
๐Ÿ‘‰ย ์ค‘๋ณต ์—ฐ์‚ฐ์„ ํ•  ํ•„์š”๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์•ฑ ์„ฑ๋Šฅ ์ตœ์ ํ™”!


โ˜‘๏ธย UseCallback

: Memoization ๊ธฐ๋ฒ•์„ ์ด์šฉํ•œ Hook์œผ๋กœ, ํ•จ์ˆ˜์˜ ์žฌ์‚ฌ์šฉ์„ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” Hook

  • ํ•จ์ˆ˜๊ฐ€ ์˜์กดํ•˜๋Š” ๊ฐ’๋“ค์ด ๋ฐ”๋€Œ์ง€ ์•Š๋Š” ํ•œ ๊ธฐ์กด ํ•จ์ˆ˜๋ฅผ ๊ณ„์†ํ•ด์„œ ๋ฐ˜ํ™˜
import React, { useCallback } from "react";

function Calculator({x, y}){
	// const add = () => x + y;
	const add = useCallback(() => x + y, [x, y]);

	return (
		<>
			<div>
				{add()}
			</div>
		</>
	)
}
// List.js
function List({ getItems }) {
  const [items, setItems] = useState([]);

  useEffect(() => {
    console.log("์•„์ดํ…œ์„ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.");
    setItems(getItems());
  }, [getItems]);

  return (
    <div>
      {items.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
}

// -------------------------------------------

// App.js
const [input, setInput] = useState(1);
const [light, setLight] = useState(true);

// input์— ์ˆซ์ž ๋ณ€๊ฒฝ ์™ธ์—๋„ ๋‹คํฌ๋ชจ๋“œ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ์—๋„ ๋™์ž‘
const getItems = () => {
	return [input + 10, input + 100];
};

// useCallback()๋ฅผ ์ด์šฉํ•˜์—ฌ input ๊ฐ’์ด ๋ฐ”๋€”๋•Œ๋งŒ setItems() ํ˜ธ์ถœ๋˜๋„๋ก ๋ณ€๊ฒฝ!
const getItems = useCallback(() => [input + 10, input + 100], [input]);

๐Ÿ‘ย ์ž์‹ ์ปดํฌ๋„ŒํŠธ์˜ props๋กœ ํ•จ์ˆ˜๋ฅผ ์ „๋‹ฌํ•ด์ค„ ๋•Œ useCallback์„ ์‚ฌ์šฉํ•˜๊ธฐ ์ข‹์Œ

๐Ÿ“Žย ์ฐธ์กฐ ๋™๋“ฑ์„ฑ

โœจย useCallback์€ ์ฐธ์กฐ ๋™๋“ฑ์„ฑ์— ์˜์กด

  • ๊ฐ์ฒด๋Š” ๋ฉ”๋ชจ๋ฆฌ์— ๊ฐ’์ด ์•„๋‹Œ ๊ฐ’์˜ ์ฃผ์†Œ๋ฅผ ์ €์žฅํ•˜๋ฏ€๋กœ, ๋ฐ˜ํ™˜ ๊ฐ’์ด ๊ฐ™์•„๋„ ์ผ์น˜์—ฐ์‚ฐ์ž ๋น„๊ต์‹œ false ์ถœ๋ ฅ
  • 2๊ฐœ์˜ ํ•จ์ˆ˜๋Š” ๋™์ผ ์ฝ”๋“œ๋ฅผ ๊ณต์œ ํ•˜๋”๋ผ๋„ ๋ฉ”๋ชจ๋ฆฌ ์ฃผ์†Œ๊ฐ€ ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์—, ์ฐธ์กฐ ๋น„๊ต ์‹œ ๋‹ค๋ฅธ ํ•จ์ˆ˜๋กœ ๊ฐ„์ฃผ!

  • React๋Š” ๋ฆฌ๋ Œ๋”๋ง ์‹œ ํ•จ์ˆ˜๋ฅผ ์ƒˆ๋กœ ๋งŒ๋“ค์–ด์„œ ํ˜ธ์ถœ
  • ์ƒˆ๋กœ ๋งŒ๋“ค์–ด ํ˜ธ์ถœ๋œ ํ•จ์ˆ˜๋Š” ๊ธฐ์กด ํ•จ์ˆ˜์™€ ๊ฐ™์€ ํ•จ์ˆ˜ โŒ
  • useCallback์„ ์ด์šฉํ•ด ํ•จ์ˆ˜ ์ž์ฒด๋ฅผ ์ €์žฅํ•œ ํ›„, ๋‹ค์‹œ ์‚ฌ์šฉ
    = ํ•จ์ˆ˜์˜ ๋ฉ”๋ชจ๋ฆฌ ์ฃผ์†Œ ๊ฐ’์„ ์ €์žฅํ–ˆ๋‹ค๊ฐ€ ๋‹ค์‹œ ์‚ฌ์šฉ
    ๐Ÿ‘‰ย React ์ปดํฌ๋„ŒํŠธ ํ•จ์ˆ˜ ๋‚ด์—์„œ ๋‹ค๋ฅธ ํ•จ์ˆ˜์˜ ์ธ์ž๋กœ ๋„˜๊ธฐ๊ฑฐ๋‚˜ ์ž์‹ ์ปดํฌ๋„ŒํŠธ์˜ prop์œผ๋กœ ๋„˜๊ธธ ๋•Œ, ์˜ˆ์ƒ์น˜ ๋ชปํ•œ ์„ฑ๋Šฅ ๋ฌธ์ œ๋ฅผ ๋ง‰์„ ์ˆ˜ ์žˆ์Œ
profile
FE developer

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