21) UseEffect

useEffect 함수는 리액트 컴포넌트가 랜더링 될 때 마다 특정작업을 실행할 수 있도록 하는 Hook이다.
useEffect는 컴포넌트가 mount 되었을 떄, unmount되었을 때, update 되었을 때, 특정 잡업을 처리할 수 있다.
클래스형 컴포넌트에서 사용했던 생명주기 를 함수형 컴포넌트에서도 사용하는 것이다.

// 클래스형 컴포넌트

// componentDidMount() {
  //   console.log("마운트됨!!!");
  //   // 포커스 깜빡깜빡
  // }

  // componentDidUpdate() {
  //   console.log("수정되고 다시그려짐!!!");
  // }

  // componentWillUnmount() {
  //   console.log("컴포넌트 사라짐!!!");
  //   // 채팅방 나가기
  //   // api 요청!!!
  // }


// 함수형 컴포넌트
 useEffect(() => {
    console.log("마운트됨!!!");
    // 포커스 깜빡깜빡
  }, []); // 의존성 배열 count가 변경이 되면 다시 실행 됨 비어있으면 componentDidMount

  useEffect(() => {
    // 배열이 없다 conponentDidUpdate 이다.
    console.log("수정되고 다시그려짐!!!");
  });

  useEffect(() => {
    return () => {
      console.log("컴포넌트 사라짐!!!"); // ComponentWillUnmount
      // 채팅방 나가기
      // api 요청!!!
    };
  }, []);