React Hooks 훅

오늘은 React Hooks에 대해 알아 보려고 한다!

훅은 낚시 바늘의 훅처럼 컴포넌트에게 낚시 바늘을 걸듯이 훅을 거는 것이다! 컴포넌트의 Life Cycle 인생 중간중간에 내가 특정 명령을 내릴 수 있다

• 컴포넌트가 등장할때 OOO 해줘!

• 컴포넌트가 업데이트 될 때 OOO 해줘!

• 컴포넌트가 퇴장 할 때 OOO 해줘!

이 모든 것들이 Hook 덕분에 작동 할 수 있다.

함수형 컴포넌트 부터는 useEffect라는 React Hook을 사용할수 있다

useEffect를 쓰기 위해서는 import { useEffect } from 'react';를 해줘야 한다.

useEffect( () => {
	console.log('Good Evening');
});

useEffect훅은 컴포넌트가 mount 될때도 실행되고
컴포넌트가 update될때도 실행 할 수 있다

Unmount 즉 사라질때 사용하는 useEffect는

useEffect( () => {
	
    return function unMount() { Executing code}
    아니면
    return () => {Executing code} 이렇게 써도 잘 된다
});

이렇게 리턴을 쓰고 function을 써서 실행할 코드를 쭉 적어주면 그 실행할 코드는 컴포넌트가 Unmount 즉

즉 사라질때 작동을 한다.

useEffect는 여러개 사용도 가능 하다

ex)

useEffect( () => {
	console.log("1st");
});

useEffect( () => {
	console.log("2nd");
});

이렇게 여러개의 useEffect를 사용 했을때는 적은 순서대로 실행이 된다.