Page 23 -

언마운트
마운트의 반대 과정, 즉 컴포넌트를 DOM에서 제거하는 것을 언마운트(unmount)라고 합니다.

그림 7-4 언마운트할 때 호출하는 메서드
언마운트하기

componentWillUnmount
7

● componentWillUnmount: 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드입
니다. 컴포넌트의 라이프사이클 메서드

7.2 라이프사이클 메서드 살펴보기 R E A C T

자, 이제 앞서 소개한 라이프사이클 메서드를 하나씩 자세히 살펴봅시다.

7.2.1 render( ) 함수

render() { ... }

이 메서드는 매우 익숙하지요? 이 메서드는 컴포넌트 모양새를 정의합니다. 그렇기에 컴포넌트
에서 가장 중요한 메서드라고 할 수 있죠. 라이프사이클 메서드 중 유일한 필수 메서드이기도 합

니다.

이 메서드 안에서 this.props와 this.state에 접근할 수 있으며, 리액트 요소를 반환합니다. 요소
는 div 같은 태그가 될 수도 있고, 따로 선언한 컴포넌트가 될 수도 있습니다. 아무것도 보여 주고
싶지 않다면 null 값이나 false 값을 반환하도록 하세요.

그리고 다음 사항에 주의하세요. 이 메서드 안에서는 이벤트 설정이 아닌 곳에서 setState를 사용
하면 안 되며, 브라우저의 DOM에 접근해서도 안 됩니다. DOM 정보를 가져오거나 state에 변
화를 줄 때는 componentDidMount에서 처리해야 합니다.

175

리액트를 다루는 기술_개정판(본문)최종출력용.indb 175 2019-08-20 오전 11:03:03