React 정복기(8) - useState (함수형 컴포넌트)

여기서는 다양한 React의 Hooks에 대해 얘기해봅시다

• Hooks는 리액트 v16.8에 새로 도입된 기능
• 함수형 컴포넌트에서도 상태 관리를 할 수 있는 usState
• 렌더링 직후 작업을 설정하는 useEffect 등의 기능 제공
• 기존의 함수형 컴포넌트에서 할 수 없었던 작업을 가능하게 함

이번에는 함수형 컴포넌트에서 state를 사용하는 방법에 대해 알아봅시다!!

강아지 입양 기능을 아래처럼 개선해 봅니다

App.js

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

const App = () => {
  return (
      <div>
          <Puppy />
      </div>
  );
}

export default App;

Puppy.js에 useState를 import 하고
const [변수명, set변수명] = useState(기본값);
형태를 사용하여 구현 합니다

• useState 파라미터 : 상태의 기본값
• useState를 호출하면 배열을 반환
  • 첫 번째 원소 : 상태 값
  • 두 번째 원소 : 상태를 설정하는 함수

Puppy.js

import React, {useState} from 'react';

const Puppy = () => {

    // 초기 값을 지정
    const [count, setCount] = useState(0);

    return (
        <div>
            <div>몇 마리? : {count}</div>
            <button onClick={() => {
                setCount(count + 1);
            }}>입양 +1</button>
            <button onClick={() => {
                setCount(count + 2);
            }}>입양 +2</button>
        </div>
    );
}

export default Puppy;