JS => useEffect

useEffect란?

함수 컴포넌트에서 side effect를 수행할 수 있는 리액트 내장 API 함수이다. side effect는 실행되는 함수 외부에 영향을 미치는 것이라고 생각하면 된다.

컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 상태가 바뀔 때) 특정 함수를 처리하는 방법이다.

파라미터에 따른 예시

두 번째 파라미터에 빈 배열

useEffect 예시

useEffect(() => {
    console.log('컴포넌트가 화면에 나타날 때');
    return () => {
      console.log('컴포넌트가 화면에서 사라질 때');
    };
  }, []);

첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열이 들어간다.
위의 예시는 두 번째 인자에 빈 배열이 들어가는데, 이는 마운트 될 때(컴포넌트가 처음 나타날 때) 첫 번재 파라미터인 함수가 호출된다.

그리고 useEffect에서는 함수를 반환 할 수 있는데, 이를 "cleanup 함수" 라고 부른다.
cleanup 함수는 useEffect에 대한 뒷처리를 해준다고 이해하면 되는데,
두 번째 파라미터인 배열이 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출된다.

두 번째 파라미터에 특정 값

function Mymoney({ mymoney }) {
  useEffect(() => {
    console.log('최신 mymoney 값');
    return () => {
      console.log('이전 mymoney 값');
     };
    }, [user]);
  }
return (...)
}

위 예시처럼 두 번째 파라미터에 특정 값을 넣게 된다면,
컴포넌트가 처음 마운트 될 때에도 호출이 되고, 지정한 값이 바뀔 때에도 호출이 된다.

그리고 배열 안에 특정 값이 있다면 언마운트시에도 호출이되고, 값이 바뀌기 직전에도 호출이 된다.

두 번째 파라미터에 특정 값 없음

두 번째 파라미터를 생략한다면, 컴포넌트가 리렌더링 될 때마다 호출이 된다.

참고사항
리액트 컴포넌트는 기본적으로 부모컴포넌트가 리렌더링되면 자식 컴포넌트 또한 리렌더링 된다.
하지만 실제 컴포넌트에 변화가 반영되는 것은 바뀐 내용이 있는 컴포넌트에만 해당 된다.