React Hooks : useEffect 사용법

.라이프사이클을 대체하는 훅인 useEffrect 에 대해서 알아보겠습니다 .

class 컴포넌트 때는 라이프사이클이 컴포넌트에 중심이 맞춰져 있었습니다 . 클래스가 마운트 되려할 때 (CommponentWillMount) , 마운트 되고 나서 (componentDidMount) ,업데이트 되었을때 , (componentUpdate) , 언마운트 (componentWillUnmount) 될때 실행 됐죠 .

함수 컴포넌트에서는 조금 다르게 적용합니다 . 특정 데이터에 대해서 라이프 사이클이 진행됩니다 . 데이터는 여러 개 일 수 있으므로 , 클래스 컴포넌트에서는 componentWillMount, componentDidMount ,componentDidUpdate ,componentWillUnmount 를 컴포넌트당 한 번 씩만 사용했다면 , useEffect 는 데이터의 개수에 따라 여러 번 사용하게 됩니다 .

예를 들어 hidden 이라는 state 가 있다고 칩시다 . hidden 이 바뀌는 것에 따라서 라이프사이클을 정할 수 있습니다 .

useEffect(() => {
	console.log(`hidden changed`);  
},[hidden]);

위 코드는 컴포넌트가 첫 렌더링 될때 한 번 실행되고 그 다음부터는 hidden 이 바뀔 때 마다 실행됩니다. 즉 , componentDidMount 와 componentDidUpdate 가 합쳐진 셈입니다.

componentWillUnmount 의 역할도 담당할수가 있는데요. return으로 함수를 제공하면 됩니다 .

useEffect(() => {
	console.log('hidden Change');
    return () => {
	console.log('hidden 이 바뀔 예정입니다. ');
	};
},[hidden]);

데이터의 라이프 사이클이 하나로 합쳐진 셈입니다. 이것을 활용해 setTimeout한 것을 return 에서 clearTimeout 할 수도 있습니다.

데이터가 여러개 라면 각각의 데이터에 useEffect 를 적용하면 됩니다.

useEffect(() => {
	console.log('hidden changed');
}[hidden]);
useEffect(() => {
	console.log('shown change');
},[shown]);

componentWillMount 와 componentWillUpdate 는 없어졌으므로 useEffect 에 해당하는 것은 없습니다 .

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

반대로 컴포넌트가 리렌더링 될 때마다 실행하게 할 수도 있습니다. 두 번째 배열을 아예 안 넣으면 데이터와 관련 없이 리렌더링 시마다 실행됩니다.

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

만약 componentDidUpdate의 역할만 하고 싶다면 어떻게 할까요? useEffect는 기본적으로 componentDidMount와 componentDidUpdate의 역할을 동시에 수행하므로 componentDidMount의 역할을 제거(또는 무시)해야 합니다. 이를 위해서는 useRef라는 훅이 필요합니다.