[React] useEffect() 훅에 대하여

useEffect 목적

useEffect는 컴포넌트의 side effect를 처리하기 위한 함수.

컴포넌트의 상태 변화에 따라 상태를 이용해 리액트와 관련 없는 부수 작업을 처리하기 위한 것. 

 

첫번째 파라미터로 입력된 함수가 호출되는 시점은 컴포넌트가 첫 렌더링되는 시점과

두번째 파라미터로 입력된 dependency 배열의 각 요소 값이 변경되었을 때이다. 

 

각 요소값이 변경되었는지 판단하는 시점: 컴포넌트가 렌더링되는 시점. 

 

사용방법

1. useEffect(() => {})
//컴포넌트가 렌더링 될 때마다 호출됨. 매우 비효율적. 거의 사용되지 않음



2. useEffect(()=> {}, [])
//첫번째 렌더링 후에만 호출됨

 

useEffect 사용 이유: 무한 루프 방지

상태를 업데이트할 때,

상태 업데이트 함수를 호출한다는 것은 리액트에게 상태가 포함된 컴포넌트 함수를 재실행하라는 것임.

 

컴포넌트 함수가 재실행되면 사용자의 위치 파악 재진행, 상태 설정...

무한 루프 시작. 

 

앱이 망가짐. 

 

side effect잘못 사용시 일어날 수 있는 문제

=>useEffect 훅으로 해결.

 

 

useEffect

이렇게 하면 함수를 재실행할 일 없이 단 한번만 실행함.
단, 의존성 배열을 누락하면 앱 컴포넌트 렌더링 과정이 끝날 때마다 Effect함수 재실행

//훅 사용 예시

useEffect(()=> {
	navigator.geolocation.getCurrentPosition((position)=> {
    	const sortedPlaces= sortedPlacesByDistance(
        	AVAILABLE_PLACES,
            position.coords.latitude,
            position.coords.longitude
        );
        
        setAvailablePlaces(sortedPlaces);
    });

}, [] ); //두번째 인수로는 의존성 배열을 넣자

 

 

 

useEffect의 과한 사용의 문제점

불필요한 곳에서의 사용은 좋지 않다

실행 과정에서 앱 또는 그 외의 컴포넌트가 실행된 이후 추가적인 실행이 진행되는 방식이라서. 

 

필요한 것이 아니라면 useEffect 사용 자제하라. 

상태 업데이트가 되더라도 무한 루프를 만들지 않는 경우에는 필요 없음.

모든 부수 효과에 useEffect가 필요한 것은 아니다. 

 

주의: function 내부에서는 useEffect 사용 불가

컴포넌트 함수의 루트 층위에서 직접적으로만 사용가능

 

Effect Dependency (의존성)

useEffect(()=> {
	if(open){
    	dialog.current.showModal();
    }else{
    	dialog.current.close();
    }
    
 }, [open]);

 

useEffect를 사용하여 코드를 간결하게 만들 수 있다.

 

useEffect의 cleanup 함수

useEffect(()=> {
	console.log('TIMER SET');
    const timer= setTimeout(() => {
    	onConfirm();
    }, 3000);
    
    //clean-up function. 컴포넌트가 삭제될 때 딱 한번만 작동
    return () =>{
    	console.log('Cleaning up timer');
    	clearTimeout(timer);
    };
}, []);

 

cleanup 함수는 effect 함수가 최초로 작동되기 바로 전에 작동되지 않음.

effect함수의 최초 실행 다음부터 차후 실행 바로 전에만 작동.

컴포넌트가 삭제될 때만 실행됨.