Component LifeCycle & useEffect

class형 컴포넌트는
1. 컴포넌트 생성
2. componentDidMount
3. componentDidUpdate
4. componentWillUnmount
4가지 컴포넌트를 사용한 component lifecycle을 가지지만,

함수형 컴포넌트는 useEffect를 이용한다.

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


export default function CounterPage() {
    // inputRef = createRef<HTMLInputElement>();
    const inputRef = useRef<HTMLInputElement>(null);

    const [count, setCount] = useState(0)
    const router=useRouter();

    
    useEffect(()=>{
        console.log("수정되고 다시그려짐")
        inputRef.current?.focus()
    }) 
    useEffect(()=>{
        console.log("마운트됨!!")
        inputRef.current?.focus()

        return () =>{
            console.log("컴포넌트 사라짐")
        }
    },[])

##  useEffect의 잘못된 사용 예(1. 추가랜더링) 
    useEffect(()=>{
        setCount(10)
    },[])

## useEffect의 잘못된 사용 예(2. 무한루프)
    useEffect(()=>{
        setCount(prev => prev + 1)
    },[count])

    const onClickCounter = () => {
        setCount((prev) => prev+1)
    }


    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>
        ) 
}

위 코드를 실행하면 아래와 같이 콘솔에 찍히는데,
이유는 useEffect는 화면이 한번 그려진 다음에 실행되는 함수이기 때문이다.

useEffect함수의 뒷부분에 대괄호가 있는 부분은 의존성 배열(Dependency Array) 이라고하는데, 이 부분이 비어있으면 한번만 실행되고 끝난다.

하지만 의존성 배열에 count가 들어있으면 count가 변경될때마다 실행된다.

마운트됨 부분과 컴포넌트 사라짐 부분은 같은 모양이라서 합쳐주었다.

useEffect의 잘못된 사용

1. 추가랜더링
   useEffect안에 setState를 사용하면 불필요한 랜더링이 일어나므로 사용하지 않는 것이 좋다.
2. 무한루프
   위의 코드와 같은 상황에 무한루프에 빠질 수 있다....