React Lifecycle 제어하기

리엑트의 Strict Mode

리액트에서 제공하는 검사도구이다. 렌더링 시 함수를 2번 호출 한다.이유는 재렌더링하여 컴퍼넌트의 값이 동일한지 확인 할 수 있다.

React Lifecycle

1. 컴퍼넌트 탄생(Mount) ex) 초기화 작업 화면에 나타는 것
2. 컴퍼넌트 변화(Update) ex) 예외처리 작업 업데이트 리렌더시 상태변화 or 부모 컴퍼넌트 리렌더링시 or 컴퍼넌트 리렌더링시
3. 컴퍼넌트 제거(UnMount) ex)메모리해제 화면에서 사라진다.

Class 컴퍼넌트 형태일 때 사용가능한 메서드

React Component Lifecycle Methods
Mount -> Update -> Unmount

ComponentDidMount -> ComponentDidUpdate -> ComponentWillUnmount

함수형 컴퍼넌트 형태일 때 사용하기 위해서는?

React hooks을 이용한다.
use 라는 말이 들어간 것이 hooks이다. useState,useEffect,useRef,

useEffect를 사용하여 제어해 보자

useEffect(()=>{
	console.log('mount');
	},[]);	// 마운트 되는 시점에서 실행된다.
useEffect(()=>{
	console.log('didupdate');
	}); // 업데이트 되는 시점에서 실행된다.
useEffect(()=>{
  return ()=>console.log('unmount');// 언마운트 되는 시점에서 실행된다.
}