useEffect에 대한 이것저것

유즈이펙트는 리액트 class 생명주기 메서드의 componentDidMount, componentDidUpdate, componentWillUnmount 가 합쳐진 것이다.

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

• 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열(deps)를 넣는다.

리액트 컴포넌트에는 두종류의 side effects가 있다

• 정리가 필요한 것 (clean-up)과 그렇지 않은 것이지 (선택적인 것)
• 사이드 이펙트는 실행중에 어떤 객체를 접근해서 변화가 일어나는 행위이다.

useEffect는 Hook을 이용하여, 리액트에게 컴포넌트가 렌더링 이후에 뭘 해야하는지 알려준다.

• 우리가 넘긴 함수를 기억해놓고, DOM 업데이트를 수행한 이후에 불러낸다

useEffect는 렌더링 이후에 모든 업데이트에서 수행된다.

deps에 특정 값 넣기

:deps에 특정 값을 넣는다면
컴포넌트가 처음 마운트될때 호출, 지정값이 바뀔 때 호출
언마운트시에 호출, 지정값이 바뀌기 직전에도 호출
useEffect 안에서 사용하는 상태나, props가 있다면, useEffect의 deps에 넣어줘야 한다 - 규칙

useEffect 함수는 state 변수를 하나만 관리하는게 좋다

• useEffect 함수를 여러개를 사용하는 것이 더 좋다고 한다.

  useEffect의 두번째 인자가 빈배열이면 componentDidMount와 같다

• 배열에 요소가 있으면? componentDidMount랑 componentDidUpdate 둘다 수행한다

• useEffect에서 return함수는 componentWillUnMout의 역할을 수행한다