new TIL. Hooks - useEffect

📌 useEffect

랜더링이 될 때마다 실행되는 함수.
처음 랜더링될 때 + setState를 통해 업데이트가 될 때마다 실행된다.

👉 처음 랜더링될 때만 실행하고 싶다면, useEffect 함수의 두번째 파라미터로 빈 배열을 넣어주면 된다.

👉 의존성 배열 추가
특정 값이 업데이트될 때만 실행하고 싶다면 배열 내 검사하고 싶은 값을 넣어주면 된다.

useEffect(()=> {console.log({name})}, [name])
// 처음 랜더링될 때에도 useEffect가 실행되는 것을 알 수 있다. 
// 이는 state 초기값을 처음 세팅해주었기 때문! 

👉 clean up!
컴포넌트가 unmount 되기 전 + 업데이트되기 전 실행하고 싶다면 cleanup 함수를 반환해주어야 한다.

• 다음 번 랜더링보다 먼저 실행됨
• cleanup 함수는 클로저로서 이전 환경을 기억하고 있음
• unmount 되기 전에만 실행하고 싶다면 두번째 파라미터로 빈 배열을 넣어주면 됨

---

참고) https://simsimjae.tistory.com/400?category=384814