[React] useState (1): 렌더링 업데이트 사용하기

지난 포스팅에서는 리엑트(React)에서 엘리먼트를 렌더링 해서 화면에 뿌려주는 방법을 알아보았습니다. 최종적으로는 root라는 id의 div 태그 내부에 프로그래머가 개발한 소스가 들어가게 됩니다. 그렇다면 데이터 업데이트는 어떻게 할까요?

이번 포스팅에서는 useState를 이용해서 렌더링 된 값을 변경해서 업데이트하는 방법을 알아보겠습니다.

---

useState를 사용해야 하는 이유

리엑트(React)는 이전 포스팅에서 말씀드렸듯이 한번 렌더링 되어 root 내부에 삽입된 엘리멘트들은 화면을 새로고침 하거나 ReactDOM을 다시 렌더링 하지 않는 이상 업데이트가 되지 않습니다.

 

그래서 내부의 어떤 값을 변경하기 위해서 사용하는 함수가 바로 useState() 함수입니다. 그럼 이 함수를 이용해서 어떻게 변경된 부분만 업데이트하는지 알아볼게요.

---

useState 사용방법

useState는 함수입니다. 이 함수를 이용해서 변수를 만들고 이 변수의 값을 변경해줍니다. 이렇게 변경된 값은 화면을 새로고침 하지 않아도 업데이트하여 반영해주는 것이 리엑트(React)의 특징입니다.

 

이 함수를 사용하기 위해서는 상단에 아래와 같이 함수를 import 해줘야 합니다.

import { useState } from 'react';

이렇게 import 해주었다면 이제부터는 프로그램 내부에서 useState를 사용할 수 있습니다. 그럼 useState() 함수를 이용해서 변수를 생성하도록 하겠습니다.

const [time, setTime] = useState();

일반적인 변수 선언과는 다른 점이 있습니다. 첫 번째 배열 인자는 실제 저장할 데이터입니다. 그리고 두 번째 배열 인자는 변경할 함수의 이름을 만들어 주는 것입니다. 예를 들면 아래와 같은 형태가 되는 것입니다.

let time;
let setTime = (newtime) => {
  time = newtime;
}

그래서 time 값을 바꿔주기 위해서는 두 번째 인자로 들어간 함수를 이용해서 값을 변경합니다. 그럼 실제로 시간을 넣어보도록 하겠습니다.

import { useState } from 'react';
import './App.css';

function App() {
  const [time, setTime] = useState();

  const updateTime = () => {
    setTime(new Date().toLocaleTimeString());
  }

  setInterval(updateTime, 1000);

  return (
    <>
      <h1>Hello, Koonsland</h1>
      <h2>{time}</h2>
    </>
  );
}

export default App;

시간을 가져오는 방법은 new Date().toLocaleTimeString() 함수를 사용합니다. 이렇게 가져온 결과는 setTime() 함수를 이용해서 time 값을 수정하도록 합니다. 그리고 1초마다 실행해 주기 위해서 setInterval() 함수를 이용합니다.

 

1초에 한 번씩 updateTime() 함수가 실행되며 이 함수에서는 setTime() 함수가 실행되고 현재 시간을 업데이트해서 time에 저장합니다.

 

이렇게 저장된 time 변수의 값은 return값의 {time}에서 출력할 수 있고 1초에 한번씩 시간이 변경되는 결과를 보실 수 있습니다.

---

리엑트에서 변수를 사용할 때 Javascript에서 사용하는 방법과 다른 문법들이 있습니다. 이 문법들은 정해진 패턴이기 때문에 자주 사용해서 익숙해져야 할 부분들인 것 같습니다. 도움이 되셨으면 합니다. 이상입니다.