React 애플리케이션은 다양한 컴포넌트의 조합으로 만들어진다.
하나의 컴포넌트가 앱 종료까지 계속 사용될 수도 있겠지만, 기본적으로 화면 전환을 하면 이전에 있던 컴포넌트 중 재사용 되지 않는 컴포넌트는 리소스 확보를 위해 제거되기 마련이다.
이렇듯 React의 컴포넌트는 DOM에 렌더링 되고나서 부터 제거되기 까지 생명 주기(Lifecycle)가 존재한다.
자세한 내용은 아래에서 알아보자.
컴포넌트의 생명 주기(Lifecycle)
컴포넌트의 생명 주기는 컴포넌트의 인스턴스 생성, 컴포넌트 업데이트, 마지막으로 컴포넌트가 제거되기 까지를 말한다.
그리고 생명 주기동안 특정 시점에 실행되는 메서드가 존재하는데, 이 메서드들을 생명 주기 메서드(Lifecycle methods) 라고 부른다.
아래는 어느 시점에 어떤 생명 주기 메서드가 실행되는지 나타내는 도표다.
출처 : https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
제일 상단의 '덜 일반적인 라이프 사이클 표시'를 보면 알겠지만, 모든 메서드가 표현된것이 아니며 이 포스팅에서도 자주 사용하는 일부 메서드만을 다룰 예정이다.
좀 더 다양한 메서드를 알고싶다면 React.Component - React를 참고하자.
생명 주기 메서드(Lifecycle methods)
도표에서 보았듯이 생성될 때, 업데이트할 때, 제거할 때의 세 단계마다 실행되는 메서드의 종류가 다르다.
React에서는 위의 세 단계를 각각 마운트(Mount), 업데이트(Update), 마운트 해제(unmount) 라고 부른다.
각 단계별로 동일한 메서드의 설명은 생략한다.
그러면 각 단계마다 실행되는 메서드의 순서와 세부사항을 알아보자.
마운트(Mount)
마운트 단계에 해당하는 메서드들은 컴포넌트의 인스턴스가 생성되어 DOM에 삽입될 때 순서대로 호출된다.
constructor(props)
이미 컴포넌트에서 익숙해진 생성자 함수다.
주의해야 할 점은 constructor() 함수 안에서 setState() 메서드를 호출하면 안 된다는 것과, state 객체의 프로퍼티로 props를 복사해서 사용하면 안 된다는 것이다.
render()
render() 역시 이미 익숙한 메서드다.
컴포넌트에서 반드시 구현되어야 하는 메서드이며, 동시에 호출할 때 마다 항상 같은 결과만을 반환하는 순수 함수로 구현해야 한다.
componentDidMount()
componentDidMount() 메서드는 컴포넌트의 인스턴스가 생성되고 마운트가 완료된 직후에 호출되는 함수다.
주로 DOM Node가 필요한 작업을 이 함수에서 구현하면 된다.
업데이트(Update)
업데이트 단계에 해당하는 메서드들은 컴포넌트가 다시 렌더링 될 때 호출된다.
여기서 다시 렌더링 되는 기준은 아래와 같다.
props의 변경state의 변경- 부모 컴포넌트가 다시 렌더링 될 때
forceUpdate()메서드 호출로 인한 강제 업데이트
render()
componentDidUpdate(prevProps, prevState, snapshot)
이 메서드는 위에서 설명했던 업데이트가 일어나면 호출되며, 매개변수로 업데이트 전의 props 및 state 객체를 참조할 수 있다.
주의해야 할 점은 이 메서드 안에서 업데이트를 일으키는 코드(ex. setState())를 조건문 없이 작성하면, 업데이트 된 직후 다시 업데이트를 진행하는 무한 반복에 빠질 수 있으므로 주의하자.
마운트 해제(Unmount)
마운트 해제 단계에서 실행되는 메서드는 단 하나로, 컴포넌트가 DOM 상에서 제거될 때 호출된다.
componentWillUnmount()
componentWillUnmount() 메서드는 컴포넌트가 제거되기 직전에 호출되는 메서드다.
타이머 제거 등 컴포넌트가 없어지기 전에 해야할 다양한 코드를 이곳에 작성하며, 한 번 마운트가 해제된 컴포넌트는 직접 마운트 하기 전 까지는 다시 마운트 되지 않으므로 setState()같은 업데이트 메서드를 호출하면 안 된다.
참고 자료
React lifecycle methods diagram
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
React.Component - React
https://ko.reactjs.org/docs/react-component.html
State and Lifecycle - React
https://ko.reactjs.org/docs/state-and-lifecycle.html
