[React] React Life-Sycle ( 클래스형, 함수형), 리액트 라이프 사이클 알아보기

 

기술면접스터디를 진행하면서 발표자료 정리한것을 올려본다.

마운트란?

• DOM 객체가 생성되고 컴포넌트가 브라우저에 나타나는 것

언마운트란?

• 화면의 렌더링된 컴포넌트를, 삭제하기 까지의 과정
• 애플리케이션에서 리소스를 확보하기위해 사용하지 않는 컴포넌트의 리소스를 회수하기위해

---

클래스형 컴포넌트

언제 리렌더링이되는지?

• 새로운 props값을 받았을때
• state값이 변경되었을때
• 부모 컴포넌트가 리렌더링됐을때 (props값이 변경되지않아도 부모컴포넌트가 리렌더링되면 자식컴포넌트도 리렌더링됨)
• forceUpdate가 실행될때 (권장하지않음, state와 props외의 값에 의존하기때문)
  • forceUpdate: props 나 state 가 아닌 다른 값이 변경되었을 때 리렌더링을 하고싶을때사용

 

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

React Lifecycle Methods diagram

Mount

아래 메서드들은 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출된다.

1. constructor():
   • 리액트 컴포넌트가 마운트되기전 실행
   • state에 초기값을 할당하거나 클래스 메소드를 정의할때만 사용 ( props로 초기값 할당 금지)
   • steState사용금지
2. getDerivedStateFromProps()
   • props 로 받아온 것을 state 에 넣어주고 싶을 때 사용
   • render():
     • 메서드는 클래스 컴포넌트에서 반드시 구현돼야하는 유일한 메소드
     • props와 state값을 활용해서 react element들을 반환함
3. render메소드 호출이후 반환된 element들로 react가 DOM, refs를 업데이트한다.
4. componentDidMount():
   • 컴포넌트 출력물이 렌더링 된 이후에 실행 되는 메소드
   • 주로 네트워크 요청 담당

Update

props 또는 state가 변경되면 리-렌더링된다. 아래 메서드들은 컴포넌트가 리-렌더링될 때 순서대로 호출된다.

1. getDerivedStateFromProps():
   • 위와 설명동일
2. shouldComponentUpdate():
   • props 또는 state가 새로운 값으로 갱신되어서 렌더링이 발생하기 직전에 호출
   • 오직 성능최적화를 위한 메소드
   • 초기 렌더링 또는 forceUpdate()가 사용될 때에는 호출되지 않는다.
   • 초기값은 true이다 false이면 렌더링이되지않는다.
3. render():
   • 위와 설명동일
4. componentDidUpdate()
   • 리-렌더링이 발생한 직후에 호출된다. 이 메서드는 최초 렌더링에서는 호출되지 않는다.
   • 컴포넌트가 리-렌더링되었을때 DOM을 조작할때 사용
   • shouldComponentUpdate()가 false를 반환하면 실행하지않음

Unmount

1. componentWillUnmount():
   • 컴포넌트가 마운트 해제되어 제거되기 직전에 호출된다.
   • 해당 메소드가 실행되면 컴포넌트가 언마운트되고 재 마운트되지않는다

---

함수형 컴포넌트

render의 역할을 함수가 컴포넌트를 return하는것으로 대체

componentDidMount, componentDidUpdate, componentWillUnmount

의 기능을 하는것이 useEffect

리렌더링 조건은 클래스형과 메소드를 제외하고 동일하다.

• 새로운 props값을 받았을때
• state값이 변경되었을때
• 부모 컴포넌트가 리렌더링됐을때 (props값이 변경되지않아도 부모컴포넌트가 리렌더링되면 자식컴포넌트도 리렌더링됨)

 

https://wavez.github.io/react-hooks-lifecycle

React hooks lifecycle diagram

Mount

1. 함수 내부를 실행시킨다.
2. 함수 내부의 변수들을 초기화한다.
3. return에 미리 구현해놓은 JSX를 실행시킨다.
4. useEffect가 작동한다.
   • 의존성 배열이 없을경우: 화면이 렌더링 된후 실행이되며 리렌더링 될때마다 실행된다.
   • 의존성 배열이 빈배열 [] 일경우: 화면이 렌더링 된 이후 한번만 실행된다.
   • 의존성 배열에 값이 있을경우: 화면이 렌더링 된 이후 실행되고 해당 값이 변경 되었을경우에만 실행된다.

Update

• state의 값이 변경되거나 props의 값이 변경, 부모컴포넌트가 리-렌더링될때 리-렌더링한다.

Unmount

• 컴포넌트가 언마운트될때 실행된다. useEffect내부에 cleanup 함수가 작성되어있다면 이때 실행한다.
• 클린업 함수는 언마운트될때, 의존성배열에 값이있으면 값이있을때마다 실행된다.

 

참고링크

https://ko.legacy.reactjs.org/docs/react-component.html#constructor

React.Component – React

https://react.dev/reference/react/Component

Component – React