useEffect?

리액트 class생명주기 메서드의 componentDidMount와 componentDidUpdate, componentWillUnmout가 합쳐진 것으로 생각 하면된다.

리액트 컴포넌트에는 두종류의 side effects가 있다. 정리가 필요한 것(clean-up)과 그렇지 않은것이다.(선택적인것이다.)

여러개의 useEffect를 사용할수 있다.

side effect?

쉽게 말해 실행 중에 어떤 객체를 접근해서 변화가 일어나는 행위이다.

1. x = 3+4
   위의 표현식은 1개의 side effect가 있다. x의 값이 변경되었기 때문이다.

2. y = x++
   위의 표현식은 2개의 side effect가 있다. x++에서 x가 한번 변하고, x값 대입으로 y가 한번 변하기 때문이다.

3. 3+4
   위의 표현식은 side effect가 없다.

if(flag) {
 foo();
}

위의 표현식은 flag가 true일 경우에 한해서 잠재적으로 side effect가 있다.

useEffect가 하는 일은?

: useEffect Hook을 이용하여 리액트에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야 하는 지를 알려준다. 리액트는 우리가 넘긴 함수를 기억했다가 DOM업데이트를 수행한 이후에 불러낸다.

useEffect는 렌더링 이후에 매번 수행되나?
: yes!

: 렌더링과 이후의 모든 업데이트에서 수행된다.

마운트될때만 실행 하고 싶을때 => [ ]

화면에 맨 처음 렌더링될 때만 useEffect를 실행하고, 업데이트 될 때는 실행 하지 않으려면 함수의 두 번째 파라미터로 비어 있는 배열을 넣어 주면 된다.

특정 값이 업데이트 될 때만 실행 시키고 싶은 경우 [] 안에 원하는 값을 넣으면 된다.

clean-up이 필요한 경우

함수를 반환하는 이유는?
추가적인 정리메커니즘이다. 모든 effect는 정리를 위한 함수를 반환할수 있다.

effect가 정리하는 시점은 정확히 언제?
컴포넌트가 마운트 해제되는 때에 정리를 한다.