모든 리액트에는 라이크사이클(수명주기)이 존재합니다.
라이프 사이클은 클래스형 컴포넌트에서만 사용이 가능합니다.
라이프 사이클 메서드
라이프 사이클 메서드의 종류는 총 9가지 입니다.
* 접두사에 따른 메서드
- Will접두사가 붙은 메서드 : 어떤 작업을 작동하기 전에 실행되는 메서드
- Did접두사가 붙은 메서드 : 어떤 작업을 작동한 후에 실행되는 메서드
라이프 사이클은 총 3가지로 카테고리로 나뉩니다.
- 마운트
- 업데이트
- 언마운트
지금 부터 카테고리 하나씩 알아보도록 하겠습니다.
마운트
DOM이 생성되고 웹브라우저상에 나타나는 것을 마운트 라고 합니다.
마운트를 호출하는 메서드는 다음과 같습니다.
1. 컴포넌트 만들기
2. constructor : 컴포넌트를 새로 만들때마다 호출되는 클래스 생성자 메서드
3. getDervedStateProps : props에 있는 값을 state에 넣을때 사용하는 메서드
4. render : UI를 렌더링하는 메서드
5. componentDidMount : 컴포넌트가 웹브라우저상에 나타난후 호출하는 메서드
업데이트
컴포넌트는 다음과 같은 총4가지 경우에만 업데이트 합니다.
1. props가 바뀔때
2. state가 바뀔때
3. 부모 컴포넌트가 리렌더링 될때
4. this.forceUpdate로 강제 렌더링을 트리거 할때
업데이트 할때 호출하는 메서드는 다음과 같습니다.
1. 업데이트를 발생시키는 요인 : props변경, state변경, 부모컴포넌트 리렌더링
2. getDerivedStateFromProps
3. shouldComponentUpdate
4. render
5. getSnapshotBeforeUpdate
6. componentDidUpdate
언마운트
마운트의 반대과정, 컴포넌트를 DOM에서 제거하는 것을 말합니다.
언마운트를 할때 호출하는 메서드는 다음과 같습니다.
1. 언마운트 하기
2. componentWillUnmount
라이프 사이클 메서드 알아보기
지금부터 라이프 사이클 메서드를 알아보도록 하겠습니다.
1. render() 메서드
컴포넌트에서 가장 중요한 메서드 입니다.
* render 함수 특징
- 메서드 안에서 this.props, this.state에 접근
- 리액트 요소를 반환
* render함수 주의사항
- 이벤트 설정이 아닌곳에서 setState사용 불가
- 브라우저의 DOM에 접근하면 안됨
2. constructor 메서드
컴포넌트의 생성자 메서드로 초기 state를 설정 할 수 있습니다.
constructor(props){ ... }
3. getDerivedStateFromProps 메서드
리액트 v16.3 이후에 새로 생긴 메서드 입니다.
props에 받아 온 값을 state에 동기화 시키는 용도로 사용합니다. 마운트, 업데이트를 할때 사용됩니다.
static getDerivedStateFromProps(nextProps, prevState){ if(nextProps.value !== prevState.value){ return { value: nextProps.value }; } }
4. componentDidMount 메서드
컴포넌트를 만들고, 첫 렌더링을 마친후 실행합니다.
setTimeOut, setInterval과 같은 비동기 작업 / 라이브러리 or 프레임워크 함수를 호출할때 사용합니다.
componentDidMount() { ... }
5. shouldComponentUpdate 메서드
props, state 를 변경했을때 리렌더링을 시작할지 지정하는 메서드 입니다.
* shouldComponentUpdate의 특징
1. 반드시 true, false값을 반환
2. 컴포넌트 생성시 별도 설정이 없으면 true로 반환
3. props, state는 this.props, this.state로 접근
4. 새로 설정될 props,state는 nextProps, nextState로 접근
shouldComponentUpdate(nextProps, nestState) { ... }
6. getSnapshotBeforeUpdate 메서드
리액트 v16.3 이후 만들어진 메소드 입니다.
render에서 만들어진 결과물이 브라우저에 실제로 반영되기 직전에 호출됩니다. 주로 업데이트 하기 직전 값을 참고할 일이 있을때 활용됩니다.
getSnapshotBeforeUpdate(prevProps, prevState){ if(prevState.array !== this.state.array){ const { scrollTop, scrollHeight } = this.list return { scrollTop, scrollHeight }; } }
7. componentDidUpdate 메서드
리렌더링을 완료한 후 실행합니다. prevProps, prevState를 사용하여 컴포넌트가 이전에 가졌던 데이터에 접근할 수 있습니다.
componentDidUpdate(prevPrps, prevState, snapshot) { ... }
8. componentWillUnmount 메서드
컴포넌트를 DOM에서 제거할 때 실행합니다.
componentDidMount에서 등록한 이벤트, 타이버, 직접 생성한 DOM이 있다면 여기서 제거작업을 해야합니다.
9. componentDidCatch메서드
컴포넌트 렌더링 도중 에러가 발생했을때 오류 UI를 보여주는 메서드 입니다.
componentDidCatch(error, info){ this.setState({ error: true }); console.log({error, info}); }
여기서 error는 어떤 에러가 났는지 보여주고, info는 어디에 있는 코드에서 오류가 났는지 보여줍니다.
But, 이 메서드는 컴포넌트 자신에게 발생한 에러는 잡을 수가 없고, 자신의 this.props.children으로 전달되는 컴포넌트에서 발생한 에러만 잡아낼 수 있습니다.
참고자료
리액트를 다루는 기술
