class 스타일 vs function 스타일(life cycle api)

■react의 life cycle

- react에서는 render를 main effect라고 부르고 나머지 api를 side effect라고 부른다고 함

■스타일별 life cycle 사용

- class

- function

- useEffect

- componentDidMount, componentDidUpdate와 동일

- import 'useEffect' from 'react';

- useEffect를 여러번 호출해서 useEffect 내의 매개변수 함수를 다중으로 

실행시킬 수도 있다.(어디 스택으로 쌓이는 듯?)

``

- cleanUp

- useEffect에 전달된 함수에서 또 다른 함수를 return 하면 그 return된 함수는 

다음번 useEffect가 실행 되기 전에 실행된다.

- useEffect에 전달된 함수의 작업을 정리하는 용도로 사용하는 듯

- skipping Effect

- useEffect를 실행시키지 않는 조건을 설정

- 두번째 매개변수로 입력된 배열의 값들이 바뀔 때만 해당 useEffect가 실행됨

- useEffect를 여러개 선언하고 조건을 달리 설정하면 다양하고 효율적으로

생명 주기를 세팅할 수 있음!

- 만약 두번째 매개변수로 입력된 배열을 빈 값으로 설정하면 

componentDidMount && componentWillUnmount와 같은 효과를 낼 수 있음!

■또 공부할 만한 것

- 자신만의 Hook 만들기

- 기타 등등 hook 사용해보기

- react 학습 링크

■출처 : 생활코딩 - react <class vs function>