TIL REACT useEffect

useEffect란?

• 어떠한 컴포넌트가 마운트되었을때, 업데이트될때 아니면 unmount되었을때 특정작업을 실행하는 코드를 행할때 사용하는 훅이다
• 기본적으로 useEffect 훅은 인자로 콜백함수를 받는다. (콜백함수란 다른함수의 인자로 전달된 함수를 의미한다.)
• 두가지의 형태가있다!! which are...

  
  useEffect(() =>{
      처리하고싶은 작업!    
  });

  
  useEffect(() =>{
      처리하고싶은 작업!
  },[ value]);

• 위의 문법 코드들에서 볼수있듯이 1번째 형태는 useEffect의 인자로 하나의 콜백함수만 받는 형태이고 두번째 형태는 useEffect의 첫번째 인자로 콜백함수 , 두번째 인자로 배열을 받는형태이다 두번째 인자로 받는 배열을 defendency array라고도 불린다.

• 첫번째 형태는 컴포넌트가 렌더링 될때마다 매번 콜백이 실행된다. 컴포넌트가 맨처음 화면에 렌더링이될때, 컴포넌트가 다시 렌더링될때도 실행이된다

• 두번째형태는 컴포넌트가 렌더링 될때마다 매번 실행이되는것이 아니라 컴포넌트가 화면에 첫 렌더링이될때, 그리고 배열안에 들어있는 요소의 값이 바뀔때마다 실행이된다. 만약 빈배열을 전달해준다면 컴포넌트가 화면에 처음 렌더링될때만 실행이된다

Clean up

• 우리가 만약 useeffect에서 어떤 서비스에 구독하는 훅을 넣었다면 그걸 정리해주는 작업이필요하다. 예를들어 타이머를 실행했다면 타이머를 멈추고싶을때가 있을것이고, eventlistenr를 넣어주었다면 등록한 eventlistner를 정리해주는 작업이 필요할것이다. 그럴떄는 useEffect에 리턴값을 정의해주면 된다.