[ React ] useState()를 활용해보자. (feat. TypeScript)

 

👨🏻‍🍼 useState

특정 값을 useState()로 선언하여서 값의 상태를 관리하고, 해당 값의 상태가 변경되면 화면을 리렌더링하여 클라이언트에게 보여준다.

이때, 리렌더링이 일어나는 컴포넌트에 자식 컴포넌트가 있다면, 자식 컴포넌트 또한 다시 불러와지면서 자식 컴포넌트까지 리렌더링 됩니다.

 

💻 Code

리액트 프로젝트를 만들고, 다음 파일을 만들어준다.

 

📄 StateComponent.tsx

import React, { useState } from 'react'

export function StateComponent(): JSX.Element {
  const [num, setNum] = useState<number>(0)

  const onIncrease = () => setNum(num + 1)
  const onDecrease = () => setNum(num - 1)

  return (
    <div style={{ textAlign: 'center' }}>
      <p style={{ fontSize: '5rem' }}>{num}</p>
      <button onClick={onIncrease}>INCREASE</button>
      <button onClick={onDecrease}>DECREASE</button>
    </div>
  )
}

 

다음과 같이 작성해준다.

useState() 선언 시, <Array>타입으로 두 개의 변수를 선언해주는데

const [해당 값을 담을 변수명, 값을 관리할 함수명] =  useState<Type>(초기화값)

다음과 같은 모양으로 선언한다.

 

return()에 HTML에서 스크립트 언어를 사용하고 싶으면 { }를 사용하면 된다.

 

페이지 첫 진입로인 App.tsx를 수정해준다.

 

📄 App.tsx

import { StateComponent } from './components/StateComponent'

function App(): JSX.Element {

  return (
    <>
      <StateComponent />
    </>
  )
}

export default App

 

 

그리고 터미널에서 리액트 서버를 열어주면 다음과 같이 나타난다.

 

$ npm start

 

 

 

 

"INCREASE"버튼과 "DECREASE"버튼을 통해 해당 숫자를 클릭했을 때 즉시 해당 값이 변경되는 것을 볼 수 있다.