React - 생명주기

모든 애플리케이션은 생명주기를 가지고 있고 리엑트도 생명주기를 가지고 있다.
리엑트의 생명주기는 크게 [초기화-마운트, 업데이트, 언마운트]로 이루어져있다.

위의 그림처럼 생명주기를 가지고 있는데, 사진을 잘 살펴보면 마운트에는
componentDidMount, 업데이트에는 componentDidUpdate, 언마운트에는 componentWillUnmount가 존재한다.

사실 이 3개를 사용해야하지만, 함수형 리엑트에서는 더 이상 사용할 수 없고 이것은 class형 리엑트 컴포넌트에서만 사용했던 방식이다. 앞서 설명하였던 state와 Ref도 함수형 리엑트 컴포넌트에서는 사용불가했던 것인데, 리엑트 Hooks가 개발되면서 앞에 use를 붙혀 사용할 수 있게 된 것이다.

그럼 과연 각 생명주기에 필요한 작업을 어떻게 시킬 수 있을 까

해답은 바로 React라이브러리 useEffect를 사용하면 된다.
useEffect의 선언 방식은 전에 다루었던 useState, useRef과 다르지 않다.

import {useEffect} from 'react';


//mount
useEffect(()=>{
	console.log('mount');
}, []);

useEffect(()=>{
  console.log('update');
});

useEffect(()=>{
  console.log('count update');
}, [count]);

useEffect(()=>{
  console.log('mount');
  return ()=>{
    console.log('unmount');
  };
},[]);

위 코드 방식 처럼 생명 주기에 따라서 조금씩 형태가 변화 하는 것을 확인 할 수 있다.

mount를 사용할 경우에는 useEffect를 선언해주고 내부에 콜백함수와, 빈 리스트를 하나 넣어 주면된다. 빈 리스트는 dependency array라고 하며 업데이트 생명주기에서 사용한다.

update를 사용할 경우는 2가지 가 존재하는데 전체 컴포넌트가 업데이트 될 때 이벤트를 캐치할 때에는 dependency array를 넣어주지 않고 그대로 사용하면 되고, 특정 요소나, 변수의 업데이트를 모니터링 하고 싶은 경우는 해당 배열에 값을 넣어 주면 된다.

마지막으로 unmount는 객체가 더이상 화면에 보이지 않을 경우 사용하는 것으로 마운트 하는 방식에 return을 사용하여 콜백함수 내부에 unmount되었을 때의 추가 로직을 선언 해주면된다.