[React] 컴포넌트의 생명주기 useEffect

컴포넌트에는 기본적으로 생명주기라는 게 존재합니다.

페이지에 컴포넌트가 장착될 때 = 마운트/생성, 

페이지가 업데이트가 될 때 = 업데이트,

마지막으로 페이지에서 나가기 전 = 원마운트/제거

 

이전 class기반에서는 해당 주기를 확실하게 볼 수 있었습니다.

class ClassComponent extends React.Component {
  componentDidMount() {
  // 마운트 될때 코드
  }
  componentDidUpdate() {
  // 업데이트 될때 코드
  }
  componentWillUnmount() {
  // 언마운트 전 코드
  }
}

이와 같이 class형 컴포넌트는 한눈에 확인이 가능했었는데요

react 16.8 버전부터 훅 나오면서 class형 컴포넌트를 고집할 필요가 없어지고 함수형 컴포넌트로 점점 바뀌었습니다.

함수형 컴포넌트에서 생명주기를 담당하는 훅이 바로 useEffect입니다.

 

useEffect

useEffect 형태

useEffect(콜백함수, 변수|state);

 

useEffect는 매개변수로 콜백함수와 변수나 state를 받습니다.

useEffect 매개변수 - 콜백함수

useEffect(()=>{
  let a;
  return ()=>{
    let b;
  }
})

콜백함수 안에는 return 콜백함수도 존재하는데요, 콜백함수 안에는 state가 변경되는 함수를 작성하거나, 시간이 걸리는 함수를 작성한다면,  return 콜백함수 안에는 콜백함수 안에 코드들을 초기화시키는 코드들을 작성합니다. useEffect 안에서 return 콜백함수 안의 코드가 먼저 동작을 하고 난 후에 return 콜백함수 바깥의 코드들이 동작하는 것을 알 수 있는 것입니다.

예시)

useEffect(()=>{
  let timer;
  const fetchData = async ()=>{
    timer = setTimeout(()=>{
      console.log("3초 이후 동작")
    },3000)
  }
  return ()=>{
    clearTimeout(timer);
  }
})

timeout을 이용하여 3초 뒤에 console.log가 찍히게 코드를 작성했습니다.

근데 만약에 뒤로 가기하고 다시 해당 페이지에 접속을 하고 다시 뒤로 가기 누르고 다시 해당페이지를 접속하는 것을 반복을 한다면, timer가 누적이 되어 나중에 문제를 야기시킬 수 있습니다. 하지만 return 콜백함수 안에 clearTimeout()을 동작시킴으로 인해 timer가 누적이 되는 것을 막아줄 수 있습니다.

useEffect 매개변수 - 변수|state

useEffect(()=>{})
useEffect(()=>{},[])
useEffect(()=>{},[변수|state])

useEffect 두 번째 매개변수로 변수나 state를 받는데요. 이는 useEffect가 언제 동작을 할지 정한다고 생각하면 좋습니다.

두번째 변수를 작성을 하지 않는다면 마운트가 됐을 때, 업데이트가 될 때 계속 동작을 하게 됩니다.

변수 없이 대괄호만 작성을 한다면 마운트 됐을 때 딱 한번 useEffect 코드를 실행하게 됩니다.

그렇다면 대괄호 안에 변수나 state를 작성을 한다면 해당 변수나 state가 변경이 될 때마다 코드가 실행이 됩니다.

useEffect 동작순서

useEffect에 작성을 하면 어떤 순서로 동작을 하는 걸까요?

const App = () => {
  console.log("1")
  useEffect(()=>{
    console.log("2")
  })
  const check = ()=>{
    console.log("4")
  }
  console.log("3")
  return (
    <div>
      {check()}
    </div>
  )
}

 

이렇게 console을 찍어보면 알 수 있듯이 1→2→4→3 순서대로 나오는 게 아니라

1번 동작 후 3번 동작하고 return안의 HTML코드들을 불러오고(4번 동작) 맨 마지막에 useEffect가 동작하는 것을 알 수 있습니다. useEffect는 모든 코드들이 동작한 다음에 동작하기 때문에 setTimeout이나 서버통신하여 데이터를 주고받아 시간이 걸리는 함수나, 혹은 state가 변경이 되는 코드들을 useEffect 안에 작성합니다.

시간이 걸리는 함수를 useEffect 안에 작성하지 않아도 상관없지만, 그만큼 페이지 전환 시에 딜레이가 생길 수 있습니다.