[React] useEffect

함수형 컴포넌트의 생명주기, useEffect

함수형 컴포넌트에서의 생명주기관련 훅은 = useEffect

componentDidMount

useEffect(()=>{
		console.log("마운트 됨!!")
},[])

[ ] 대괄호는 의존성 배열이라는 뜻

componentDidUpdate

useEffect( ()=> {
    console.log("💛componentDidUpdate와 동일, 변경되고 나서 실행!!")
  }, [])
 // 배열안에 변수를 넣으면 그 값이 변경될 때 실행
 // []안에 아무것도 작성되지 않으면 모든 변경에 대해 실행

componentWillUnmount

  useEffect(() => {
    return () => {
      console.log("💚componentWillUnmount와 동일, 사라질 때 실행!!");
    };
  }, [""]);

useEffect 사용법

• 하나로 합치기 가능

  useEffect(() => {
    console.log("그려지고 나서 실행!");
    return () => {
      console.log("사라질 때 실행!!");
    };
  }, [count]);

useEffect의 잘못된사용법

1. 추가렌더링 발생 가능

  useEffect(() => {
    setCount(5);
  }, []<);

2. 무한루프 발생 가능

  useEffect(() => {
    setCount(5);
  }, [count]);

count의 값을 변경하고 리렌더링 되고, 또 count의 값이 변경되어서 또 그려지고 .. 무한루프의 늪에 빠짐

❗️가급적 useEffect안에서 setState는 피하자!

💡useEffect의 실행 시점
→ 생명주기 메서드,훅 은 기본적으로 렌더(화면그리기) 이후에 실행된다.
따라서 useEffect와 lifecycle 메서드는 렌더 이후에 실행된다.