useEffect

• 백엔드와의 리퀘스트를 주고 받을 때, 보통 실행하며 무한루프에 빠지지않고 한번만 실행되도록 도와준다.

useEffect(() => { ... }, [ dependencies ]);

• useEffect 인자 : 함수, 의존성

  • 지정된 의존성이 변경되면 함수를 실행한다.

• 무한루프로 작동되는 걸 막아준다.

• 특정 데이터, 프롭이 변경된 경우에 해당 useEffect를 통해 값을 추적한다.

useEffect(() => {
    setFormIsValid(enteredEmail.includes('@') && enteredPassword.trim().length > 6);
}, [enteredEmail, enteredPassword]); // enteredEmail or enteredPassword 가 변경된 경우에만 실행한다.

• dependencies로 관리되는 값이 변경될 때 useEffect를 수행한다.

• 종속성으로 추가할 항목 및 추가하지 않을 항목

• useEffect를 사용해서 사용자 입력을 기다릴 때, setTimeout() 을 이용해서 몇 초 이상 입력이 없을 시 특정한 행동을 취할 수도 있다. → 디바운싱이라고 한다.