[React - Hook] useEffect을 사용해 시계만들기

useEffect 란 ?

 

-  어떤 컴포넌트가 마운트,업데이트,언마운트 될 때 특정 작업을 처리할 때 사용

 

- Side effect를 수행하기 위한 Hook

react에서의 Side effect란?
→ 서버에서 데이터를 불러오거나, 수동으로 Dom을 변경하는 등의 활동
→ 즉 해석을 영향이라고 하면된다, 

 

---

- 사용법

useEffect(이펙트 함수()=>{
	//작업..
    
    return () =>{
    	//컴포넌트가 언마운트될 때, 또는 다음 렌더링시 불릴 useEffect가 실행되기 이전에 실행
    }
},[의존성 배열]);

 

 

의존성 배열?  말 그대로 effect가 의존하는 배열! 이 배열이 변경되면 effect 함수가 실행된다.

 

 

Q1 .의존성배열을 생략하면 ?

-  컴포넌트가 업데이트 될 때마다 호출

 

 

Q2. 이펙트 함수를 mount, unmount 시에 단 한번만 실행되게 하려면 ?

-  배열에 [ ] 를 넣어준다.

 

 

Q3. return () 의 의미 ?

 

- 컴포넌트가 unmount될 때, 또는 다음 렌더링 시 불릴 useEffect가 실행되기 이전에 (즉, update 되기 직전에) 실행되는 코드이다.

 

- 이때 return뒤에 실행되는 함수를 clean-up 함수 ,뒷정리 함수 라고 부른다.

 

 

 

---

 

useEffect에서 컴포넌트가 마운트,언마운트 될때는? 

 

[마운트 되는경우]

 

- setInterval , setTimeout 같은 작업

 

- 컴포넌트가 나타나고 외부 API를 요청할 때

 

- props로 받은 값을 컴포넌트의 state로 설정할때

 

- 라이브러리 사용 시

 

 

[언마운트 되는 경우]

 

- setInterval, setTimeout 같은 작업을 제거할때 

 (clearInterval , clearTimeout)

 

- 라이브러리 인스턴스를 생성하고 이를 제거할때

 

 

 

---

 

시계를 만들기

 

[코드] - App.js

import { useState, useEffect } from "react";  // useEffect를 import

function Time(props) {
  const [today, setToday] = useState(new Date());
  const hour = today.getHours();
  const min = today.getMinutes();
  const sec = today.getSeconds();

  console.log("렌더링이 됩니다..?")
  useEffect(() => {
    let time = setInterval(() => {  // 1초씩 반복동작하는 타이머 생성 
      const t = new Date();  
      setToday(t); // 여기서 state가 변화되어 재렌더링된다.
    }, 1000);
    return () => {
      clearInterval(time);  //clearInterval함수로 호출 스케줄링 취소
    };
  }, [today]);

  return (
    <div>
      <h1>
        시간 : {hour}시 {min}분 {sec}초
      </h1>
    </div>
  );
}

export default Time;

 

useEffect를 사용하였기에 의존배열 (여기선 today) 가 변경되면 안에 있는 함수를 실행해준다.

 

0. useEffect를 import해준다.

 

1. 처음 코드가 실행되고 렌더링이 되면서 mount되었으므로 useEffect가 실행된다.

 

2. useEffect의 콜백함수로는 setInterval 함수를 이용해 1초씩 반복하는 타이머를 생성한다.

여기서 setToday(t)로인해 today가 변했으므로 retrun문으로 간다.

 

3.  return문에서는 update가 되기 전 clearInterval함수로 등록된 작업을 제거 해준다.  clean-up 함수라고 부른다.  (여기서 만약 cleanup 함수를 사용하지 않으면 무수한 렌더링이 일어나게 된다.)

 

4. 그 후 update를 통해 (setToday(t)에 의해) 다시 useEffect의 콜백함수로 들어가서 2~5를 반복한다. 

 

 

---

 

 

[결과]

그러면 새로고침을 하지 않아도 실시간으로 바뀌게 된다.