일단 sideEffect 란 무엇인가.
React에서 "side effect"는 컴포넌트의 렌더링과는 별개로 발생하는 작업이나 상태 변화를 말합니다. 컴포넌트의 생명주기 동안 발생할 수 있는 다양한 동작을 포함합니다.
일반적으로 다음과 같은 상황에서 side effect가 발생합니다:
- 데이터 가져오기 및 변경: 외부 API로부터 데이터를 가져오거나, 데이터를 변경하는 작업을 수행합니다.
- 구독 및 이벤트 처리: 외부 이벤트에 대한 구독, 이벤트 핸들러 등록 및 해제 등과 같은 작업을 수행합니다.
- 타이머 설정: 특정 시간이 경과한 후 작업을 수행하기 위해 타이머를 설정합니다.
- DOM 조작: 특정 DOM 요소에 접근하여 스타일 변경, 새 요소 추가 또는 삭제 등을 수행합니다.
useEffect를 사용한 디바운싱(debouncing)
사용자의 연속된 이벤트 발생을 제어하여 일정 시간 동안 마지막 이벤트만 처리하는 기술입니다. 디바운싱은 연이어 발생하는 이벤트를 일정 주기로 묶어서 마지막 이벤트만 처리함으로써 성능을 최적화하거나 의도하지 않은 동작을 방지할 수 있습니다.
//의존성 목록에 변화가 생겼을때 타이머 초기화,
useEffect(() => {
//일정 시간이 지났을때 유효성 검사.
let debouncing = setTimeout(() => {
setFormIsValid(
enteredEmail.includes("@") && enteredPassword.trim().length > 6
);
}, 500);
return () => {
clearTimeout(debouncing);
};
}, [enteredEmail, enteredPassword]);
useEffect clean-up function
useEffect(() => {
//부수 효과 처리하는 코드
console.log("TEST.1");
return () => {
//정리(clean-up) 함수
console.log("TEST.2");
};
}, [enteredEmail]);
console.log("TEST.1")는 부수 효과 함수 내의 코드로, console.log("TEST.2")는 정리 함수로 간주되어 useEffect 함수의 반환문으로 나타나는 것이 아닙니다.
코드가 실행될 때, console.log("TEST.1")은 부수 효과 함수가 실행될 때마다 호출되고, console.log("TEST.2")는 해당 의존성(dependency)이 변경되거나 컴포넌트가 언마운트될 때 실행됩니다.
즉, 정리(clean-up) 함수는 의존성(dependency) 배열에 지정된 상태나 속성의 값이 변경되거나 컴포넌트가 언마운트될 때 실행됩니다. 이 때, 정리 함수가 먼저 실행되고 다음에 새로운 부수 효과 함수가 실행됩니다.
