라이프 사이클
컴포넌트의 수명은 페이지에 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝난다.
어떤 작업을 업데이트 전후로 작업을 처리하거나 , 불필요한 업데이트 방지를 위해 필요
lifecycle methods 는 클래스형 컴포넌트에서만 사용가능
- Will 접두사
어떤 작업을 작동하기 전에 실행
- Did 접두사
어떤 작업을 작동한 후에 실행
모든 라이프사이클은 mount, update, unmount 카테고리로 나눈다
MOUNT
DOM이 생성되고 웹 브라우저상에 나타나는 것
constructor: 컴포넌트를 새로 만들때마다 호출하는 클래스 생성 methodgetDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용render: 우리가 준비한 UI를 렌더링하느 메서드componentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출
UPDATE
컴포넌트는 다음과 같은 총 네가지 경우에 업데이트된다
props가 변할 때state가 변할 때 (setState)- 부모 컴포넌트가 리렌더링될 때
this.forceUpdate로 강제로 렌더링을 트리거할 때
update 종류
getDerivedStateFromProps: 마운트과정에서도 호출되며 업데이트가 시작되기 전에도 호출된다. props 변화에 따라 state값에도 변화 주고 싶을 때shouldComponentUpdate: 컴포넌트가 리렌더링을 할지말지 결정- true 일 경우 다음 라이프 사이클 메서드를 계속 실행
- false 일 경우 작업을 중지, 컴포넌트가 리렌더링되지 않는다. 특정 함수에서
this.forceUpdate( )함수를 호출하면 이 과정을 생략하고 render 함수를 호출한다.
render: 컴포넌트를 리렌더링getSnapshotBeforeUpdate: 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출componentDidUpdate: 컴포넌트의 업데이트 작업이 끝난 후 호출
UNMOUNT
컴포넌트를 DOM에서 제거하는 것
componentWillUnmount: 컴포넌트가 브라우저상에서 사라지기 전 호출
메서드 살펴보기
render()- 컴포넌트 모양새를 정의
- 유일한 필수 메서드
this.props와this.state에 접근할 수 있으며, react 요소를 반환- 요소 = 태그, 컴포넌트 ..
- 이벤트 설정이 아닌 곳에서
setState를 사용하면 안된다. - DOM 정보나 state의 변화를 주고 싶을 땐
componentDidMount
constructor- 컴포넌트의 생성자 메서드로, 초기 state를 정할 수 있다.
getDerivedStateFromProps- props로 받아온 값을 state에 동기화 시키는 용도
componentDidMount- 컴포넌트 만들고, 첫 렌더링을 다 마친 후 실행
- 이 안에서 다른 js 라이브러리 , 프레임워크 함수를 호출하거나 이벤트 등록, 네트워크 요청 등의 비동기 작업을 처리한다.
shouldComponentUpdate- props 또는 state 변경했을 때, 리렌더링을 시작할지 여부를 지정
- 기본값은 true, false 반환하면 업데이트 중지
this.props,this.state로 접근 가능nextProps,nextProps로 새로 생성될 값들에 접근 가능
getSnapshotBeforeUpdate- render에서 만들어진 결과물이 브라우저에 실제로 반영되기전 호출
componentDidUpdate- 리렌더링을 완료한 후 실행
- 업데이트 후이므로, DOM 관련 처리 해도 괜찮다.
preProps,preState로 이전 데이터에 접근 가능getSnapshotBeforeUpdate의 snapshot 값 전달 받을 수 있다.
componentWillUnmount- 컴포넌트를 DOM에서 제거할 때 실행
componentDidMount에서 등록한 이벤트, 생성한 DOM을 제거해야한다
componentDidCatch- 컴포넌트 렌더링 도중에 에러가 발생 시, 오류 UI를 보여 준다.
예시
- 추후 작성 예정
FE - devp