[2장][주하] 리액트 핵심 요소 깊게 살펴보기

[hayamaster]

퀴즈

(A)
핫 리로딩(hot reloading)이란 코드에 변경 사항이 발생했을 때 앱을 새로 시작하지 않고도 변경된 코드만 업데이트하여 변경 사항을 빠르게 적용하는 기법을 말합니다.
state 값을 업데이트하여 핫 리로딩을 발생시킬 때, 클래스형 컴포넌트가 함수형 컴포넌트에 비해 핫 리로딩에 왜 불리한지 설명하세요.
힌트 : 각 컴포넌트에서 state가 어떻게 관리되는지를 설명해주시면 됩니다.

(B)

class Sample extends Component{
  private constructor(props) {
    super(props)
    this.state = {
      count: 1,
    }
  }

  private handleClick() {
    this.setState((prev) => ({ count: prev.count + 1 }))
  }
}

위에서 handleClick함수의 this는 어떤 객체를 가르킬까요?

답

정답

(A) 클래스형 컴포넌트는 instance 내부에서 state를 관리한다. 이에 내부 render를 수정하게 되면 instance가 새로 만들어져 당연히 값이 초기화되어 버린다. 반면 함수형 컴포넌트는 state를 함수가 아닌 클로저에 저장해두기 때문에 함수가 다시 실행되어도 state의 값을 잃지 않는다.

(B)
undefined

댓글 작성법

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

[hyoribogo]

(A)
클래스는 인스턴스를 새로 만들어야 하기 때문에 핫 리로딩 불리함

(B)
undefined

[khj0426]

A
클래스는 인스턴스를 다시 만든다 -> 핫 리로딩에 불리

B
undefined