코딩애플 리액트 강의를 보며, useEffect에대해서 정리

그동안 useEffect를 사용해왔지만 왜? 왜 사용해야하는지 자세한 이유는 모른채 사용했었다.
그저, useEffect()안에 함수를 넣거나, 서버에서 데이터를 받아오면 항상 실행되거나 랜더링,재랜더링됬을때 실행된다는것만 대충 알고있었다.

useEffect

useEffect()안에 적은 함수와 useEffect바깥에 적은함수는 똑같이 컴포넌트 mount & update시 실행된다.
이런식으로 말이다.

  useEffect(()=>{
    //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨
    console.log('안녕')
  });

// 여기 적어도 컴포넌트 로드 & 업데이트 마다 실행됨
console.log('안녕')

컴포넌트가 mount & update시 코드를 다시 읽고 지나가서 그런건데..
그럼 useEffect는 왜 만들어놓은걸까?

useEffect의 기능

useEffect 안에 적은 코드는 html 렌더링 이후에 동작한다.

useEffect의 이름은 함수의 핵심기능 외에 쓸데없는 기능들을 정의하는 side effect에서 따온건데,
컴포넌트의 핵심 기능은 html 렌더링이라 그거 외의 쓸데없는 기능들은 useEffect안에 적으면 되겠다.

예를들면, 오래걸리는 반복연산, 서버에서 데이터가져오는 작업,타이머다는 작업 등등..

추가로, useEffect(()=>{ 실행할코드 }, []) 이런식으로 []대괄호를 사용하면 []에 있는 변수나 state가 변할 때만 useEffect안의 코드를 실행할 수 있다.

그냥 빈 대괄호[]만을 사용하면 컴포넌트 로드시 1회만 실행가능하다.

clean up function

useEffect 동작하기 전에 특정코드를 실행하고싶을경우 return ()=>{}를 안에 넣을 수 있는데 이것을 clean up function이라고 부른다.

useEffect(()=>{ 
  그 다음 실행됨 
  return ()=>{
    여기있는게 먼저실행됨
  }
}, [count])

[참고1] 타이머제거, socket 연결요청제거, ajax요청 중단 등등을 자주 쓴다.

[참고2] 컴포넌트 언마운트 시에도 clean up function 안에 있던게 1회 실시된다.