useEffect

useEffect()는 React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 라이브러리의 훅이다.

기본 구조

useEffect(() => {
  // Side effect를 처리하는 작업
  // 상태 변경, 데이터 가져오기, 이벤트 등록 등
}, [dependency]);// 주시값

dependency array의 dependency의 상태가 변경이 감지되면 useEffect내의 side effect가 처리된다.

사용하는 이유

• API과잉 요청 방지 : component에 바로 정의하면 컴포넌트가 변경될 때마다 계속 요청을 보내게된다. 이를 방지하기 위해 특정 상황에서만 요청을 보내도록 조절해줄 수 있다.

• side effect 처리 : 위 이유 또한 포함하고 있는 것으로 주로 비동기 작업을 처리할 때, 특정 조건에서만 처리를 진행할 때 사용한다.