[React] 리액트 시작하기(4) - State란?

* state란?

: 컴포넌트 내에서 지속적인 변경이 일어나는 값을 관리하기 위해 사용

  리액트 이벤트에 의해 변경되는 동적인 값

 

* 사용하기

: 'useState' 라는 Hook을 이용하여 state를 다룰 수 있다.

   const [ 상태 ,세터함수 ] = useStae(초기값)

 

현재 시간 가져오는 예제

import React, { useState } from 'react';

function Main(props) {
   const [timer, setTimer ] = useState("00:00:00");

   const currentTimer = () => {
    const date = new Date();
   
    const hours = String(date.getHours()).padStart(2,"0");
    const minutes = String(date.getMinutes()).padStart(2,"0");
    const seconds = String(date.getSeconds()).padStart(2,"0");
    setTimer(`${hours}:${minutes}:${seconds}`)
   }

   const startTimer = () => {
    setInterval(currentTimer, 1000);
   }

   startTimer()

    return (
        
        <div>
            <main>
                <h1>여기는 메인</h1>
                <h1>{timer}</h1>
            </main>
        </div>
        
    );  
}
export default Main;