useState에 이어서
리액트 Hooks 중에서 가장 중요하다고 하는
useEffect에 대해서 알아보고 정리해보도록 하겠다.
⭐️ useEffect란??
useEffect Hook을 이용하여 우리가 React에게
컴포넌트가 렌더링 된 이후에 어떤일을 수행할지 정해줄수 있음.
또한, useEffect 훅을 사용하면 함수 컴포넌트에서도
side effect를 사용할 수 있음.
과거엔 클래스형 컴포넌트에서만 생명주기 메소드를 사용할 수 있었지만,
오늘날에는 이제 함수형 컴포넌트에서도 사용할 수 있음.
즉, (componentDidMount, componentDidUpdate, componentWillUnmount)라는
라이프사이클 훅을 대체할 수 있게 되었다.
useEffect는 기본적으로 몇개의 조건에 의해 작동.
- 페이지가 처음 렌더링되고 난후 useEffect는 무조건 한번 실행.
- useEffect에 배열로 지정한 useState 값이 변경될 때 실행.
그럼 본격적으로 useEffect 사용법에 알아보자!!
useEffect의 문법은 두가지형태만 알고있어도 충분하다.
첫번째는, 렌더링될때 마다 실행되는 문법이다.
useEffect(()=>{
// 작업
});
두번째는, 화면에 첫 렌더링 될때 실행, value값이 바뀔때 실행되는 문법.
useEffect(()=>{
// 작업
},[value]);
1. 렌더링이 완료 될 때마다 실행되는 예
그럼 먼저, 렌더링 될때마다 실행되는 예제를 살펴보자!
effect함수에서 함수를 리턴할 경우,
그 함수가 컴포넌트가 Unmount될 때 정리의 개념으로 한번 실행.
위의 그림처럼
렌더링이 되었을 때, count 스테이트가 변경될 때 마다
console.log가 찍히는 것을 볼 수 있다.
2. 최초 렌더링시에만 실행되는 예
빈 배열을 입력할 경우 컴포넌트가 Mount 될때만 실행.
예제를 보면
결과를 보게되면 1번과는 다르게 useEffect 함수가
처음 화면이 Mount될때만 한번 실행되고,
렌더링이 완료될때는 실행을 하지않는다.
3. 특정 값이 변경될 때만 실행되는 예
배열의 형태로, 특정한 값이 변경될 때
effect함수를 실행하고 싶을 경우 배열안에 그 값을 넣어줌.
예제를 봐보자!
위의 예제처럼 배열안에 count를 넣어줌으로써
name값이 변경될때는 useEffect함수인 console.log가
동작하지 않지만, count의 값이 변경될때에는
console.log가 찍히는 것을 볼 수 있다.
🚨 cleanup 함수
cleanup 함수는
- useEffect 안에서 return 할때 실행된다. (useEffect의 뒷정리를 함.)
- 만약 컴포넌트가 마운트 될 때 이벤트 리스너를 통해
이벤트를 추가하였다면 컴포넌트가 언마운트 될 때
이벤트를 삭제 해주어야한다.
그렇지 않으면, 컴포넌트가 리렌더링 될 때마다
새로운 이벤트 리스너가 핸들러에 바인딩 될 것임.
이는 자주 리렌더링 될 경우 메모리 누수를 발생시킴.
예제를 봐보고 생각해보도록하자
위의 예제를 보면 클릭시 cleanup 함수에서 이전 count값,
그리고 렌더링 이후 변경된 count값이 찍히는 것을 볼 수 있음.
이는 useEffect 함수가 다시 실행될 때(실행되기 직전),
return 함수를 먼저 실행해주고 넘어가는 것이다.
오늘 알아본 useEffect 훅은 매우매우 중요하기 때문에 잘 알아보고
넘어가는 것으로하자!!!
