React.js | 입문 | useState

전체코드

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(number + 1);
  }

  const onDecrease = () => {
    setNumber(number - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

 

 

1. 먼저 react 패키지에서 useState를 불러온다.

 

import React, { useState } from 'react';

 

 

2. 그 다음 변수 이름과 set함수 이름을 선언하고, useState()의 인자값으로 변수의 초기값을 설정한다.

 

const [number, setNumber] = useState(0);

 

 

 

3. onClick함수로 실행될 함수들을 선언한다.

 

  const onIncrease = () => {
    setNumber(number + 1);
  }

  const onDecrease = () => {
    setNumber(number - 1);
  }

 

 

4. return 안 버튼에 onClick쪽에 위에 선언한 함수를 넣어준다.

 

return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );

 

 

참조

https://react.vlpt.us/basic/07-useState.html