React_memo

App

import React from "react"

import { useState} from "react"

import Counter from "./components/Counter"

import Counter2 from "./components/Counter2"

import Counter3 from "./components/Counter3"

import Counter4 from "./components/Counter4"

export default function App(){

  const [num, setNum] = useState(0);

  function handleEvent(){

    setNum(num + 1);

  }

  return(

    <>

    <h1>App</h1>

    <h2>{num}</h2>

    {/* Counter와 Counter2는 부모인 App이 재랜더링되면 자식도 항상 재랜더링됨 */}

    <Counter></Counter>

    <Counter2 initialCount={num}></Counter2>

    <Counter3 initialCount={10}></Counter3>

    {/* 부모인 App이 변경되어도 동일한 props를 전달하면 memo된 자식이 재랜더링 안됨 */}

    <Counter4 initialCount={10}></Counter4>

    <button onClick={handleEvent}>+</button>

    </>

  )

}

 

Count

export default function Counter({ initialCount = 0}){

   

    console.log("Counter")

    return(

        <>

        count값: {initialCount}

        <br></br>

        </>

    )

}

 

Count2

export default function Counter2({ initialCount = 0}){

   

    console.log("Counter2")

    return(

        <>

        count2값: {initialCount}

        <br></br>

        </>

    )

}

 

Count3

export default function Counter3({ initialCount }){

   

    console.log("Counter3")

    return(

        <>

        count3값: {initialCount}

        <br></br>

        </>

    )

}

Count4

import { memo } from "react"

//initialCount가 항상 고정된 값이기 때문에 재랜더링 할 필요없음

const Counter4 = memo(

    ({initialCount = 0}) => {

        console.log("Counter4")

        return(

            <>

                count4 값: {initialCount}

                <br></br>

            </>

        )

   

    }

)

export default Counter4;