useEffect
-
어떤 컴포넌트가 Mount(화면에 첫 렌더링), Update(다시 렌더링), Unmount(화면에서 사라짐) 되었을 때 특정 작업을 처리한 코드를 실행시키고 싶을 때 사용
-
인자로 콜백함수를 받음
-
콜백함수 내부에 원하는 작업을 처리할 코드를 입력해주면 됨
useEffect( () => {// 작업} )콜백함수란?
- 다른 함수의 인자로 전달된 함수
useEffect의 두 가지 형태
1) useEffect의 인자로 하나의 콜백함수만 받는 형태
- 렌더링 될 때마다 실행 (맨 처음 렌더링 시, 다시 렌더링 시 모두 실행)
useEffect( () => {
// 작업
} );2) useEffect의 첫 번째 인자로 콜백함수, 두 번째 인자로 배열(dependency array)을 받는 형태
- 화면에 첫 렌더링 될 때, value 값이 바뀔 때(배열안의 요소의 값이 바뀔 때)만 실행
useEffect( () => {
// 작업
}, [value] );- 만약 빈 배열을 전달해준다면 컴포넌트가 화면에 첫 렌더링 될때만 실행됨
useEffect( () => {
// 작업
}, [] );Clean Up - 정리
useEffect( () => {
// 구독 코드
}, [] );-
만약 useEffect에서 어떤 서비스에 구독하는 코드를 넣었다면, 이후에 구독해제 작업(Clean Up)을 처리해줘야 함
-
타이머를 시작했다면 더 이상 타이머가 필요 없을 때 타이머를 멈추는 정리작업을 해야 함
-
이벤트리스너를 등록했다면 등록한 리스너를 제거해주는 정리 작업을 해줘야 함
-
정리작업을 처리하려면 useEffect의 return 값으로 함수를 넣어주면 됨
useEffect( () => {
// 구독
return () => {
// 구독해지
}
}, [] );- 이렇게 함수를 return 해주면, 해당 컴포넌트가 언마운트 되거나 다음 렌더링 시 useEffect가 실행되기 이전에 그 함수가 실행이 됨
실제 코드 구현
- 이렇게 구현하면 update 버튼을 누를때마다 렌더링이 됨
-
input을 추가하고 새로운 useState를 만들어주고 input을 입력하면 계속 렌더링 되는 것을 볼 수 있음
-
만약 count가 바뀔때만 렌더링 되게 하고 싶다면? 두 번째 인자에 [ count ]를 넣어주면 됨
- input 입력 시에는 렌더링 되지 않고, count 클릭시에만 렌더링 되는 것을 확인할 수 있음
Clean Up 코드 구현
- Components > timer.js 컴포넌트 만들기
- UseEffectCleanUp.js에 import하고 사용
-
App.js에 UseEffectCleanUp import하고 사용
-
UseEffectCleanUp.js에서 showtimer useState만들어주기
- showTimer가 true 일때만 Timer 컴포넌트가 실행되도록 코드 작성
- button에 onClick 이벤트를 사용해서 showTimer 버튼이 true라면 false로, false라면 true로 바뀌도록 코드 작성
- 이렇게 하면 토글버튼을 처음 누르면 타이머가 실행이 되고, 두번 누르면 span은 사라지지만 타이머는 여전히 돌고 있는 것을 확인할 수 있음
- 타이머가 unmount 되었을 때 console의 타이머도 멈추게 하려면 Timer에서 useEffect 값으로 함수를 넣어주면 됨 (함수 안에서 정리 작업을 처리해주면 됨)
정리
-
이 useEffect는 두번째 인자로 빈 배열을 받기 때문에 Timer 컴포넌트가 맨 처음 브라우저에 렌더링이 됐을 때만 불리게 됨
-
return 되는 함수는 정리 작업을 해주는 함수로 Timer component가 unmount 될 때(화면에서 사라질 때) 실행이 됨
-
Timer 컴포넌트가 맨 처음 시작될 때 timer를 시작하고, Timer가 화면에서 사라질 때 timer을 정리해 줌(타이머를 끝냄)
