React 시작하기 4. useState

 

 

App.js

import React from 'react';
import Counter from './Counter';  // Counter import

function App() {
  return (
    <div>
      {/* Counter 불러오기 */}
      <Counter />
    </div>
  );
}

export default App;

 

Counter.js

import React, { useState } from 'react';  // useState : 컴포넌트의 동적인 값 관리

function Counter() {
  /**
   * useState 함수는 상태의 기본값을 파라미터로 넣어서 호출
   * useState의 반환값 [0] : 현재 상태
   * useState의 반환값 [1] : Setter 함수
   */
  const [Number, setNumber] = useState(0);

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

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

  /**
   * @Number : useState에서 관리하는 현재 상태 변수
   * @onIncrease : Setter 함수를 호출하는 함수 (사용자가 선언한 함수)
   * @onDecrease : Setter 함수를 호출하는 함수 (사용자가 선언한 함수)
   */
  return (
    <div>
      <h1>{Number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;