react LifeCycle과 useEffect

컴포넌트의 라이프사이클(렌더링/재렌더링/삭제) 중에 내가 원하는 코드를 집어넣을수있다.
대표적으로 컴포넌트 렌더링/재렌더링/삭제시 실행되는 코드를 만들수있다.

그래서 useEffect가 뭔데요?

useEffect : 리액트 훅(함수 / 기능).
사이드이펙트에서 따온 이름.
컴포넌트 렌더링/재렌더링시 실행되는 코드.
html이 다 띄워지고 난 후에 동작하는 코드(간지나는 이름으로는 콜백함수)들을 모아놓기 좋다.

그래서 이거 언제 쓰는데요?

타이머 사용 시.
실행이 오래걸리는 코드 돌릴 때.
서버에서 받아오는 데이터가 있을 때.

이럴 때 많이 씀.

이런것들은 html 다 띄우고 난뒤에 동작하는게, 페이지 나타내는데 더 빠르다.
간지나는 이름으로는 페이지 렌더링속도를 증가시킬수있음.
그리고 타이머같은경우는 더 크리티컬한게,
페이지가 로딩때문에 몇초 느리게 떴는데 이미 타이머가 돌아가는 불상사를 막을수있다.

오늘 할 숙제

디테일 페이지 렌더링후 2초후에 특정div 안보이게하기.

1. 스위치 하나 만들기(true / false)
2. 컴포넌트 하나 만들기(대충 TimeOutDiv라고 이름지음)
3. 컴포넌트 나타날 자리에 3항연산자. 스위치가 true? : null 적음
4. useEffect에 setTimeout넣고, 2초 뒤에 스위치 false만듬

  const [전등, 전등누르기] = useState(true);
  useEffect(() => {
    setTimeout(() => {
      전등누르기(false);
    }, 2000);
  });
.
.
.
return(
	{전등 == true ? <TimeOutDiv /> : null}
);
.
.
.
const TimeOutDiv = (props) => {
  return <div className="timeOutDiv">2초 후에 사라집니다. 뿅!</div>;
};

이렇게 시점을 나누어 무언가를 실행시킬 수 있다니....와 정말 유용하겠는걸?!