안녕하세요. Humanscape 개발자 Jake 입니다.
우리가 사용하는 브라우저의 페이지는 웹 컴포넌트로 구성이 되어있습니다. React에서는 각 컴포넌트의 여러시점에 event handling 할 수 있도록 API를 제공하는데요. 오늘은 컴포넌트 생명주기 ( Component Lifecycle ) 에 대해 알아보도록 하겠습니다.
컴포넌트 생명주기는 아래와 같이 3가지의 시점(마운트, 업데이트, 언마운트) 으로 나뉩니다.
React Lifecycle
마운트
React Lifecycle — Mounted
리액트 컴포넌트가 Instance로 생성되어 DOM tree에 삽입되어 브라우저 상에 나타나는것을 마운트라고 합니다.
마운트시 호출하는 메서드
constructor
컴포넌트를 새로 만들 때 마다 호출되는 클래스 생성자 메서드입니다 . constructor는 this.state의 초기값 적용, 인스턴스에 이벤트 처리 메서드를 바인딩 하기 위해 사용합니다.
※check: 1. React.Component를 상속한 컴포넌트의 constructor 구현 시에는 super(props)를 가장먼저 호출해야합니다. 2. contructor 내부에서 setState를 호출하면 안됩니다. 3. contructor 내부에서 subscription을 수행하면 안됩니다.
static getDerivedStateFromProps
props에 있는 값을 state에 동기화하는 메서드입니다. (react v 16.3~)최초 마운트 시와 갱신 시 render() 메서드를 호출하기 직전에 호출되고 state갱신을 위한 객체나 null을 반환합니다. nextProps 와 prevState 에 따라 component의 작업여부를 결정합니다.
※check: 1. 이메서드에서는 컴포넌트 인스턴스에 접근할 수 없습니다. 2. 이메서드는부모컴포넌트가 다시 렌더링을 발생시켰을때 실행되고, 해당 컴포넌트 내에서 지역적인 setState가 발생한 경우 실행되지 않습니다.
render
클래스 컴포넌트에서 구현하는 메서드로 UI를 렌더링 하는 메서드입니다. render메서드는 React 엘리먼트, 배열과 Fragment, Portals, 문자열과 숫자, Boolean 또는 null 중에 하나를 반환해야 합니다.
※check: 1. render함수는 컴포넌트의 state를 변경하면 안됩니다. 2. 호출될때 마다 동일한 결과를 반환해야합니다. 3. 브라우저와 직접 상호작용하지 않습니다.
componentDidMount
컴포넌트가 DOM tree에 삽입된 직후에 호출되는 메서드 입니다. 외부에서 데이터를 불러와야 할때 사용하기 적절합니다.
※check: 1. componentDidMount에서 setState를 호출하는경우 render함수가 두번호출되므로 성능문제가 있을수 있으므로 경우의 수를 파악해서 개발해야 합니다.
2. 업데이트
React Lifecycle — Update
리액트 컴포넌트가 업데이트되는것을 업데이트라고 합니다. 컴포넌트 업데이트 경우는 다음의 4가지 입니다.
1. props가 바뀔 때
2. state가 바뀔 때
3. 부모 컴포넌트가 리렌더링될 때
4. 강제로 트리거를 발생시킬때 ( this.forceUpdate )
업데이트시 호출하는 메서드
static getDerivedStateFromProps
shouldComponentUpdate
컴포넌트가 다시렌더링을 해야 할지 말아야 할지 결정하는 메서드입니다. 초기렌더링 또는 forceUpdate()호출시에 이메서드는 호출되지 않습니다. 이메서드는 렌더링을 방지하여 성능을 최적화하는 목적으로 사용됩니다.
render
getSnapshotBeforeUpdate
render메서드 호출후 DOM 변화를 반영하기 직전에 호출되는 메서드입니다. 이메서드에서 return하는 값을 componentDidUpdate에서 3번째 파라미터로 받아올 수 있습니다.
componentDidUpdate
리렌더링을 완료한 후 실행되는 메서드입니다. 최초렌더링에서는 호출되지 않습니다. 컴포넌트가 업데이트 되었을시에 DOM을 조작하기 위해 사용합니다.
※check: 1. componentDidUpdate에서 setState를 사용하면 무한 렌더링이 될 수 있으므로 조건문을 잘작성해야 합니다.
3. 언마운트
React Lifecycle — Unmounted
리액트 컴포넌트가 DOM상에서 제거되는것을 언마운트라고 합니다.
언마운트시 호출하는 메서드
componentWillUnmount
컴포넌트가 DOM에서 제거되기 직전에 호출되는 메서드 입니다. 타이머를 제거하거나 데이터구독해제등의 목적으로 사용됩니다.
※check: 1. componentWillUnmount가 호출된 컴포넌트는 다시 렌더링 하지 않으므로 setState를 호출하면 안됩니다.
지금까지 React 컴포넌트 생명주기에 대해 알아보았습니다. 감사합니다.
Get to know us better! Join our official channels below.
Telegram(EN) : t.me/Humanscape KakaoTalk(KR) : open.kakao.com/o/gqbUQEM Website : humanscape.io Medium : medium.com/humanscape-ico Facebook : www.facebook.com/humanscape Twitter : twitter.com/Humanscape_io Reddit : https://www.reddit.com/r/Humanscape_official Bitcointalk announcement : https://bit.ly/2rVsP4T Email : support@humanscape.io
가입하기
