[React] LifeCycle(함수형,클래스형)

function LifeCycle

함수형 컴포넌트 LifeCycle

 

useEffect

• side-effect를 따로 관리하여 컴포넌트가 최대한 순수 함수를 유지할 수 있도록 도와주는 함수
• useEffect()는 랜더링이 모두 끝난 다음에 실행된다.

가용 범위

• useEffect(()=>{}) : 랜더링이 될 때 마다 실행
• useEffect(()=>{}, []) : 최초 랜더링(마운트)할 때만 실행
• useEffect(()=>{}, [state]) : 특정 컴포넌트 변경 시 실행

useCallback()

• useCallback은 실행할 문장 또는 변화를 주는 기능을 제어하기 위해서 사용한다.

class LifeCycle

 

클래스형 컴포넌트 LifeCycle

1. Mount: 페이지에 컴포넌트가 나타나는 것(빈 화면에서 -> 컴포넌트가 나타나는 것)

 

• Constructor: 새로운 컴포넌트를 생성할 때마다 실행된다. 
• getDerivedStateFromProps: props를 state에 넣을 때 사용한다.
• 컴포넌트가 마운트 될 때와 업데이트 될 때 실행된다.

↓

• render: 준비해놓은 UI를 랜더링 할 때 사용된다.

↓

• componentDidMount: 페이지에 컴포넌트가 나타난 후 실행된다.

2. Update

• props 값이 변화가 있을 때, state 값이 변화가 있을 때, 부모 컴포넌트가 리랜더링 될 때 실행된다.
• forceUpdate()를 사용하여 강제로 랜더링을 할 때 실행된다.
• getDerivedStateFromProps: props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용한다.

↓

• shouldComponentUpdate: true를 리턴 시 다음 라이프사이클 메소드가 계속 실행하게 해준다.
• 즉, false를 리턴할 시 작업을 중지시킨다.

↓

• render: 변화를 감지하여 리랜더링 시킨다.

↓

• getSnapShotBeforeUpdate: 컴포넌트 업데이트 직전에 실행된다.

↓

• componentDidUpdate: 컴포넌트 업데이트 후 실행되는 함수

3. unMount: 컴포넌트가 페이지에서 사라지는 것

• componentWillUnmount: 컴포넌트가 페이지에서 사라지기 직전에 실행된다.

 

★ 

• 함수형 컴포넌트가 클래스형 컴포넌트 보다 선언하기 편하다.
• 클래스형 컴포넌트가 함수형 컴포넌트보다 메모를 더 차지한다.
• React에서는 클래스형 컴포넌트보다 함수형 컴포넌트를 권장한다.
• 프로젝트 빌드 후 배포할 때 함수형 컴포넌트가 파일크기가 더 작다.