[3장][효중] 리액트 훅 깊게 살펴보기

[khj0426]

퀴즈

const ChildComponent = memo(({ name , value , onChange})) => {
    useEffect(() => {
        console.log('렌더링!',name)
    })

    return (
        <>
          <h1>{name} {value ? '켜짐' ? '꺼짐'}</h1>
          <button onClick = {onChange}>toggle</button>
        </>
    )
}

function App() {
    const [state1,setState1] = useState(false)
    const [state2,setState2] = useState(false)

    const toggle1 = () => {
        setState1(!state1)
    }

    const toggle2 = () => {
        setState2(!state2)
    }

    return (
        <>
          <ChildComponent name = "1" value = {state1} onChange = {toggle1} />
          <ChildComponent name = "2" value = {state2} onChange = {toggle2} />
        </>
    )
}

왜 ChildComponent에서 버튼을 누르면 memo를 썼음에도 불구하고 ChildComponent가 다시 렌더링이 일어날까요?

답

정답

버튼을 누르게 된다면 -> 이 버튼이 setState을 호출하고 -> App컴포넌트가 다시 렌더링되고 toggle1,togglew2함수가 새로 다시 만들어진다. 따라서 onChange가 변경되어 결과적으로 다시 렌더링 된다!

댓글 작성법

(다음과 같이 답을 작성해 댓글로 달아주세요)
<details>
<summary>정답</summary>
<div markdown="1">
정답 설명
</div>
</details>

[HeeSeok-kim]

버튼을 눌렀을때 App컴포넌트가 다시 렌더링되고 toggle1,togglew2함수가 새로 다시 만들어지기 때문입니다.

[hayamaster]

버튼 클릭으로 인해 state값이 변경되고, 이로인해 부모 컴포넌트가 새로 리렌더링된다. 이때 toggle함수들도 새롭게 렌더링되기에 이를 props로 받는 child컴포넌트도 다시 렌더링된다

[hyoribogo]

정답

상위 컴포넌트에 있는 setState 함수가 실행되면 상위 컴포넌트가 리렌더링 되고, toggle 함수들도 재생성되어 주소값이 바뀌므로 자식 컴포넌트도 리렌더링 되는 것이다.