react 스터디에서 리액트를 다루는 기술이라는 책을 선정했고 이 책을 읽고 배운 것을 바탕으로 작성되었다.

📌 useEffect

• useEffect를 통해 컴포넌트가 Mount (초기 렌더링), Unmount (DOM에서 제거), Update되었을 때의 특정 작업을 설정할 수 있다.

💡 인자

• useEffect는 두 개의 인자를 갖는다.
  • 첫번째 인자: 함수 -> 함수(cleanup 함수)를 리턴할 수 있음.
  • 두번째 인자: 의존성 배열(dependencies (deps))
  • 두 번째 인자를 전달받았다면, deps 배열 안에 있는 값들이 변할 때만 첫 번째 인자로 전달받은 함수가 실행된다. (초기 렌더링이 완료된 후에도 실행됨.)

💡 마운트된 이후에만 실행하고 싶을 때

• useEffect에서 설정한 함수를 처음 렌더링된 이후에만 실행하고 싶을 때 두 번째 인자(deps)로 빈 배열([])을 넣어주면 된다.
  -> componentDidMount처럼 실행

💡 특정 값이 업데이트된 이후에 실행하고 싶을 때

• 그 특정 값을 두 번째 인자(deps)로 배열 형태로 넣어주면 된다.
  -> componentDidUpdate처럼 실행 (초기 렌더링될 때도 실행됨.)

💡 cleanup 함수

• useEffect에서 함수를 리턴할 수 있는데 반환된 함수를 cleanup 함수라고 한다.
• 컴포넌트가 Unmout되기 직전이나 Update되기 직전에 수행할 작업을 설정할 수 있다.
• deps 인자에 빈 배열을 전달하면 cleanup 함수는 컴포넌트가 Unmount되기 직전에 실행된다.
• deps 배열에 값이 있다면 배열 안에 있는 값이 업데이트되기 직전에도 호출된다.

💜 요약

• deps에 [] (빈 배열)을 넣을 때, life cycle method중 componentDidmount처럼 실행
• deps에 넣은 파라미터 값이 업데이트 되었을 때, componentDidUpdate처럼 실행. (초기 렌더링될 때도 첫번째 인자의 함수가 실행됨.)
• useEffect에서 반환된 함수는 clean up 함수로, componentWillUnmount처럼 실행하거나 업데이트 직전에 호출된다.
• deps 인자가 생략되었다면, 렌더링될 때마다 첫번째 인자로 받은 함수와 cleanup 함수가 호출됨.