라이프사이클 메서드
컴포넌트의 수명
- 페이지에 렌더링 되기 전인 준비과정부터 페이지가 사라질 때까지
라이프사이클 메서드
- 클래스 컴포넌트에서만 사용 가능
- 총 9가지 종류, 3가지 카테고리(마운트, 업데이트, 언마운트)
- 접두사 Will : 어떤 작업이 작동하기 전 실행
- 접두사 Did : 어떤 작업이 작동된 후 실행
라이플사이클 메서드 카테고리
마운트(Mount)
- DOM이 생성되고 웹 브라우저 상에 나타나는 것
- 마운트 될 때 호출하는 메서드
- constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
- getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용되는 메서드
- render : 우리가 준비한 UI를 렌더링하는 메서드
- componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드
업데이트(Update)
- 실행 기준
- props의 변동
- state의 변동
- 부모 컴포넌트의 리렌더링
- this.forceUpdate로 강제 렌더링
- 업데이트 될 때 실행되는 메서드
- getDerivedStateFromProps → shouldComponentUpdate(false 반환 시 작업 취소) → render → getSnapshotBeforeUpdate → 웹브라우저상 실제 DOM 변화 → componentDidUpdate
- getDerivedStateFromProps : props 변화에 따라 state 값에 변화를 줘야할 때 사용
- shouldComponentUpdate : 리렌더링 여부 결정. false 반환 시 작업 중지(리렌더링되지 않음) this.forceUpdate() 함수가 호출될 경우 이 과정이 생략됨
- render : 컴포넌트 리렌더링
- getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출
- componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출
언마운트(Unmount)
- 컴포넌트를 DOM에서 제거하는 것
- componentWillUnmount : 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드
라이프사이클 메서드 종류
render() 함수
- 컴포넌트 모양을 정의
- 라이프사이클 메서드 중 유일한 필수 메서드
- this.props와 this.state에 접근 가능
- 리액트 요소 반환(null, false인 경우 빈 화면 반환)
- 이벤트 설정이 아닌 곳에서 setState 사용 금지
- 브라우저의 DOM에 직접 접근 금지
- DOM 정보를 가져오거나 state에 변화를 줄 땐 componentDidMount에서 처리
constructor 메서드
constructor(props){...}
- 컴포넌트의 생성자 메서드로 컴포넌트를 만들 때 처음 실행
- 초기 state 설정 가능
getDerivedStateFromProps 메서드
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.value != prevState.value) { // 조건에 따라 특정 값 동기화
return {value : nextProps.value}
}
return null // state를 변경할 필요가 없다면 null 반환
}
- props로 받아 온 값을 state에 동기화
- 컴포넌트가 마운트될 때와 업데이트 될 때 호출
componentDidMount 메서드
componentDidMount() {...}
- 첫 렌더링을 모두 마친 후 실행
- 이 안에서 다른 JS 라이브러리 또는 프레임워크의 함수를 호출하거나 이벤트 등록, setTimeout, setInterval, 네트워크 요청과 같은 비동기 작업을 처리할 수 있음
shouldComponentUpdate 메서드
shouldComponentUpdate(nextProps, nextState) {...}
- props / state 를 변경했을 때 리렌더링을 시작할지 여부를 정하는 메서드
- true / false 값을 반환 (메서드를 따로 생성하지 않으면 기본값 true)
- 현재 props / state 는 this. props / this.state로 접근
- 리렌더링을 방지할 때에는 false 값을 반환하도록 함
getSnapshotBeforeUpdate 메서드
getSnapshotBeforeUpdate(prevProps, prevState) {
if(prevState.array !== this.state.array) {
const {scrollTop, scrollHeight} = this.list
return {scrollTop, scrollHeight}
}
}
- render에서 만들어진 결과물이 브라우저에 실제 반영되기 직전에 호출
- 반환값은 componentDidUpdate에서 세번째 파라미터인 snapshot 값으로 전달받을 수 있음
- 주로 업데이트하기 직전의 값을 참고할 일이 있을 때 활용(스크롤바 위치 유지 등)
componentDidUpdate 메서드
componentDidUpdate(prevProps, prevState, snapshot) {...}
- 리렌더링을 완료한 후 실행
- 업데이트가 끝난 직후이므로 DOM 관련 처리를 해도 됨
- prevProps / prevState를 사용하여 이전에 가졌던 데이터에 접근
- getSnapshotBeforeUpdate 에서의 반환값을 snapshot 값으로 전달받을 수 있음
componentWillUnmount 메서드
componentWillUnmount() {...}
- 컴포넌트를 DOM에서 제거할 때 실행
- componentDidMount 에서 등록한 이벤트, 타이머, 직접 생성한 DOM 등의 제거 작업 수행
componentDidCatch 메서드
componentDidCatch(error,info) {
this.setState({
error : true
})
console.log({error, info})
}
- 컴포넌트 렌더링 중 에러가 발생했을 때 오류 UI를 보여줌
- error : 파라미터에 발생한 에러
- info : 오류가 발생한 코드에 대한 정보(어디서 발생했는지)
- 서버 API를 호출하여 따로 수집할 수도 있음
- 대신, 컴포넌트 자신에게 발생하는 에러는 잡을 수 없음
- this.props.children으로 전달되는 컴포넌트에서 발생하는 에러만 잡아낼 수 있음
댓글