React : useEffect 로 라이프 사이클 돌리기

리액트에는 2가지 컴포넌트가 있다.

첫번째로는 함수 컴포넌트

두번째로는 class 컴포넌트

클래스 컴포넌트에는 라이프 사이클이 있는데

클래스의 경우 -> constructor -> render -> ref -> componentDidMount
(setState/props 바뀔때) -> shouldComponentUpdate(true) -> render -> componentDidUpdate
부모가 나를 없앴을 때 -> componentWillUnmount -> 소멸

1.componentDidMount()

• 첫 랜더링 될때 실행할 함수

2.componentDidUpdate()

• 이것은 리렌더링을 완료한 후 실행한다. 업데이트가 끝난 직후이므로, DOM관련 처리를 해도 무방하다.

3.componentWillUnmount()

• 이 메서드는 컴포넌트를 DOM에서 제거할 때 실행한다. componentDidMount에서 등록한 이벤트가 있다면 여기서 제거 작업을 해야한다

클래스의 경우는 위 3가지를 사용하면 되는데

함수형 컴포넌트에서는 위 3가지를 사용 할 수가 없다.

대신 사용할수 있는게 useEffect 인데 어떻게 활용하는지 알아보자

 useEffect(() => {
  ~~~ 실행할 함수들~~~
  예를들어 여기서 setTimeout을 사용햇다면,
    return () => { // componentWillUnmount 
      //이곳에서 클리어 해줘야 한다.
      });
    };
  }, []); //빈 배열이면 ComponenetDidMount
  // 배열에 요소가 있으면, componentDidMount,componentDidUpdate

2번째 인자로 배열을 받는데, 그 배열안에 요소가 변화 할때마다
useEffect 함수가 실행이 된다.
아무것도 넣지 않으면 처음 랜더링 될때 1번만 실행 된다.

조건문을 넣어서 componentDidupdate 용도만으로도 쓸 수있다.

const mounted =useRef(false)
useEffect(() =>{
  if(!mounted.current){
  mounted.current = ture;
  }else{
  // 실행할 함수
 },[ 바뀌는 값]);