리액트의 컴포넌트는 생명주기를 가지고 있다.
컴포넌트의 수명은 페이지가 랜더링 되기 전 준비 과정 ~ 페이지가 사라질때까지이다.
컴포넌트를 처음 랜더링 할 때 어떤 작업을 처리하거나, 컴포넌트를 업데이트 하기 전후에 대한 어떤 작업을 처리해야 할 때 라이프 사이클 메서드를 활용한다.
✔ 라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용가능하다.
(함수형 컴포넌트 - Hooks 사용)
DOM이 생성되고 나서 웹 브라우저 상에 요소들을 나열하는 과정
컴포넌트를 생성하기 위해 호출되는 4가지의 리액트 내장 메서드
constructor
: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드,getDerivedStateFromProps
: props에 있는 값을 state에 넣을 때 사용하는 메서드render
: UI를 렌더링componentDidMount
: 컴포넌트가 웹 브라우저상에 나타난 후에 호출하는 메서드컴포넌트가 업데이트 될 때 실행되는 메서드들
업데이트 되는 경우 : props가 바뀔때, state가 바뀔때, 부모 컴포넌트가 리렌더링 될 때, this.forceUpdate로 강제로 렌더링을 트리거할 때
getDerivedStateFromProps
: 마운트 과정에서도 호출. 업데이트가 시작하기 전에도 호출. props의 변화에 따라 state값에 변화를 주고 싶을 때 사용shouldComponentUpdate
: 컴포넌트가 렌더링을 할 것인지 결정하는 메서드(Boolean 값 반환)render
: 컴포넌트를 리렌더링getSanpshotBeforeUpdate
: 컴포넌트 변화를 DOM에 반영하기 직전에 호출하는 메서드componentDidUpdate()
와 반드시 함께 사용해야 한다.componentDidUpdate
: 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드컴포넌트를 DOM에서 제거하는 과정
componentWillUnmount
: 컴포넌트가 웹 브라우저 상에서 사라지기 전에 호출하는 메서드render( )
필수 메서드로 컴포넌트의 생김새를 결정하는 함수이다.
this.props와 this.state안에 접근할 수 있고, 리액트 요소를 반환한다.
✔ 이벤트 설정이 아닌 곳에서 setState를 사용하면 안됨
✔ 브라우저의 DOM에 접근해서도 안됨
➡ DOM의 정보를 가져오거나 state에 변화를 줄 때 : componentDidMount 처리
constructor ( )
컴포넌트 생성자 메서드
초기 state 설정
getDerivedStateFromProps( )
props로 받아온 값을 state로 업데이트 시키는 용도 (ver.16.3 이상 적용)
컴포넌트가 마운트 될 때, 업데이트 될 때 호출
componentDidMount( )
첫 렌더링을 마친 후 실행
비동기 작업을 처리할 때 사용
shouldComponentUpdate ( )
props or state 변경 시 재렌더링 여부를 묻는 메서드
default값은 true이며, false값을 반환할 경우 업데이트 중지
- 현재 props, state :
this.props
,this.state
- 새로 설정될 props, state:
nextProps
,nextState
getSnapshotBeforeUpdate ( )
render에서 반영된 결과물이 브라우저에 실제로 반영되기 직전 호출
ex. 업데이트 하기 전의 현재 스크롤바의 위치 유지getSnapshotBeforeUpdate(prevProps, prevState) { if(prevState.array ! == this.state.array){ const { scrollTop, scrollHeight } = this.lis return { scrollTop, scrollHeight }; } }
componentDidUpdate ( prevProps, prevState, snapshot) { ... }
업데이트가 끝난 직후 실행
이전에 가졌던 데이터에 접근 가능(prevProps, prevState 이용)
componentDidCatch ( error, info) { .. }
렌더링 도중 에러가 발생했을 때, 오류 UI를 보여주는 메서드
- error: 어떤 에러가 발생했는지 알려준다. (단, this.props.children으로 전달되는 컴포넌트에서 발생하는 에러만 잡아준다.)
- info : 어디에 있는 코드에서 오류가 발생했는지 알려준다.