useEffect

useEffect Hooks을 이용하여 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는지를 알려줍니다.
React는 우리가 넘긴 effect를 기억했다가 DOM을 업데이트 한 이후에 실행합니다

useEffect를 컴포넌트 안에서 불러내야 하는데 useEffect를 컴포넌트 내부에 둠으로써 effect를 통해 count state 변수 ( prop 역시 )에도 접근할 수 있습니다

import { useState, useRef, useEffect } from "react";
import { useRouter } from "next/router";

export default function CounterPage() {
  const router = useRouter();
  const inputRef = useRef<HTMLInputElement>(null);
  const [count, setCount] = useState(99);

  // 수정하고 리렌더링 하는 부분 리렌더가 될때 마다 실행되는 부분
  useEffect(() => {
    console.log("수정되고 다시 그려짐");
  }, []);

  

  // DidMount와 WillUnMount 합치기
  useEffect(() => {
    console.log("마운트됨!!");
    inputRef.current?.focus();
    return () => {
      console.log("컴포넌트 사라짐");
    };
  }, []); // []의 의미 의존성 배열 (dependency Array): 이 함수가 실행될지 말지를 의존중 한번만 실행되고 끝남 언제 다시 실행할 때까지 컨트롤이 가능하다

  // 5. useEffect의 잘못된 사용의 예(화면이 그려지고 나서 실행이 된다)
  // -렌더링이 두번되는 번거로움 발생하기 때문에 setState를 사용하는것을 가급적이면 피해라
  // -무한루프에 빠질 수 있다
  useEffect(() => {
    setCount((prev) => prev + 1);
  }, []);

  const onClickCounter = () => {
    // console.log(this.state.count);
    // this.setState((prev: IState) => ({
    //   count: prev.count + 1,
    setCount((prev) => prev + 1);
  };

  // this.setState Component에 있는 내장함수이다 자동으로 사용가능

  const onClickMove = () => {
    router.push("/");
  };

  console.log("나는 언제 실행될까");

  return (
    <div>
      <input type="text" ref={inputRef} />
      <div>현재카운트: {count}</div>
      <button onClick={onClickCounter}>카운트 올리기!!</button>
      <button onClick={onClickMove}>나가기 바이바이</button>
    </div>
  );

  // render도 extends Component로 확장했기 떄문에 사용 가능 render 이름 변경 불가
}

[]의 의미 의존성 배열 (dependency Array)

이 함수가 실행될지 말지를 의존한다
한번만 실행되고 끝나지만 다시 실행할 때까지 컨트롤이 가능하며
의존성 배열[] 안의 내용에 들어있는 요소가 변경될 때, 실행 된다
의존성 배열이 없다면 렌더링이 일어날때마다 실행되고
[] 빈배열만 있다면 최초 렌더링이 일어날 때만 실행이 되고
[data] 배열안에 값이 들어 있다면 최초 렌더링시와 배열안의 값이 변경될때 실행된다

useEffect의 잘못된 사용의 예(화면이 그려지고 나서 실행이 된다)

-렌더링이 두번되는 번거로움 발생하기 때문에 setState를 사용하는것을 가급적이면 피해라

컴포넌트가 마운트된 이후에 setState를 적용하게 되면,
state가 변경되고, 변경된 state로 컴포넌트가 다시 그려집니다.
즉 렌더링이 1번 더 일어나게 됩니다.
그렇다면 비효율적인 코드가 작성됩니다

-무한루프에 빠질 수 있다

useEffect(() => {
setCount((prev) => prev + 1);
}, [count]);
를 한다면 무한 반복되는 카운트를 볼 수 있을것이다