useEffect

• 컴포넌트가 렌더링 될때마다 컴포넌트 내부에서 무언가 바뀌어지는 것을 인지하고 업데이트 해주는 함수.

• 함수형 컴포넌트에서 side effects를 실행하는 것

side effects

함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 효과

• 함수 내부에서 작성된 코드가 함수 외부에 영향을 끼치는 경우

• 주로 절차형 프로그래밍에서 흔히 쓰이는데, 전역변수를 생성하고 함수로 그 전역변수의 값을 변경하기도 하고, 함수 외부의 무언가를 조작하는 것을 말한다.

• 모든 side effects가 그런건 아니지만, 함수 외부에서 동작하기 때문에 찾기 어려워 가독성도 떨어지고, 디버깅도 어렵다. 또한 코드도 길어질 수 있다.

• mock data를 불러오는 거나 API를 가져오는 경우도 side effects라고 할 수 있다.

let count = 0;

function increase(){
  count++
  return(count)
}

function decrease(){
  count--;
  return(count)
}

• 위의 함수는 side effects가 생기는 함수의 예시다. increase 함수와 decrease 함수는 함수 외부의 전역변수인 count의 값을 변경시킨다.

• 이 때 코드가 매우 많고 복잡해지면 어디서 count의 값을 불러왔는지 파악하기 힘들다.

• side effect가 useEffect의 통제가 없다면 컴포넌트가 렌더링 될때마다 실행될 수 있다.

순수함수

function increase(num){
  return num + 1
}

function decrease(num){
  return num - 1
}

• 순수함수는 side effects가 발생하지 않는 함수다.

• 인자로 들어간 매개 변수만이 함수의 결과에 영향을 준다.

• 매개변수의 원본은 변하지 않는다.

useEffect 기본 형태

useEffect(function, deps)

• function은 함수고, deps는 배열 형태로 배열 안에는 검사하고자 하는 특정 state 값이 들어 갈 수 있다.

• deps는 옵션이라서 안 넣어도 되지만, 넣지 않으면 컴포넌트가 렌더링 될때마다 계속해서 useEffect 함수가 불필요하게 실행된다.

• deps에 빈 배열을 넣으면 useEffect는 단 한번만 실행된다. 빈 배열은 화면에 렌더링 된 UI 단위로 실행된다.

useEffect(() => {
  console.log(mount);
  return (
    console.log(unmount);
    )
}, []);

• 위의 코드처럼 useEffect를 쓰면 컴포넌트가 처음 렌더링되면서 콘솔창에 mount가 찍힐 거고, 해당 컴포넌트가 unmount될 때 그니까 화면 상 UI에서 사라질 때 콘솔창에 unmount가 찍힌다.

• 만약 빈 배열에 특정값을 넣으면 그 특정 값의 state가 바뀔 때 마다 useEffect가 실행된다.

side effects의 clean up

• clean up(뒷정리)가 필요한 상황이 있고 필요없는 상황이 있는데, 필요하면 useEffect 안에 return을 넣어주면 된다.

• 만약 뒷정리 할 때 무언가가 동작하기를 바란다면 function을 return 해도 된다.

• 네트워크 요청, 수동으로 DOM 변화와 같은 것은 그들을 실행하고 즉시 그들에 대해 잊어버리기 때문에 뒷정리가 필요 없다.

• 외부 데이터 소스를 계속 끌어올 때(구독), 메모리 누수가 발생하지 않게 하려면 뒷정리를 잘 해야 한다.

메모리 누수 (Memory Leaks)

프로그램 구동 중에 필요치 않은 메모리가 계속해서 점유하고 있는 현상

• 프로그램에서 변수를 다 사용하면 변수가 차지했던 그 공간을 재사용할 수 있다.

• 프로그램이 더 이상 사용하지 않는 변수를 해제하지 않으면 메모리 누수를 일으킬 수 있다.