리액트 - useEffect ( vue의 watch 랑 비슷한 걸까? )

react.org 설명

useEffect

컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다.

사실 해당 정의만 보면 뭔소릴까...라는 생각이 들긴한다 렌더링 될 때 특정 작업이면
리렌더링 될때도 특정 작업을 실행하는 것인가?
아니면 초기 렌더링일때만 작업이 실행되는 것일까의 두가지 의문이 들 수 있다.

 

살펴보니 크게 3가지 경우의 수가 있다.

 

1. 초기에 컴포넌트가 렌더링될 때 한번 실행되고 이 후로 다시 호출 되지 않음

2. 컴포넌트가 재렌더링 될 때마다 실행

3. 특정 변수의 값이 변경될 때마다 실행

 

어 이거 약간 Vue의 watch 느낌아닌가? 싶은데 동작방식이 조금 다른 것 같다

• useEffect는 렌더링이 완료된 이후에 실행!
• watch는 데이터가 변경되는 것과 동시에 콜백함수를 실행한다.

둘다 예기치 못한 데이터 변경으로 인해 리렌더링 될 수 있을 가능 성이 있기 때문에 최대한 자제하는 것이 좋을 것 같은 느낌이긴하다.
Vue 프로젝트에서도 되도록이면 watch를 안 쓰려고 했기 때문,,

지난 프로젝트에서 다른 팀원이 무분별한 watch를 써서 진짜 성능이 엄청 떨어졌던 걸 생각하면 눈물이 앞을 가린다
왜 이렇게 느린가했더니 watch가 계속 호출되고 있었음

 

여하튼 감시자 기능을 하는 hook은 적재적소에 잘 써야되는 것 같다

 

useEffect(function(), deps)

• function 안에서는 해당 컴포넌트가 렌더링 될 때 실행 할 함수를 작성한다
  • props(state), Call REST API, setInterval, setTimeout과 같은 동작을 할 때 사용
  function 에 return을 작성하는 경우 clean up 함수로 작동된다.
  • clearInterval, clearTimeout
• 컴포넌트 렌더링 후에 실행된다.
• deps가 있는 경우에는 deps에 작성한 값이 업데이트 될때마다 실행이 된다.
• deps가 없는 경우에는 모든 컴포넌트에서 실행이 된다
  • 부모 컴포넌트가 리렌더링 되는 경우 자식 컴포넌트도 리렌더링 되기때문이다

deps가 update 될 때 useEffect가 실행된다는 점은 vue의 watch 함수와 비슷한 부분이 있다.

function()은 onMounted return은 onUnmounted와 유사한 것 같은데 조금 더 강습을 진행해봐야 알 것 같다.

 

코드 주석 정리

  //특정값이 업데이트되고 난 후에 실행되는 함수, 처음나타날때도 실행이된다
  //props로 받는 값이나 useState 값으로 관리하고 있는 함수를
  //useEffect에서 사용하는 경우 deps에 꼭 넣어주어야한다
  //약간 vue.js 의 watch 와 비슷한 거 같음 
  useEffect(()=>{
    console.log('component appeared', user)
    // mount시 실행되는 부분
    // props -> state
    // rest API
    // setInterval, setTimeout
    return () =>{
      //unmount(clean up 함수)
      //deps 가 바뀌기 직전에도 호출이 되고 사라지기 전에도 호출이 된다
      //clearInterval, clearTimeout
      //라이브러리 인스턴스 제거
      console.log('component removed', user)
    }

  },[user])// deps: dependency 의존되는 값 , 값이 들어가는 경우 해당 값이 변할 때마다 useEffect 가 실행된다
  // deps 를 생략한 경우 모든 컴포넌트에서 실행이 된다. 
  // 부모컴포넌트가 리렌더링 되는 경우 자식 컴포넌트도 리렌더링 되기때문

 

리액트 이전 글

1.리액트 배열 추가, 삭제, 수정

리액트 배열 추가, 삭제, 수정