1. useEffect Hook 기명 함수와 함께 사용하기

useEffect를 기명함수와 함께 사용하면 해당 useEffect가 어떤 기능을 하는지 명확히 알 수 있습니다.

에러가 발생하였을때 어떤 useEffect에서 에러가 발생하였는지를 정확히 알 수 있어 디버깅 측면에서도 유리합니다.

function NameFunction() {
	const name = "clean code";

	useEffect(function printName(){
		console.log(name);
	},[]);

	useEffect(function addEvent()=>{
		document.addEventListener();
		return function removeEvent() {
			document.removeEventListener();
		}
	},[])

	useEffect(function isInViewComponent(){
		//...
	});

}

2. 한 가지 역할만 수행 useEffect 지향하기

프로그래밍에서는 한 가지 역할만 하는 무언가를 만드는 것이 좋습니다.

useEffect 역시 한 가지 역할만을 수향할 수 있도록 만드는 것이 좋습니다.

한 가지 역할만을 하는지 확인해보기

기명 함수를 사용 : 기명함수를 사용함으로써 해당 useEffect의 역할을 분명히 할 수 있습니다.

의존성 배열 확인 : 의존성 배열에 너무 많은 관찰 대상이 들어간다면 여러 역할을 수행할 가능성이 있습니다.

아래 코드에서는 redirect와 로그인 로직이 같이 사용되고 있습니다.

경로가 바뀌었을 뿐인데 로그인이 될 수 있으며, token이 바뀌었을 뿐인데 redirect이 발생할 수 있습니다.

function LoginPage({ token, newPath}) {
	useEffect(()=>{
	  redirect(newPath);

		const userInfo = setLogin(token);
		// 로그인 로직...

  },[newPath, token])
}

따라서, redirect과 로그인 로직을 분리하는 것이 바람직합니다.