7.1 수명주기 방법 이해
총 9가지 유형의 라이프사이클 메소드가 있습니다.
Will 접두사가 있는 메서드는 작업이 수행되기 전에 실행되는 메서드이고 Did 접두사가 있는 메서드는 작업이 수행된 후 실행됩니다.
수명 주기는 배포, 업데이트 및 마운트 해제의 세 가지 범주로 나뉩니다.
DOM이 생성되어 웹 브라우저에 표시됩니다. 모으다그것은 말한다.
- 생성자: 새로운 컴포넌트가 생성될 때마다 호출되는 클래스 생성자 메서드입니다.
- getDerivedStateFromProps: 이 메서드는 props의 값을 상태로 가져오는 데 사용됩니다.
- render: 준비한 UI를 렌더링하는 메소드입니다.
- componentDidMount: 이 메소드는 컴포넌트가 웹 브라우저에 표시된 후에 호출됩니다.
구성 요소는 다음 네 가지 경우에 업데이트됩니다.
- 소품이 바뀔 때
- 상황이 바뀔 때
- 상위 구성 요소가 다시 렌더링되는 경우
- this.forceUpdate로 렌더링을 강제 트리거하는 경우
이러한 구성 요소를 업데이트할 때 다음 메서드를 호출합니다.
마운트의 반대 프로세스, 즉 DOM에서 컴포넌트를 제거하는 것을 마운트 해제라고 합니다.
7.2 수명 주기 방법 검토
7.2.1 render() 함수
렌더링() { . . . }
이 방법은 여러분에게 매우 친숙하게 보일 것입니다. 이 메서드는 구성 요소의 모양을 정의합니다.
따라서 컴포넌트에서 가장 중요한 공정이라고 할 수 있습니다.
이 메서드 내에서 this.props 및 this.state에 액세스하고 반응 요소를 반환할 수 있습니다.
요소는 div와 같은 태그이거나 별도로 선언된 구성 요소일 수 있으며 아무 것도 표시하지 않으려면 null 또는 false 값을 반환할 수 있습니다.
7.2.2 생성자 메서드
생성자(소품) { . . . }
이는 구성 요소가 처음 생성될 때 실행되고 초기 상태를 설정할 수 있는 구성 요소의 생성자 메서드입니다.
7.2.3 getDerivedStateFromProps 메서드
props로 받은 값을 상태와 동기화하는 데 사용되며 구성 요소가 마운트되거나 업데이트될 때 호출됩니다.
7.2.4 “componentDidMount” 방법.
ComponentDidMount( ) { . . . }
이렇게 하면 구성 요소가 생성되고 첫 번째 렌더링 후에 실행됩니다.
여기에서 다른 JavaScript 라이브러리 또는 프레임워크의 함수를 호출하거나 이벤트 등록, setTimeout, setInterval 및 네트워크 요청과 같은 비동기 작업을 처리할 수 있습니다.
7.2.5 shouldComponentUpdate 메소드
shouldComponentUpdate(nextProps, nextState) { . . . }
이 메서드는 소품 또는 상태가 변경될 때 다시 렌더링을 시작할지 여부를 지정합니다.
7.2.6 getSnapshotBeforeUpdate 메서드
이 메서드는 렌더링에 의해 생성된 결과가 실제로 브라우저에 표시되기 직전에 호출됩니다.
이 메서드에서 반환된 값은 componentDidUpdate의 세 번째 매개 변수인 스냅샷 값으로 전달될 수 있습니다.
7.2.7 “componentDidUpdate” 방법.
componentDidUpdate(prevProps, prevState, 스냅샷) { . . . }이것은 다시 렌더링이 완료된 후에 실행됩니다. 업데이트 직후라서 DOM 관련 처리를 좀 해도 괜찮습니다.
7.2.8 componentWillUnmount 방법.
구성 요소가 DOM에서 제거될 때 실행됩니다.
7.2.9 ComponentDidCatch 메서드
componentDidCatch 메서드를 사용하면 응용 프로그램이 구성 요소를 렌더링하는 동안 오류가 발생하는 경우 일시 중지하지 않고 오류 UI를 표시할 수 있습니다.
7.3 수명 주기 메서드 사용
7.3.1 예제 컴포넌트 만들기
7.3.2 앱 구성 요소에서 샘플 구성 요소 사용