useEffect

---

useEffect hook에 대해 알고 계신가요?

---

useEffect

컴포넌트가 마운트 / 언마운트 / 업데이트 시 특정 작업을 처리하는 방법을 정의해두는 도구

useEffect 를 사용 할때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어 있는 배열(deps)를 넣는다. 만약 deps배열을 비우면 컴포넌트가 처음 마운트되는 경우에만 useEffect에 등록된 함수가 호출이된다.

또한 useEffect에서는 함수를 반환 할 수 있는데 이를 clean up함수라고 부른다. deps가 비어있는 경우에는 컴포넌트가 사라질때 clean up함수가 호출된다.

주로 마운트시 하는 작업

• props로 받은 값을 컴포넌트 로컬 상태로 지정
• 외부 API 요청
• 라이브러리 사용

언마운트시 하는 작업

• 라이브러리 인스턴스 제거

deps 에 특정 값 넣기

deps에 특정 값을 넣는다면
컴포넌트가 처음 마운트 될 때 호출, 지정값이 바뀔 때 호출
언마운트시에 호출, 지정값이 바뀌기 직전에도 호출

useEffect안에서 사용하는 상태나, props가 있다면, useEffect의 deps에 넣어줘야한다. -규칙

넣지않는다면 useEffect에 등록한 함수가 최신 props/상태를 가르키지 않게됨

deps를 생략한다면, 컴포넌트가 리렌더링 될 때마다 호출된다.

출처