라이프 사이클
모든 리액트 컴포넌트에는 라이프사이클이 존재합니다. = 수명 주기
컴포넌트의 수명은 페이지에 렌더링하기 전부터 페이지에서 사라질 때 끝납니다.
라이프 사이클은 클래스 형태에서만 사용이 가능합니다.
hooks 를 사용한 방법은 다음 챕터에서 보겠습니다.
카테고리는 크게 세가지로 나눕니다.
mount
DOM이 생성되고 브라우저에 컴포넌트가 나타나는 것입니다.
이 때 호출하는 메서드는 다음과 같습니다.
-
constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
-
getDerivedStateFromProps : props 에 있는 값을 state에 넣을 때 쓰는 메서드
-
render : 우리가 준비한 UI를 렌더링하는 메서드
-
componentDidMount : 컴포넌트가 웹 브라우저에 나타난 후 호출하는 메서드
update(리렌더링)
컴포넌트 정보를 업데이트 합니다. == 리렌더링
컴포넌트가 업데이트 되는 경우는 아래와 같습니다.
- props가 바뀔 때
- state가 바뀔 때
- 부모 컴포넌트가 리랜더링될 때
- this.forceUpdate로 강제로 렌더링을 트리거할 때
이렇게 업데이트가 되면 다음 메서드들을 호출합니다.
-
getDerivedStateFromProps : 위와 동일한데, 업데이트가 시작하기 전에도 호출됩니다.
-
shouldComponentUpdate : 컴포넌트가 리렌더링을 해야할지 결정하는 메서드
-
render : 컴포넌트를 리랜더링 합니다.
-
getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 바로 직전에 호출합니다.
-
componentDidUpdate : 컴포넌트 업데이트 작업이 끝난 후 호출합니다.
unmount : 페이지에서 컴포넌트가 사라짐
컴포넌트를 DOM에서 제거하는 것입니다.
구조는 간단합니다.
- componentWillUnmount : 컴포넌트가 웹 브라우저 상에서 사라지기 전 호출
라이프사이클 메서드
라이프 사이클 메서드는 총 9가지 입니다.
- 접두사
- Will : 어떤 작업을 작동하기 전에 실행
- Did : 어떤 작업을 작동한 후에 실행
render
컴포넌트 모양새를 정의하며 리액트 요소를 반환하는 유일한 필수 메서드입니다.
이 메서드 안에서 this.props와 this.state에 접근할 수 있습니다.
주의
이 메서드 안에서 setState를 사용하면 안됩니다.
브라우저의 DOM에 접근해서도 안됩니다.
저 작업들은 componentDidMount에서 처리해야 합니다.
constuctor
컴포넌트의 생성자로, 컴포넌트를 처음 만들 때 실행됩니다.
초기 state 값을 정의합니다.
getDerivedStateFromProps
props로 받아온 값을 state에 동기화시키는 용도로 사용합니다.
컴포넌트 마운트,업데이트 시 호출됩니다.
componentDidMount
컴포넌트를 다 만들고, 첫 렌더링 이후 실행됩니다.
이 안에서 JS 라이브러리, 프레임워크의 함수 호출, 비동기 작업들을 처리합니다.
shouldComponentUpdate
이건 props,state를 변경했을 때, 리렌더링을 시작할지 여부를 알려줍니다.
- true일 경우, 다음 라이프 사이클이 실행됩니다. (기본값)
- false일 경우, 작업을 중지하고 컴포넌트가 리렌더링 되지 않습니다.
성능을 최적화할 때 유용합니다.
리렌더링을 방지하게 false로 적어서 사용합니다.
getSnapshotBeforeUpdate
render로 만들어진 결과물이 브라우저에 뜨기 전에 호출됩니다.
주로 업데이트하기 직전의 값을 참고할 일이 있을 때 활용됩니다.
componentDidUpdate
리렌더링을 완료한 후 실행됩니다. DOM 관련 처리를 해도 되는 곳입니다.
여기서도 이전에 데이터에 접근할 수 있습니다.
componentWillUnmount
컴포넌트를 DOM에서 제거할 때 실행됩니다.
보통 이벤트,타이머, 직접 생성한 DOM을 제거 작업을 합니다.
componentDidCatch
컴포넌트 렌더링 도중 에러가 발생하면 오류 UI를 보여줄 수 있게 합니다.
