[REACT] LifeCycle API 정리 - 기본편
React LifeCycle API - basic
개념
정의
컴포넌트가 브라우저에 나타날 때, 업데이트 될 때, 사라질 때 호출되는 API.
컴포넌트는 생성되고 사용되고 소멸하는 생명주기를 가지고, 이 생명주기의 특정 시점에서 호출되는 메서드.
이 메서드를 재정의 하여 우리는 특정 시점에 특정 기능을 실행할 수 있다.
일반적으로 사용되는 component lifeCycle
Mouting
컴포넌트의 인스턴스가 생성되고 DOM에 삽입될 때 호출
-
constructor()
- render()
- componentDidMount()
Updating
상태 변경 후, 다시 렌더링할 때 호출
- render()
- componentDidUpdate()
Unmounting
컴포넌트가 DOM에서 제거될 때 호출
- componentWillUnmount()
CHEAT SHEET (v 16.3, v16.4)
종류
contsructor()
constructor()는 컴포넌트가 마운트(인스턴스가 생성되고 DOM에 삽입) 되기 전 호출된다.
이렇게 쓴다
-
React.Component 에서 상속받은 this.props를 정의한다
- this.state를 초기화하는 유일한 장소다
- 이벤트 핸들러를 인스턴스에 바인딩 (화살표 함수를 쓰면 이걸 안해도 되겠지?) 한다
constructor(props) {
super(props);
// Don't call this.setState() here!
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
}
주의사항
-
무조건
super(props)를 먼저 호출하자. 상속받은 React.Component의 this.props가 정의되지 않는다면 버그가 발생한다. -
가급적 화살표 함수를 쓰자. 귀찮게 이벤트 핸들러를 인스턴스에 바인딩 시키지 않아도 된다. (아래 예제 참조)
-
state에 props의 값을 복사하지 않는다.
- 굳이 this.props.color를 놔두고 두 번 부를 필요가 없고
- color 값이 업데이트 되었을 때 state에 반영되지 않기 때문이다
- 업데이트를 고의로 무시하려는 경우에만 밑의 케이스를 적용하자
constructor(props) {
super(props);
// Don't do this!
this.state = { color: props.color };
}
render()
유일하게 무조건 구현해야 할 메서드.
호출됐을때 this.props와 this.state, 그리고 아래 중 하나의 타입을 반환한다.
- React elements
- JSX를 통해 생성되는 엘리먼트
- Arrays and Fragments
- Portals
- 다른 DOM 하위 트리로 렌더링할 자식 요소
- String and Numbers
- DOM에서 text 요소로 렌더링
- Booleans or null
- 아무것도 렌더링하지 않을 수도 있다
pure function 이어야 한다. 호출 될 때마다 동일한 결과를 반환해야 하며, 구성 요소를 수정하지 않는다. 그리고 브라우저와 직접 상호 작용을 하지 않는다. (하… 함수형 프로그래밍에 익숙해져야 할 하나의 이유가 늘었다.)
브라우저와 상호작용이 필요한 경우는 componentDidMount()를 사용하거나 다른 라이프사이클 메서드를 사용한다.
내가 이 부분을 이해한 것은… 한마디로 렌더시에는 값을 뿌려주기만 할 뿐, 아무것도 하지 마라. 순수 함수를 유지하면 더 쉬워진단다.
componentDidMount()
componentDidMount()
컴포넌트가 마운트 된 직후 호출된다. (컴포넌트가 만들어지고 첫 렌더링을 다 마친후 실행) 하지만 브라우저가 화면을 업데이트는 하기 전이다. DOM 노드가 필요한 초기화는 여기서 수행한다.
이럴 때 쓴다
- 주로 ajax 요청으로 state 상태를 초기화 해야 할 때 여기서 수행한다 (사실상 이게 대부분일듯?)
- 그 외 모달이나 툴팁처럼 크기나 위치에 따라 렌더링하는 위치가 달라질 때 등등에 쓸 수 있겠다.
componentDidUpdate()
componentDidUpdate(prevProps, prevState, snapshot)
컴포넌트가 리렌더링한 직후 호출된다. 초기 렌더링에는 호출되지 않는다.
- 첫번째 인자 : 바뀌기 전의 props
- 두번째 인자 : 바뀔 state
- 세번째 인자 :
getSnapshotBeforeUpdate()을 구현할 경우 메서드에서 반환되는 값
이럴 때 쓴다
- state가 변경되면 다시 무언가를 갱신해야 할 때, 이 때 state가 바뀌었는지 비교한 후 다시 ajax 요청을 한다
componentDidUpdate(prevProps) {
// Typical usage (don't forget to compare props):
if (this.props.userID !== prevProps.userID) {
this.fetchData(this.props.userID);
}
}
주의사항
- 이 메서드 안에서 this.setState()를 사용하면 무한 루프가 일어나게 되므로 사용하면 안된다.
componentWillUnamount()
componentWillUnmount()
DOM 요소가 삭제되기 직전에 호출. 타이머 무효화, 네트워크 요청 취소 등을 수행하면 되겠다.
주의사항
setState()를 사용하지 말자. 구성 요소가 다시 렌더링되지 않는다.