React Lifecycle, useEffect

Lifecycle

컴포넌트는 mount, update, unmount 되는데
이 사이사이에 간섭을 할 수 있으며, 특정 상황에서 특정 코드를 실행할 수 있다.

쉽게말해서 어떤 컴포넌트가 생성될 때(mount), 재랜더링될때(update), 삭제될때(unmount) 각각 다른 상황에서 특정코드를 실행하며 상황에 따른 작업이 가능하다.

특정한 코드를 어떤 상황으로 연결을 시켜 원할때 실행시킬 수 있는데 이 연결을 Lifecycle hook이라고 한다.

useEffect

  useEffect(() => {
    console.log('hi');
  }, [])

위 코드를 컴포넌트 내에 적으면 안의 코드가 mount & update시 실행된다.
useEffect를 사용하게되면, html렌더링 이후에 안의 코드가 동작하는데 이를 활용해 코드를 작성하도록한다.

예를들면, 어떤 실행할 때 반복연산이나 서버에서 데이터를 가져오거나, 타이머다는것 같은 실행시 작업이 오래걸리는 코드들을 넣어서 html렌더링 이후에 실행하도록 활용할 수 있다.

그런데 위처럼 사용하게 되면 mount시 1회 실행하고 그 이후에는 전혀 실행하지 않는다.

  useEffect(() => {
    console.log('hi');
  }, [t])

위 코드처럼 []안에 t와 같은 변수를 넣어주면, 그 값이 변할 때마다 안의 코드를 실행하게 된다.

 useEffect(() => {
   console.log('hi');
 	return () => {
     코드...
   }
 }, [t])

그리고 return을 사용하는 방법도 있는데,
이 리턴 안 코드는 useEffect안의 다른 코드가 실행하기전 먼저 실행되며 사전작업을 하게된다. 이 코드는 clean up function이라고 한다.
예를들어 setTimeout()이라는 함수를 useEffect()내부에서 실행 할 때는 브라우저안에 타이머가 한개 발생하게되는데 컴포넌트가 mount될때마다 이 함수가 실행되게되면, 타이머는 수십개 수백수천개가 생성된다. 이러한 버그를 사전에 막기위해서 return내부에 clearTimeout()을 사용해서 useEffect가 실행하기 전에 존재한 기존 타이머를 제거하는 작업을 하면서 활용할 수 있다.

예) 타이머제거, socket연결요청제거, ajax요청 중단 같은 코드를 작성
clean up function은 컴포넌트 unmount시에도 1회 실행된다.