[ React ] React Hooks 정리 2 - useEffect

useEffect

컴포넌트가 렌더링 된 후,

혹은 컴포넌트가 업데이트 될 때마다 실행시키고 싶은 작업이 있을때 사용한다.

 

1. 사용 형태

1. 컴포넌트가 렌더링 될때마다 계속 실행

useEffect( () => {
     // 작업 내용
});

 

2. 첫 렌더링 후 한번 실행, 그 이후로는 Dependency array안에 있는 state 변경시에만 실행

useEffect( () => {
     // 작업 내용
},[ state1, state2 ]);

 

3. 첫 렌더링될때 한번만 실행

useEffect( () => {
     // 작업 내용
},[]);  // 빈배열

 

 

 

 

2. cleanup 함수

👉  return 구문을 추가

return 안에 사용한 함수는 해당 컴포넌트가 unmount될때,

또는 다음 렌더링시 불릴 useEffect가 실행되기 전에 실행된다.

useEffect( () => {
     // 작업 내용
     return () => {
             // unmount될때 실행될 내용
             console.log('unmounting')
     }
});

 

 

---

✔️ 참고

https://www.youtube.com/watch?v=kyodvzc5GHU&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=2