LifeCycle API
이 API 는 React Component가 브라우저에서 로딩, 사라질때, 에러가 나타났을때 그리고 업데이트될 때, 호출되는 API로 리액트 라이프 사이클을 공부한 내용을 정리한 포스트이다.
컴포넌트 라이프사이클 초기 화면 로딩시
- constructor
- getDerivedStateFromProps
- render
- componentDidMount
업데이트
- getDerivedStateFromProps
- shouldComponentUpdate (if return false일 경우 종료, true면 랜더진행)
- render
- getSnapshotBeforeUpdate
- componentDidUpdate
언마운트
- componentWillUnmount
state가 바뀔 경우에는 바로 shouldComponentUpdate 부터 라이프사이클이 진행 됩니다. 라이프 사이클의 기본적인 사용방법과 각각의 라이프 사이클에 대해 알아 보도록 하겠습니다.
state값 초기화 시, constructor 또는 state 객체에 바로 추가하면 됩니다.
외부 데이터를 추가 시 componentDidMount에 추가합니다.
이벤트 리스너 또한 componentDidMount에 추가합니다.
constructor()
이 메소드는 새로운 객체가 생성될 때 마다 호출됩니다. super(props)은 부모 클래스의 생성자를 호출하며 this.props 로 접근이 가능합니다. 또한, 콜백으로 전달될 함수들을 바인딩 할 때도 사용됩니다. this.setState() 또는 Ajax 요청을 사용하시면 안됩니다. (componentDidMount()에서 사용)
static getDerivedStateFromProps()
이 메소드는 컴포넌트 초기화 또는 새로운 props를 받았을 때 일어납니다. 인스턴스가 아닌 클래스로 존재합니다. 그렇기 때문에 this 키워드 접근이 불가능합니다. this.setState() 사용 대신 state를 업데이트 하기 위한 객체를 리턴하며 업데이트가 필요없을 경우 null값을 리턴합니다. 오로지 변화가 생긴 state만 리턴하고 나머지는 유지됩니다. this.setState()는 이 메소드를 호출하지 못합니다.
houldComponentUpdate()
새로운 렌더링 과정이 필요 없을 경우 라이프사이클을 빠져나올 수 있습니다. 리엑트는 기본적으로 깊은 비교를 하지 않습니다. 그렇기 때문에 props, state가 업데이트 될 경우 리렌더링이 필요하다고 생각합니다.
render()
이 메소드가 호출되면 this.props와 this.state가 분석되며 리액트 엘리먼트를 리턴합니다. render() 메소드는 state를 변경하면 안되며 브라우저와 직접적으로 상호작용하면 안됩니다. 브라우저와 연동하려면 componentDidMount()안에서 하면 됩니다. shouldComponentUpdate()가 false를 리턴할 경우 발생하지 않습니다.
componentDidMount()
이 메소드는 전체 라이프사이클에서 한 번만 호출됩니다. 데이터와 관련된 로직을 실행하기에 적합합니다. componentDidupdate()는 prevProps, prevState, snapshot을 파라미터로 가질 수 있습니다. 이 외에도 componentWillUnmount(), componentDidCatch()가 있습니다.
마무리
LifeCycle Method들은 클래스형 컴포넌트에서만 사용 할 수 있는데, 앞으로는 클래스형 컴포넌트 보다는 함수형 컴포넌트를 주로 사용해서 만들게 되기 때문에 기본적인 동작 방식만 익히고 Hooks에 대해 공부하면서 함수형 컴포넌트에서 이런 기능들을 사용하는 방법을 익혀야겠다.
