211214 리액트 입문 - 커스텀 훅

 * 리액트에서 제공하는 함수처럼, 내가 훅을 생성할 수 있다.

 * 훅의 네이밍룰 : useXXX()

 * 훅 생성을 위한 새 파일 useXXX.js

/* 기존 */
export default function Profile({userId}){
	const [user, setUser] = useState(null);

	useEffect(()=>{
		getUserApi (useId).then(data => setUser(data));
	}, [userId]);


	return
	<div>
		<p> {`name is ${user.name}`}</p>
		<p> {`age is ${user.age}`}</p>
	</div> 
}

/* 훅을 사용 */
export default  function Profile({userId}){
	const user = useUser(userId);

	return
	<div>
		<p> {`name is ${user.name}`}</p>
		<p> {`age is ${user.age}`}</p>
	</div> 

}

// 훅을 생성한 처리
export default function useUser(userId){
	const [user, setUser] = useState(null);
	useEffect(()=>{
		getUserApi(userId).then((data)=>setUser(data));
	}, [userId]);
	return user;
}

 

응용해서

// 컴포넌트 내부에서
// mounted = useMounted()로 해당 컴포넌트가 생성되었는지 알 수 있다.

export default function useMounted(){
	const [mounted,setMounted] = useState(false);

	useEffect(()=>{
		setMounted(true);
	},[]); // 1회 호출 후 의존성 배열 내부의 아이템이 변경시 호출
	// === 즉, 1회만 호출하고 끝.
	return mounted;
}

 

응용하면...

 

 useBlockIfNotLogin()
 useBlockUnsavedChange(msg)
 useEffectOnlyLoginUser(callback, deps) 로그인 유저인경우에만 useEffect호출
 useLocalStorage(key, initialValue)=> [value, setValue] -> useState를 반환하는 함수 ,  쿠키 포함