[React] state를 이용해 간단한 count 기능을 만들어보자

오늘 만들 것은

버튼을 눌렀을 때마다 카운트가 1씩 증가하는 기능을

React의 state를 이용하여 만들어 볼 것이다.

 

1. 틀 만들기

일단 기본적인 틀을 잡고 시작하자.

import React from 'react';
import './App.css'

export default function App() {
  return (
    <main>
      <div>0</div>
      <button>증가</button>
    </main>
  )
}

현재 카운트를 보여줄 div 박스 하나와 버튼 하나를 만들어 주었다.

---

2. 변수 설정과 클릭 이벤트를 주자

여기서 우리가 하고 싶은 것은 버튼을 클릭하면

div박스에 있는 숫자가 계속해서 증가하는 것이다.

div박스 안에 있는 숫자가 계속 변해야 하기때문에 우리의 div박스 안의 값을 변수로 만들어 주어야 한다.

또한 클릭했을 때 어떤 이벤트가 일어나야 하기 때문에 버튼에 onClick 속성을 준다.

import React from 'react';
import './App.css'

export default function App() {
  let count = 0;
  return (
    <main>
      <div>{count}</div>
      <button onClick={increase}>증가</button>
    </main>
  )
}

---

3. import문 작성하기

우선, state를 사용하려면 import문을 작성해야 한다.

import React,{useState} from 'react';

기존의 import React from 'react';를 import React,{useState} from 'react';로 변경해주자.

그럼 이제 우리는 state를 사용할 수 있게 된 것이다.

---

4. state 선언하기

state의 기본적인 구조는 

const [변수,set함수] = useState(초기값)이다.

풀어서 말하면 .

변수: 초기값을 저장하고 있는 state 변수

set함수: state의 값을 업데이트 해주는 함수 라고 볼 수 있다.

const [count, setCount] = useState(0);

위의 코드를 보면  

초기값: 0

변수: count

set함수: setCount 인것을 볼 수 있다.

---

5. 본격적으로 state 사용하기

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

export default function App() {
  const [count, setCount] = useState(0);
  const increase = () => {
    
  }
  return (
    <main>
      <div>{count}</div>
      <button onClick={increase}>증가</button>
    </main>
  )
}

우리는 클릭을 했을때마다 카운트의 값이 업데이트 되어야 하기 때문에

increase 함수 안에서 state를 사용하면 된다.

사용 방법은 계속 업데이트를 해야하니까

setCount를 불러주고 ( )안에 주고 싶은 값을 주면 된다.

이 예제에서는 count가 1씩 증가를 해야하니까 count+1를 ( )안에 넣어주었다.

const increase = () => {
  setCount(count+1);
}

---

6. 결과 확인

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

export default function App() {
  const [count, setCount] = useState(0);
  const increase = () => {
    setCount(count+1);
  }
  return (
    <main>
      <div>{count}</div>
      <button onClick={increase}>증가</button>
    </main>
  )
}

클릭할때마다 값이 계속 바뀌는 것을 볼 수 있다.

 

우리는 이것을 통해 state가 바뀌면 UI가 자동으로 바뀌는 것을 알 수 있다.