React Hooks: useEffect() 란?

useEffect() 함수

컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 hook
ex) componentDidMount, componentDidUpdate, componentDidUnmount 시 특정 작업을 처리할 수 있다.

useEffect() 사용법

useEffect(function, deps): fn-수행함수, dep-배열형태, 검사하고자하는 특정 값 또는 빈 배열
ex)

useEffect(() => {
	sthFunc(); //마운트 될 때만 실행된다.
}, []);

useEffect(() => {
	sthFunc(); //렌더링 될 때마다 실행된다.
});

1. componentDidMount

   컴포넌트가 화면에 가장 처음 렌더링 됬을 때만 한번 실행하고 싶을 때,
   deps위치에 빈 배열을 넣는다.
   만약, 빈 배열을 생략한다면 리렌더링(ex.refresh) 될 때마다 실행된다.

useEffect(() => {
	sthFunc(sth); //업데이트 될때 실행된다.
}, [sth])

2. componentDidUpdate(props, state 바뀔 때)

   특정 값이 업데이트 될 때, 실행하고 싶을 때는 deps 위치의 배열 안에 검사하고 싶은 값을 넣는다.
   업데이트 될 때 뿐만 아니라 마운트 될 때도 실행된다.

 useEffect(() => {
 	sthFunc(sth);
    
    return () => {
    	sthFunc(sth);
    }
 }, []);

3. componentDidUnmount(component가 사라질 때, update 전에)

   • cleanup함수 반환: return 뒤에 붙는 함수, useEffect() 함수 뒷처리 함수

• 언마운트될 때만 cleanup함수를 실행하고 싶을 때: 두번째 파라미터로 빈 배열을 넣는다.
• 특정 값이 업데이트 되기 직전에 cleanup함수를 실행하고 싶을 때: deps배열안에 검사하고 싶은 값을 넣어준다.

4. deps의 특정 값

   deps에 특정 값을 넣게 되면 컴포넌트 마운트 시, 업데이트 시, 언마운트 시 값일 바뀌기 직전에 모두 호출된다.
   useEffect 안에 사용하는 state, props가 있다면 useEffect의 deps에 넣어주는 것이 규칙이다.
   deps 파라미터를 생략한다면 컴포넌트가 리렌더링될 때마다 useEffect함수가 호출된다.

[참고자료]