[React] useEffect

`useEffect` 란 무엇인가? 

바로 이전 글에서 React의 생애주기 (Life Cycle) 를 살펴봤는데요

이제는 그 생애 주기 속에서 일어나는 사이드 이펙트(Side Effect)를 제어하는 방법인 `useEffect` 에 대해 알아봅시다.

 

사이드 이펙트란? :  쉽게 말해서 렌더링 외에 발생하는 모든 행동이라 보면 됩니다.

• 서버에 데이터 요청하기 ( API 요청 )
• 콘솔에 로그 찍기
• DOM에 직접 접근하기
• 이벤트 리스너 등록/해제 하기
• 타이머 설정 및 정리하기

이런 것들이 모두 다 사이드 이펙트라고 볼 수 있다.

 

 

`useEffec` 는 그럼 뭘 할까요 ? 

바로 : 사이드 이펙트를 실행하는 함수 라고 보면 됩니다. 

이 함수는 컴포넌트의 생애 주기 ( Mount, Update, Unmount ) 를 따라 실행됩니다.

 

useEffect 기본 사용 방법

1. 우선 훅이니, `import { useEffect } from "react";` 임포트해서 사용합니다!

2. useEffect는 두개의 인자를 받아서 사용합니다. 첫 번째 인자는 콜백 함수 , `useEffect( ( ) => { } ) 

3. 두 번째 인수는 배열을 받는 형태입니다, [ ] (의존성 배열 dependency array, deps라고도 합니다).

 

의존성 배열이란 ?

: `[ ]` <= 이 배열 안에 지켜보고 싶은 값들을 넣습니다. 

해당 배열안에 들어있는 값의 영역이 변경될 때 마다 콜백함수를 실행시킨다고 얘기할 수 있습니다.

`[ ]` (deps) 에는 값을 여러 개 넣어도 동작합니다!

 

만일 의존성 배열이 빈 배열이면 ? (Mount)

Mount 시에만 동작하고 아무런 동작을 하지 않게됩니다. 

 

만일 의존성 배열을 생략한다면 ? (Update)

Mount 시에 동작하고 update(컴포넌트 리렌더링)될 때마다 동작하게 됩니다.

근데 여기서, Mount 시에 동작은 제외하고 update된 후에만 동작하길 원한다면 

• `useRef` 를 사용해주면 됩니다
  `const isMount = useRef(false);` 로 isMount의 초깃값을 설정해 놓고
• `if ( ! isMount.current) { is Mount.current = true; return }` 해주면 된다.
  그렇게 되면 강제로 return 되어 밑의 코드가 실행되지 않습니다

Clenup, 정리함수 (Unmount)

const Even = () => {
	useEffect(()=> {
    	// 클린업, 정리함수
        return () => {
        	console.log("unmount")
      };
    }, []);
    
    return <div> 짝수입니다 </div>;
 };

 

useEffect가 끝날때 실행이 됩니다,

useEffect는 Mount가 될때 실행이 되고 Unmount될때 정리함수를 호출하게 됨.

 

 

 

사용하다가 보면, 

 

그냥 useEffect 말고 이벤트 핸들러에 console.log 로 출력하는건 안돼? 

Nope. 이렇게는 되지 않습니다. 

 

왜냐, React의 상태 변경 함수는 비동기적으로  작동하기 때문입니다!

이벤트 핸들러 내부에서 상태 변화 직후 `console.log`를 찍어도, 바뀌기 전의 값이 출력될 가능성이 있습니다~