[React] useEffect

useEffect

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook입니다. 리액트의 useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있습니다.

 

컴포넌트가 마운트 됐을 때, 언마운트 됐을 때 , 그리고 업데이트 될 때 특정 작업을 처리할 수 있습니다. 즉, 클래스형 컴포넌트에서는 생명주기 메소드를 사용할 수 있었는데, 이를 함수형 컴포넌트에서도 사용할 수 있게 되었습니다.(라이프사이클  훅을 대체할 수 있게 되었습니다)

ex) componentDidMount, componentDidUpdate, componentWillUnmount

mount란?
리액트에서 마운트(Mount)는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미합니다. 말 그대로 브라우저에 '나타나는' 것이기 때문에 유저가 직관적으로 확인할 수 있는 부분이기도 합니다. 리액트는 크게 컴포넌트가 마운트되고, 업데이트되고, 언마운트가 되는 흐름을 가지고 있다.

 

🏷️ 사용법

import { useEffect } from "react";
useEffect(
    function, 
    [deps]
);

🏷️ 예시

// 1번 예시
useEffect(() => {
		console.log('렌더링 될 때마다 실행');
	}
);

// 2번 예시
useEffect(() => {
		console.log('마운트 될 때마다 실행');
	},
    []
);

// 3번 예시
useEffect(() => {
		console.log('name 업데이트 될 때마다 실행');
	},
    [name]
);

📖 Reference

자라는 것을 잘하는 개발자

갓대희's 작은공간