[React] useState와 useEffect 사용하기

안녕하세요 오늘은 지난 시간에 이어 react의 useEffect 기능을 사용해보려고 합니다.

지난 시간 링크 : https://stickode.tistory.com/927

 

여기서 Home.js를 수정해 보겠습니다.

먼저 useState와 useEffect를 import 해주겠습니다.

useState는 컴포넌트에서 상태관리하는 함수로 저희는 예시로 Num값을 계속 올려주면서 적용이 되는지 확인을 할 것입니다.

 

import React, { useState, useEffect } from 'react';

const Home = () => {

    const [Num, setNum] = useState(0);

    useEffect(() => {

            const intervalId = setInterval(fetchData, 1000);            

            return () => clearInterval(intervalId);

    }, []);

    const fetchData = () => {

        setNum(prevNum => prevNum + 1);

    };

    return (

        <div>

            <p>{Num}</p>

        </div>

    );

  };

 

  export default Home;

setInterval함수를 통해 매 1초마다 Nun을 1씩 올려줄것입니다.