[React] useEffect 정리

※ useEffect

- 컴포넌트의 생명주기를 관장하는 hook
- Life cycle : 생성(Mount), 변경(state change), 소멸(UnMount)
- useEffect(실행할 함수,[의존성배열])
- 기본 useEffect 사용 하는 방법
         EX) useEffect(() => {}, []);

- useEffect 생명주기

의존성 배열이 비어있으면 해당 구문은 처음 Component가 Mount 되었을 때 한번만 실행 
실제 사례) 
    1. 외부 데이터를 fetching하는 무거운 함수를 처음 한번만 호출 해야 될 때
    2. window객체에 이벤트 바인딩 할 때 (Browser Scroll , Resize 이벤트 연결 시)
사용 방법)
    //의존성 배열이 비어있는 useEffect문
    useEffect(() => {
        console.log('팝업 컴포넌트 생성');
    }, []);

의존성 배열에 특정 State가 등록되어 잇으면 해당 State가 변경될 때 마다 실행
실제 사례)
    1. 외부 fetching 데이터를 변경 할 때 마다 loading 이미지 출력 할 때

사용 방법)
//의존성배열에 특정 State 값이 등록되어 있는 useEffect문
    useEffect(() => {
         console.log('Num state값 변경');
    }, [Num]);

의존성 배열이 비어있는 상태에서 함수가 리턴되면 해당 함수는 Component가 UnMount 될때 한번만 실행
실제 사례)

1. 레이어 팝업 제거 시 부모창의 scroll bar 다시 보이게 하기

 

사용 방법)
    //의존성배열이 비어있는 상태에서 특정 함수가 리턴되는 useEffect문 (컴포넌트의 소멸을 캐치)
    useEffect(() => {
        return () => {
            console.log('컴포넌트 소멸');
        };
    }, [Num]);

 

 

※ useEffect에서 사용하는 지역변수를 다른 useEffect에서 사용하는 방법

- useStage를 이용하여 useEffect의 지역 변수를 넣어준다.
☆ 주의점 : 다른 useEffect에서 사용할 때 undefined가 뜰 수 있기 때문에 객체라면 객체? 로 한번 스킵 할 수 있도록 사용한다.

※ useEffect에 변수를 많이 넣지 않아야 하는 이유

- useEffect에서 넣으면 브라우저의 사용량이 늘어난다.

※ useEffect에 addEventListener를 사용할 때 주의점

- event 입력 시 다른 페이지의 영향이 될 수 있기 때문에 꼭 removeEventListener를 해줘야지만 다른 페이지의 영향이 가지 않는다.