useEffect

useEffect() 함수

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

useEffect() 사용법

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

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

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

1. componentDidMount

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

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

1. componentDidUpdate(props, state 바뀔 때)

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

 useEffect(() => {
 	sthFunc(sth);

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

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

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

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

1. deps의 특정 값

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

[간단정리]

1. useEffect(effect) ==> 컴포넌트가 렌더링될 때마다 호출됩니다.

2. useEffect(effect, []) ==> 첫 번째 렌더링 후에만 호출됩니다.

3. useEffect(effect, [userId]) ==> 첫 번째 렌더링 후에 호출되며, 이후에 userId가 변경될 때마다 호출됩니다.

3번에서 userId 라는 값은 항상 렌더링과 관련된 값이어야 합니다. 렌더링과 관련된 값 이라는 것은 그 값이 변경되면 컴포넌트가 다시 렌더링 되는지를 보고 알 수 있습니다. 어떤 변수의 값이 변경됐는데 컴포넌트가 다시 렌더링되지 않는다면 그 변수는 deps 배열에 넣을 필요가 없습니다.
결국 렌더링과 관련된 값 이라는 것은 컴포넌트 상태값, 속성값 등을 말하는거구요.전역 변수 등은 렌더링과 관련된 값 이 아닙니다.