React useEffect hook

useEffect

• 리액트 함수 컴포넌트에서 부수효과를 수행할 수 있게 해준ㄴ 기능
• 부수효과 : 데이터 가져오기, 수동으로 DOM 변경하기, 타이머 설정하기 등

사용법

1. 두개의 인자 받기
   1) 부수 효과 함수 (필수)
   2) 의존성 배열(선택)
2. 부수 효과 함수는 컴포넌트가 렌더링될 때마다 실행됨

• 의존성 배열에 포함된 값이 변경되면 부수 효과 함수가 다시 실행됨

활용 예시

1. 데이터 가져오기
   • 컴포넌트가 마운트될 때 API 요청을 보내 데이터를 가져올 수 있음
   • 의존성 배열에 빈 배열을 전달하면 마운트 시에만 부수 효과 함수가 실행됨
2. DOM 조작
   • 컴포넌트가 마운트되거나 업데이트될 떄 DOM을 수동으로 변경할 수 있음
   • 의존성 배열에 변경되어야 할 DOM 요소를 포함시켜야 함
3. 타이머 설정
   • 컴포넌트가 마운트될 때 타이머를 설정하고, 언마운트될 때 타이머를 정리할 수 있음
   • 부수 효과 함수에서 정리 함수를 반환하면 컴포넌트가 언마운트 될 때 실행됨