UseEffect

UseEffect: 1. 함수형 컴포넌트    2. 랜더링 될 때 와 상태가 변경될 때 부수효과 처리    3.Hook 

부수효과란: SIDE Effect=부작용 ---> 본래 원했던 효과가 아닌 다른 효과가 부수적으로 딸려온다 

정리하면 내가 짠 코드가 원하는 대로 동작하지 않는 게 아니고 코더가 함수등에 본해 메인 역할 외에 다른 효과를 추가한다 

 

• useEffect사용법 
• -첫 번째 인자 : 부수 효과 
• 두 번째 의존성 배열(deps- dependencies)

UseEffect 종류 -> 1-2-3 순으로 보면 된다.

1. 값이 있는 배열  : 해당값이 마운트 될 때마다  실행 (여러 개 가능)
useEffect(() => { 
- 부수 효과 코드를 작성   -2
return () => { 
  -정리(clean-up) 코드 - 언마운트 시 실행 -3 };
}, [의존성 배열을 작성] -1);

2. 빈 배열 : 컴포넌트가 마운트 될 때  한 번만 실행 
useEffect(() => { 
- 부수 효과 코드를 작성   
return () => { 
  -정리(clean-up) 코드 - 언마운트 시 실행 
};
}, [  ]);

주로 사용하곳  -< 데이터 가져오기 , 타이머 설정 ㅡ 이벤트 리스너 등록 등에 사용   >

 

마운트(mount) : 화면에 데이터가 나타는 것을 의미  ====> 컴포넌트가 나타나는 것

마운트  될 때 :  props로 받는 값을 컴포넌트의 state로 설정할 때, setInterval이나 setTimeout과 같은 같은 작업 

 

언마운트 (unmount): 데이터가 삭제될 때 

언마운트 될 때 : setlnterval, setTimeout을 사영해서 등록했던 작업을 제거할 때 

->클린업 작업 할 때 

 

export default function B_useEffect() {
  
  const [count, setCount] = useState<number>(0);
  const [isRunning, setIsRunning] = useState<boolean>(false);

  useEffect(() => {
    // 타이머 효과를 구현
    let interval: NodeJS.Timeout | undefined;
    if (isRunning) {
      interval = setInterval(() => {
        setCount(prevCount => prevCount + 1);
      }, 1000); // 1000밀리초(1초)에 한 번씩 첫 번째 인자의 함수 실행
    }

    return () => clearInterval(interval);
  }, [isRunning]);
  
  const handleButtonClick = () => {
    setIsRunning(prevIsRunning => !prevIsRunning);
  }

  return (
    <div>
      <p>Timer: {count} seconds</p>
      <button onClick={handleButtonClick}>
        {/* 실행 중이면 'Stop'버튼, 실행 중이 아니면 'Start'버튼 */}
        {isRunning ? 'Stop' : 'Start'}
      </button>
    </div>
  )
}