useEffect란?
React의 훅 중 하나로, 함수형 컴포넌트에서
사이드 이펙트를 관리하는데 사용된다.
사이드 이펙트란?
데이터 fetching, 구독 설정, 수동 DOM 조작 등
컴포넌트의 렌더링과는 별개로 발생하는 작업을 의미한다.
사용법
useEffect는 두 개의 인자를 받는다.
1. 첫 번째 인자: 실행할 함수(사이드 이펙트를 포함하는 함수)
2. 두 번째 인자: 의존성 배열(선택사항)
주요 특징
-
의존성 배열:
두 번째 인자로 전달된 배열에
명시된 상태나 props가 변경될 때만
첫 번째 인자로 전달된 함수가 실행된다.
빈 배열 []을 전달하면 컴포넌트가 처음 마운트 될 때만 실행 -
클린업 함수:
useEffect에서 반환하는 함수는 컴포넌트가 언마운트되거나 다음 이펙트가 실행되기 전에 호출
이를 통해 구독 해제, 타이머 정리 등의 작업을 수행할 수 있다. -
비동기 작업:
useEffect내에서 비동기 작업을 수행할 수 있지만,
직접적으로 비동기 함수를 사용할 수 는 없다.
대신 내부에 비동기 함수를 정의하여 호출해야한다.
사용예시
- API데이터 fetching: 컴포넌트가 마운트될 때 API에서 데이터를 가져와 상태를 업데이트하는 경우,
- 이벤트 리스너 설정: 스크롤 이벤트나 키보드 이벤트와 같은 이벤트 리스너를 설정하는 경우
- 타이머 설정: setTimeout이나 setInterval을 사용하여 특정 작업을 주기적으로 수행하는 경우
주의사항
useEffect의 의존성 배열에 필요한 모든 변수를 포함시켜야함
이를 통해 React가 해당 변수가 변경될 때만 이펙트를 재실행하도록 할 수 있다.
의존성 배열을 제대로 관리하지 않으면 무한루프가 발생할 수 있다.
useEffect를 통해 사이드 이펙트를 효과적으로 관리할 수 있다.
또한 컴포넌트의 생명주기를 제어하고 필요에 따라 외부 데이터를 처리할 수 있다.
여기까지 useEffect에 대한 개념이고 이제 실습을 통해 이 개념을 정리해보도록 하자.
- useEffect 를 import
- useEffect함수 호출하고 그 안에 실행할 로직을 작성
👉 먼저 useEffect를 아래와 같이 작성했다면?
결과는 input에 값이 한글자 한글자 들어올 때마다 consol.log가 찍히는걸 확인할 수 있다 .
👉 해당 값이 바뀔때만 useEffect를 실행하게 하고싶다면?
- 의존성 배열 이용!
의존성 배열에 해당하는 값을 넣어주면
해당 값이 바뀔때만 useEffect가 실행된다!
👉 의존성 배열이 비어있을 때에는 마운트 시점에만 실행된다.
👉 클린업 함수
언마운트 될 때 동작한다.
이렇게 useEffect에 대한 개념을 정리하며 실습을 진행해보았다.
이 useEffect훅을 이용하여 컴포넌트의 생명주기를 관리할 수 있고
이를 이용하여 컴포넌트가 나타날 때, 업데이트될 때, 사라질 때에 맞는
로직을 구현할 수 있다는 것을 알게되었다!!
