[React] React LifeCycle

LifeCycle (수명주기)

• 리액트 컴포넌트에는 라이프 사이클(생명 주기)이 존재
• 컴포넌트의 수명 : 페이지에 렌더링 되기 전 준비 과정에서 시작하여 페이지에서 사라질 때 끝남
• 클래스형 컴포넌트에서만 사용 가능
• 함수형 컴포넌트의 경우 Hooks를 사용하여 제어

---

라이프 사이클 메서드

• 라이프 사이클 메서드는 9개의 종류를 가지며, 컴포넌트 클래스에서 덮어써 사용 가능
• Will- : 작업을 작동하기 전 실행되는 메서드
• Did- : 작업을 작동한 후 실행되는 메서드
• componentDidCatch
  • v16이후부터 도입된 메서드로, 렌더링 도중 오류 발생 시 오류 UI를 보여주도록 처리
    
    
  • 자신에게 발생된 에러는 잡을 수 없으며 this.props.children으로 전달되는 컴포넌트에서 발새한 에러만 추출 가능

compoenetDidCatch(error,info) {
		this.setState({
			error:true
		})
		console.log({error, info});
	}

 

---

리액트 컴포넌트의 생명주기

• 리액트 컴포넌트의 생명주기는 마운트, 언마운트, 업데이트로 나뉨

Mount (마운트)

• DOM이 생성되고 웹 브라우저 상에 나타나는 것

마운트 시 호출 메서드

• constructor 
  • 컴포넌트를 새로 만들 때마다 가장 먼저 호출하는 클래스 생성자 메서드
  • 초기 state 설정 가능
• getDeriveStateFromProps 
  • v16.3 이후부터 사용 가능
  • props로 받아 온 값을 state에 동기화 하기위해 사용
  • 컴포넌트가 마운트,업데이트 될 때 호출
• render
  • UI를 렌더링하는 메서드로 라이프 사이클 필수 메서드
  • this.props, this.state에 접근 가능하며 리액트 요소를 리턴
  • 요소는 태그나 컴포넌트가 될 수 있음
  • null, false 리턴 시 화면에 아무것도 나타나지 않게 처리
  • 이벤트 설정이 아닌 곳에서 setState 를 사용하지 않아야 하고, 브라우저의 DOM에 접근해서도 안됨
  • DOM 정보를 가져오거나 state에 변화를 주는 경우 componentDidMount 메서드에서 처리
• componentDidMount 
  • 컴포넌트를 만들고 웹 브라우저 상에서 나타난 후 호출하는 메서드
  • 자바스크립트 라이브러리나 프레임워크의 함수를 호출하거나 이벤트 등록, setTimeout, setInterval, 네트워크 요청 등 비동기 작업 처리

---

 

 

컴포넌트 업데이트 요인

1. props 변경

• 부모 컴포넌트에서 넘겨주는 props가 바뀔 때 컴포넌트의 렌더링 발생

2. state 변경

• 컴포넌트가 가지고 있는 state가 setState를 통해 업데이트 되는 경우

3. 부모 컴포넌트 리렌더링

• 자식에게 할당 된 state가 변경되지 않아도, 자신의 state가 변경되지 않아도 부모 컴포넌트가 리렌더링되는 경우 자식 컴포넌트도 같이 리렌더링 됨

4. this.forceUpdate로 강제 렌더링 트리거 시

컴포넌트 업데이트 시 호출되는 메서드

• getDerivedStateFromProps  : 마운트 과정에서 호출되며, 업데이트가 시작하기 전에도 호출됨. props의 변화에 따라 state값에도 변화를 주고 싶은 경우 사용
• shouldComponentUpdate :
  • props나 state 변경시 컴포넌트가 리렌더링 시작 여부를 결정하는 메서드
  • 반드시 true, false 값을 반환해야함 (기본값 : true)
  • true : 메서도 계속 실행 / false : 작업 중지 되어 컴포넌트가 리렌더링 되지 않음
  • 특정함수에서 this.forceUpdate() 함수 호출 시 과정을 생략하고 render 함수를 바로 호출
  • 메서드 안에서 현재 props와 state는 this.props와 this.state로 접근하고, 새로 설정되는 props와 state는 nextProps와 nextState로 접근 가능
• render : 컴포넌트를 리렌더링
• getSnapshopBeforeUpdate 
  • v16.3이후 사용 가능 메서드
  • 컴포넌트 변화를 render에서 만든 후 브라우저 DOM에 반영하기 바로 직전에 호출하는 메서드
  • 리턴값은 componentDidUpdate에 snapshor값으로 전달받을 수 있음
  • 스크롤 바 위치 유지와 같은 업데이트 바로 직전 값을 참고해야하는 경우 활용
• componentDidUpdate
  • 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드
  • 업데이트가 끝난 이후이므로 DOM 관련 처리 가능
  • prevProps나 preState를 사용하여 이전 데이터에 접근 가능
  • getSnaphotBeforeUpdate의 리턴 값이 있을 경우 여기서  update값을 전달 받을 수 있음

---

Unmount (언마운트)

• 컴포넌트를 DOM에서 제거
• 메서드
  • componentWillunmount
    • 컴포넌트가 브라우저상에서 사라지기 전 호출하는 메서드로 컴포넌트 DOM 제거 시 사용
    • componentDidMount에서 등록한 이베트, 타이머, 직접 생성한 DOM이 있을 경우 제거 필요

---

 Sources

• 라이프사이클 기본 예제