[리액트(React) 학습자를 위한 기초지식] 컴포넌트 생명주기(Lifecycle of Components) - #3 Unmounting (3/3)

리액트(React) 학습자를 위한 기초지식

컴포넌트 생명주기(Lifecycle of Components) - #3 Unmounting

(출처: https://twitter.com/dan_abramov/status/981712092611989509)

Unmounting

리액트 컴포넌트 생명주기의 마지막 단계인 Unmounting입니다. Unmounting은 컴포넌트를 DOM에서 제거할 때 발생합니다. 이 Unmounting 단계에서 호출되는 함수는 단 하나 입니다,

1. componentWillUnmount()

componentWillUnmount

componentWillUnmount() 함수는 DOM에서 컴포넌트를 제거하려 할 때 호출됩니다. 컴포넌트를 제거할거면 그냥 컴포넌트 파일을 지우면 안되나 생각했지만, 예제를 통해 어떤 함수인지 확인할게요.

TeamRocket.jsx

import React, { Component } from 'react';

class TeamRocket extends Component {

componentWillUnmount(){

alert("오늘도 역시 날아갑니다~ @.@ ")

}

render() {

return (

<div>

<h1>[로켓단: 로사, 로이, 나옹]</h1>

</div>

);

}

}

export default TeamRocket;

Pokemon.jsx

import React, { Component } from 'react';

import TeamRocket from './TeamRocket';

class Pokemon extends Component {

state = {

show: true,

}

delTeamRocket = () => {

this.setState({

show: !this.state.show

})

}

render() {

let teamRocket;

if(this.state.show){

teamRocket = <TeamRocket />

};

return (

<div>

{teamRocket}

<button onClick={this.delTeamRocket}>피카츄 100만볼트!</button>

</div>

);

}

}

export default Pokemon;

App.js

import React from 'react';

import Pokemon from './components/Pockemon';

function App() {

return (

<div>

<Pokemon />

</div>

);

}

export default App;

실행화면1

실행화면2

실행화면3

이렇듯 Unmounting은 컴포넌트 파일을 삭제하는 것이 아니라, 컴포넌트가 DOM에서 임무(?)를 수행하고 사라지는 역할을 합니다.

이로써 리액트 컴포넌트의 생명주기는 끝났습니다. 혹시 부족한 부분이나 잘못된 부분이 있다면 가감없이 댓글 달아주세요. 감사합니다.