생명주기함수
2022-06-24
생명주기 함수
- 리액트는 리액트 훅이 나오기 전까지 클래스 컴포넌트를 메인으로 사용
- 이유: 함수 컴포넌트에서 컴포넌트의 상태를 관리하기 위한 State를 사용할 수 없음
- 따라서 리액트 훅 이전에는
- State를 가지는 컴포넌트는 클래스 컴포넌트로 제작
- 단순히 Props 를 받아 화면에 표시하는 컴포넌트를 제작할 때는 함수 컴포넌트를 많이 사용함
- 리액트 버전 16.8 이 나오기 전까지 많은 웹 어플리케이션과 리액트 관련 라이브러리들이 클래스 컴포넌트로 개발되어 왔으므로 클래스 컴포넌트를 다루는 방법에 대해 이해할 필요 있음
all.JPG
호출 순서
컴포넌트가 생성될 때 constructor -> getDerivedStateFromProps -> render -> componentDidMount
컴포넌트의 Props가 변경될 때 getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate
컴포넌트의 렌더링 중 에러가 발생할 때 componentDidCatch
컴포넌트가 화면에서 제거될 때 componentWillUnmount
자주 사용되는 생명주기 메서드
1. render 함수
- render 함수는 클래스 컴포넌트가 렌더링되는 부분(화면에 표시되는 부분)을 정의함
- 즉 render 함수의 반환값이 화면에 표시됨
- Props 값 또는 this.setState 에 의해 State의 값이 변경되어 화면을 갱신할 필요 있을 때 호출됨
- [주의] 따라서 이 함수에서 this.setState를 사용 시(State값을 직접 변경 시) 무한 루프에 빠짐
- 컴포넌트의 state를 변경하지 않고 호출될 때마다 동일한 결과를 반환해야함
- 브라우저와 직접적으로 상호작용을 하지 않음
모든 생명주기 함수는 render 함수를 제외하고 모두 생략이 가능하며, 필요할 때 재정의하여 사용 가능
2. constructor 함수
- 생성자 함수는 해당 컴포넌트가 생성될 때 한번만 호출됨(해당 컴포넌트가 마운트되기 전에 호출됨)
- 클래스 컴포넌트는 클래스이기에 생성자 함수가 존재함
- 메서드를 바인딩하거나 state를 초기화하는 작업이 없으면 생성자를 구현하지 않아도 됨
- 생성자 함수를 사용할 때는 __반드시 super(props) 함수를 호출__하여 부모 클래스의 생성자를 호출해야함
3. componentDidMount 함수
- 클래스 컴포넌트가 처음으로 화면에 표시된 이후(render 함수 처음 한번 호출 이후)에 이 함수가 호출됨
- 컴포넌트가 화면에 처음 표시된 후 한번만 호출되므로 ajax를 통한 데이터 습득이나 다른 자바스크립트 라이브러리와 연동을 수행할 때 주로 사용됨
- 따라서 이 함수에서는 this.setState를 직접 호출할 수 있으며 ajax를 통해 서버로부터 전달받은 데이터를 this.setState를 사용하여 State에 설정하기 가장 적합함
4. componentWillUnmount 함수
- 해당 컴포넌트가 화면에서 완전히 사라진 후 호출되는 함수
- 보통 componentDidMount에서 연동한 자바스크립트 라이브러리 해지 또는 setTimeout, setInterval 등의 타이머를 clearTimeout, clearInterval 을 사용하여 해제할 때 사용됨
- [주의] this.State를 호출하면 갱신하고자 한 컴포넌트가 사라진 후이기에 warning 발생
5. componentDidUpdate 함수
- 컴포넌트가 처음 화면에 표시될 때는 실행되지 않으나 Props 또는 State 가 변경되어 화면이 갱신될 때마다 render 함수가 호출된 후 호출됨
- getSnapshotBeforeUpdate 함수와 함께 사용하여 스크롤을 수동으로 고정할 때 사용되기도 함
- [주의] render 함수와 마찬가지로 이 함수는 State 값이 변경될 때도 호출되므로 this.setState 를 직접 호출하면 무한루프
잘 사용하지 않는 생명주기 메서드
6. shouldComponentUpdate 함수
- 클래스 컴포넌트는 기본적으로 Props 또는 State가 변경되면 리렌더링되어 화면을 다시 그리게 됨
- Props 또는State의 값이 변경되었지만, 다시 화면을 그리고 싶지 않으면 이 함수를 사용하여 렌더링을 제어 가능함
- 이 함수에서 false 를 반환하면 화면을 다시 그리는 리렌더링을 하지 않음
- 리렌더링이 리액트 컴포넌트에서 가장 비용이 많이 드는 부분이기에 화면 렌더링을 최적화하기 위함
- 이 함수를 통해서 데이터를 비교하고 불필요한 리렌더링을 방지 가능
7. getDerivedStateFromProps 함수
- 부모로부터 받은 Props와 State를 동기화할 때 사용됨
- 시간의 흐름에 따라 변하는 Props에 State가 의존하는 드문 사용 례를 위해 존재함
- 부모로부터 받은 Props로 State에 값을 설정하거나 State값이 Props에 의존하여 결정될 때 이 함수를 사용
- 이 함수에서는 State에 설정하고 싶은 값을 반환하게 됨
- 동기화할 State가 없으면 null을 반환하면 됨
- 컴포넌트가 생성될 때 한번 호출되며 Props와 State를 동기화해야 하므로 Props가 변경될 때마다 호출됨
8. getSnapshotBeforeUpdate 함수
- Props 또는State가 변경되어 화면을 다시 그리기 위해 render 함수가 호출된 후 실제로 화면이 갱신되기 바로 직전에 이 함수가 호출됨
- 이 함수에서 반환하는 값은 componentDidUpdate의 세 번째 매개변수(snapshot)로 전달됨
- 많이 사용되지는 않지만, 화면을 갱신하는 동안 수동으로 스크롤 위치를 고정해야 하는 등에 사용가능
- [주의] getSnapshotBeforeUpdate 선언 후 반환값을 반환하지 않거나 이 함수를 선언 후 componentDidUpdate를 선언하지 않은 경우 warning 발생
Error Boundary
자식 컴포넌트 트리 내의 자바스크립트 오류를 감지하고, 해당 오류를 기록하며, 충돌이 발생한 컴포넌트 트리를 대신하여 대체 UI를 표시하는 React 컴포넌트
9. getDerivedStateFromError 함수
- 하위의 자손 컴포넌트에서 오류가 발생했을 때 호출됨
- 매개변수로 오류를 전달받고, 갱신된 state 값을 반드시 반환해야 함
10. componentDidCatch 함수
- render 함수에서 JSX 문법을 사용하여 컴포넌트 렌더링하는 부분에서는 발생하는 에러를 처리하기 위해 try-catch 사용 불가
- render 함수의 JSX에서 발생하는 에러를 예외 처리할 수 있게 도와주는 함수
- render 함수의 return 부분에서 에러가 발생하면 componentDidCatch 함수가 실행된다.
