[3장][희석] 리액트 훅 깊게 살펴보기

[HeeSeok-kim]

퀴즈

문제 1) state의 값은 무엇이고 이유를 설명해주세요

function Component() {
    const [,triggerRender] = useState()
    let state = 'hello'

    function handleButtonClick() {
        state = 'hi'
        triggerRender()
    }

    return (
        <>  
          <h1>{state}</h1>
          <button onClick = {handleButtonClick}>hi</button>
        </>
    )
}

답

정답

hello 렌더링이 발생될 때마다 함수는 다시 새롭게 실행되고, 새롭게 실행되는 함수에서 state는 매번 hello로 초기화되기 때문이다.

댓글 작성법

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

[hayamaster]

triggerRender으로 인해 컴포넌트는 새로 랜더링이 되지만, 동시에 state도 'hello'로 초기화된다.

[khj0426]

버튼 클릭 -> handleButtonClick의 호출

-> state가 hi로 바뀌고 triggerRender() (setState의 호출)

-> 다시 컴포넌트가 렌더링되고 state는 hello로 초기화

[hyoribogo]

정답

hello, 리렌더링이 되면 state 변수는 다시 hello로 초기화 되므로