React의 useEffect란?

React의 컴포넌트 생명주기에 역시 Vue처럼 라이프사이클 훅을 걸 수 있다.

 

이전 React 문법의 라이프 사이클 훅 거는 방법이다.

 

컴포넌트 클래스 안에서 메소드처럼 만들어주면되는데,

 

역시 Vue랑 비슷하다.

 

Vue와 비교해보자면 위는 mounted() 아래는 beforeDestroyed() 와 같은 기능을한다.

 

 

어쨋든 현재는 function 컴포넌트 안에서 useEffect라는 함수 안에 콜백함수를 넣고 그 몸통에

 

훅 로직을 써넣는다.

 

기본적으로 useEffect는 mounted 시에 발동하는데,

 

Vue와 다른점은 저것이 저 컴포넌트 안에 쓰이는 useState 변수 등이 바뀌어서

 

재렌더링될 때에도 발동한다는것이다.

 

 

또 useEffect는 한 컴포넌트 내에서 여러개 생성해 줄 수 있다.

 

그러면 선언된 순서대로 잘 작동한다.

 

 

여기서 문제는 useEffect 함수들이 컴포넌트들이 mounted될 때 무조건 한번 실행되지만,

 

컴포넌트 안의 useState 변수들이 변경되어 재렌더링이 일어날 때 역시

 

실행된다는것이다.

 

 

그것을 막기위해 조건을 달아 특정 state 변수만 변경될 때 재렌더링되도록 만들어줄 수 있다.

 

이렇게 useEffect 함수에 콜백함수 옆 두 번째 인자로

 

배열 안에 state 변수들을 넣어줄 수 있다.

 

그러면 그 state 변수들이 변경될 때만 해당 useEffect가 실행되도록 설계해줄 수 있다.

 

 

그걸 응용해서 mounted될 때만 실행하고싶은 useEffect의 경우

 

해당 배열 안에 아무것도 넣어주지않으면, 

 

딱 그 컴포넌트가 mounted될 때만 실행되고 그 외 업데이트 시에는 반응하지않는다.

 

 

마지막으로 useEffect 함수 안에 return을 써주면

 

해당 컴포넌트가 종료되어 index.html에서 unmounted될 때 실행하고싶은 로직을

 

함수로 넣어줄 수 있다.

 

화살표 함수, 일반 함수 모두 가능하며

 

해당 컴포넌트 종료 시 return문이 실행된다.

 

 

 

정리

 

1) 모든 useEffect 함수들은 소속 컴포넌트가 로드될 때 꼭 한번은 실행된다.

 

2) 두 번째 인자에 useState 변수가 든 배열을 넣어 감지하고싶은 변수를 넣어줄 수 있다.

 

3) 그렇지않으면 컴포넌트가 재렌더링 될 때 항상 발동한다.

 

4) 배열 안에 아무것도 넣어주지않으면, 컴포넌트 로드 시에만 발동한다.

 

5) return 문에는 컴포넌트 종료 시 실행할 로직을 함수로 넣는다.

 

6) useEffect 함수는 한 컴포넌트 내 여러개 만들어줄 수 있다.