더북(TheBook)

앞에서 언급한 것처럼, React는 resize 이벤트를 지원하지 않는다. 따라서 다음과 같이 엘리먼트에 적용해도 작동하지 않는다.

...
  render() {
      return <div>
          <div onResize={this.handleResize}
              className="radio-tagger"
              style={this.state.taggerStyle}>
      ...

 

resize처럼 미지원 이벤트에 연결하려면 React 컴포넌트의 라이프사이클 이벤트를 사용한다. 예제 코드 6.11(ch06/radio/jsx/radio.jsx)은 componentDidMount()에서 window의 resize 이벤트 리스너를 추가하고, 같은 이벤트 리스너를 componentWillUnmount()에서 제거해서 컴포넌트가 DOM에서 제거될 때 이벤트 리스너도 제거한다. 컴포넌트를 제거한 후에 이벤트 리스너를 방치하는 것은 메모리 누수를 일으켜서, 갑자기 애플리케이션이 중단될 수도 있다. 메모리 누수를 방치하면 잠도 못 자고 눈이 붉게 충혈된 채로 에너지 음료를 마셔가며 밤새워 디버깅하면서 저주를 내뱉는 자신을 발견할지도 모른다.

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