1. render() 함수
- 이 메서드 안에서는 this.props와 this.state에 접근할 수 있으며, 리액트의 요소를 반환한다.
- 이벤트를 처리하는 곳이 아닌 곳에서 setState를 사용하면 안되고 DOM에 접근하면 안됨
- DOM 정보를 가져오거나 state에 변화를 줄때는 componentDidMount에서 처리해야함( Vue에서 mount() 훅에서만 DOM에 접근한 것과 동일한 것으로 보임)
2. constructor 메서드
- constructor(props) { }
- 다른 객체지향 언어에서와 동일하게 컴포넌트를 만들 때 처음으로 실행되고 초기 state를 설정할 수 있다.
3. getDerivedStateFromProps 메서드
- 리액트 버전 16.3 이후에 생겨난 라이프사이클 메서드(버전확인은 "yarn info react"로 확인 가능)
- props로 받아온 값을 state에 동기화시키는 용도로 사용(그럼.. 동기화 후 state로 props의 속성을 수정할 수 있을까??)
- 컴포넌트가 마운트될 때, 업데이트될 때 호출됨
4. componentDidMount 메서드
- 첫 렌더링을 마친 후 실행
- 여기서 다른 자바스크립트 라이브러리의 함수를 호출할 수 있고 DOM에 접근 가능
5. shouldComponentUpdate 메서드
- shouldComponentUpdate(nextProps, nextState) { }
- props 또는 state를 변경했을 때, 리렌더링을 시작할지 여부를 지정하는 메서드
- 반드시 true 또는 false 값을 리턴해야한다.( default: true)
- 현재 props와 state는 this.props, this.state로 접근가능
- 새로 설정될 props와 state는 nextProps, nextState로 접근 가능
6. getSnapshotBeforeUpdate 메서드
- 리액트 버전 16.3 이후에 생겨난 라이프사이클 메서드
- render에서 만들어진 결과물이 브라우저에 실제 반영되기 직전에 호출됨
- 여기서 리턴 값은 componentDidUpdate의 세 번째 인자로 전달
7.componentDidUpdate 메서드
- 리렌더링을 완료 후 실행됨
- 업데이트가 끝난 직후이므로 DOM 관련 처리를 해도 상관 없다.
- getSnapshotBeforeUpdate 에서 리턴해준 값이 있으면 세 번째 인자값을 사용한다.
8. componentWillUnmount 메서드
- 컴포넌트를 DOM에서 제거할 때 실행
- componentDidMount 에서 등록한 이벤트, 직접 생성한 DOM이 있으면 여기서 종료해야함
9. componentDidCatch 메서드
- 컴포넌트 렌더링 도중에 에러가 발생했을 때 오류 UI를 보여 줄 수 있게 해준다.
- error: 어떤 에러가 발생했는지에 대한 정보를 포함하고 있음
- info: 어디에 있는 코드에서 오류가 발생했는지에 대한 정보를 포함하고 있음
- 컴포넌트 자신에게 발생하는 에러를 잡아낼 수 없고 자신의 this.props.children으로 전달되는 컴포넌트에서 발생하는 에러만 잡아낼 수 있음
component(error, info){
this.setState({
error: true
});
console.log('error::', error);
console.log('info::', info);
}
