react useEffect

side effect란
화면에 정보를 가져오지 않는

http리퀘스트나 set time, 로컬스토리지에 저장, 예외 처리 등 리액트가 직접하지 않는 것

일반적인 컴포넌트 함수 밖에서 일어나야 하는 일

사이드 이펙트가 컴포넌트 함수에 직접적으로 들어가면 무한루프등에 빠져 에러가 날 수 있다.

그래서 useEffect를 사용한다.

useEffect(()=>{사이드 이펙트 함수})

이러면 모든 컴포넌트가 랜더링된 후 실행되고

useEffect(()=>{사이드 이펙트 함수},[의존하는 애들])

이러면 의존하는 애들이 바뀔때 실행된다.

useEffect(()=>{사이드 이펙트 함수})

이러면 랜더링된 처음에만 실행된다.

만약 유효성 검사를 한다고 치면

  useEffect(()=>{
    setFormIsValid(
        enteredEmail.includes('@') && enteredPassword.trim().length > 6
    );
  },[enteredEmail, enteredPassword])

사이드 이펙트 함수에 쓰이는 애들을 뒤에 배열에 넣어준다.

뒤에배열에 내장api함수나 상태업데이트 set뭐시기, 예외 조건, 사이드 이펙트함수 안에 변수는 포함되지 않는다.

한번만 사용되는 useEffect 예를들어 로그인이 되었는지 안되었는지 확인하는 것은 배열을 비워도 된다.

하지만 위의 예처럼 키가 입력될때마다 요청이 간다면 그게 http리퀘스트라면 불필요한 요청이 많이 갈 수 있다.

그땐 cleanup 함수를 사용해서 최대한 요청이 한번만 갈 수 있도록 조정한다.

useEffect(()=>{
    const identifier = setTimeout(() => {
      setFormIsValid(
          enteredEmail.includes('@') && enteredPassword.trim().length > 6
      );
    },500)
    return () => {
      clearTimeout(identifier)
    }
  },[enteredEmail, enteredPassword])

모든 컴포넌트가 랜더링된 후 settimeout이 만들어지고

입력될때마다 이전 settimeout을 지우고 새로운 settimeout이 생긴다.