7.3.3 에러 잡아내기

    방금 만든 LifeCycleSample 컴포넌트의 render 함수에서 의도적으로 에러를 한번 발생시켜 보겠습니다. render 함수에서의 에러는 주로 존재하지 않는 함수를 사용하려고 하거나, 존재하지 않는 객체의 값을 조회하려고 할 때 발생합니다.

    LifeCycleSample의 render 함수를 다음과 같이 수정해 보세요.

    LifeCycleSample.js

    render() {
        console.log('render');
     
        const style = {
          color: this.props.color
        };
     
        return (
          <div>
            {this.props.missing.value}
            <h1 style={style} ref={ref => (this.myRef = ref)}>
              {this.state.number}
            </h1>
            <p>color: {this.state.color}</p>
            <button onClick={this.handleClick}>더하기</button>
          </div>
        );
      }

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.