React 렌더링 - 부모 컴포넌트와, 자식 컴포넌트

React에서 부모 컴포넌트가 재렌더링 되면 자식 요소도 다시 렌더링 된다 

백문이 불여일견이라는 말이 있지 않나 한번 확인해보자 부모 컴포넌트가 <Child1> <Child2> 를 자식 컴포넌트로 갖는다

 

import { Child1, Child2} from "./Child"
import { useState } from "react"
const Parent = () =>{
    const [count, setCount] = useState(0)
    const upCount =()=>{
        setCount((prev)=>prev+1)
    }
    const downCount=()=>{
        setCount((prev)=>prev-1)
    }
    return (
        <div>
            <p>count:{count}</p>
            <button onClick={upCount}>+1</button>
            <button onClick={downCount}>-1</button>
            <Child1/>
            <Child2/>
        </div>
    )
}

export default Parent

 

 

 

Child1, Child2 두 자식컴포넌트는 렌더링 될때마다 console이 찍히도록했다. 

 

import { useEffect } from "react"

export const Child1 = () =>{
    useEffect(()=>{
        console.log('<Child1/> render');   
    })
    return (
        <div>자식1</div>
    )
}

export const Child2 = () =>{
    useEffect(()=>{
        console.log('<Child2/> render');   
    })
    return (
        <div>자식2</div>
    )
}

 

부모 컴포넌트의 hook을 통해 setCount를 호출 할때마다 자식 컴포넌트에 전달한 prop도 없는데 리 렌더링 된다! ( console에 찍히는 값 확인 완료 ) 

 

React에서 부모 컴포넌트가  렌더링 되도 자식 컴포넌트가 렌더링 되지 않게 하려면?

불필요한 제렌더링을 방지하기 위해 리액트에 memo라는 것이 있다.  

( 공식문서: https://react.dev/reference/react/memo ) 아래와 같이 memo로 감싸면 부모요소에서 전달받은 props가 변하지 않는 이상 자식 컴포넌트 요소는 리렌더링 되지 않아 불필요한 리렌더링을 줄일 수 있다

 

import { useEffect, memo } from "react"

export  const Child1 = memo(() =>{
    useEffect(()=>{
        console.log('<Child1/> render');   
    })
    return (
        <div>자식1</div>
    )
})

export const Child2 = memo(() =>{
    useEffect(()=>{
        console.log('<Child2/> render');   
    })
    
    return (
        <div>자식2</div>
    )

})