[7] 라이프 사이클

라이프사이클이란

리액트 컴포넌트의 라이프사이

 

useEffect 사용하기

React 컴포넌트의 사이드 이펙트 : 컴포넌트의 동작에 따라 파생되는 여러 효과

useEffect(()=>{}, [])

 

useEffect로 라이프 사이클 제어하기

//1. 마운트 : 탄생 -> 최초1회 실행
useEffect(()=>{}, []);

//2. 업데이트 : 변화, 리렌더링
useEffect(()=>{});

//2-1. 최초 실행 무시 업데이트
const isMount = useRef(false);

useEffect(()=>{
  if(!isMount.current){
    isMount.current = true;
    false;
  }
  console.log("update");
});

//3. 언마운트 : 죽음
useEffect(()=>{
  //useEffect의 callback 함수가 반환하는 함수
  //: 클린업, 정리함수 - useEffect 종료되는 시점(unmount)에 실행
  return () => {
  };
}, []);

 

React 개발자 도구

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko

React Developer Tools - Chrome 웹 스토어