[3장][효중] 리액트 훅 깊게 살펴보기
Closed this issue · 3 comments
khj0426 commented
퀴즈
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 commented
버튼을 눌렀을때 App컴포넌트가 다시 렌더링되고 toggle1,togglew2함수가 새로 다시 만들어지기 때문입니다.
hayamaster commented
버튼 클릭으로 인해 state값이 변경되고, 이로인해 부모 컴포넌트가 새로 리렌더링된다. 이때 toggle함수들도 새롭게 렌더링되기에 이를 props로 받는 child컴포넌트도 다시 렌더링된다
hyoribogo commented
정답
상위 컴포넌트에 있는 setState 함수가 실행되면 상위 컴포넌트가 리렌더링 되고, toggle 함수들도 재생성되어 주소값이 바뀌므로 자식 컴포넌트도 리렌더링 되는 것이다.