React 정복기(9) - useState 여러 번 사용 (함수형 컴포넌트)

하나의 useState 함수는 하나의 상태 값만 관리할 수 있음
컴포넌트에서 관리해야 할 상태가 여러 개라면 useState를 여러 번 사용하자!

Puppy.js

import React, {useState} from 'react';

const Puppy = () => {

    // 초기 값을 지정
    const [name, setName] = useState('멍멍이');
    const [age, setAge] = useState(0);
    const [count, setCount] = useState(0);

    const onChangeName = e => {
        setName(e.target.value);
    };
    const onChangeAge = e => {
        setAge(e.target.value);
    };

    return (
        <div>
            <div>몇 마리? : {count}</div>
            <button onClick={() => {
                setCount(count + 1);
            }}>입양 +1</button>
            <button onClick={() => {
                setCount(count + 2);
            }}>입양 +2</button>
            <hr/>
            <input type="text" value={name} onChange={onChangeName}/>
            <input type="text" value={age} onChange={onChangeAge}/>
            <div>이름 : {name}</div>
            <div>나이 : {age}</div>
        </div>
    );
}

export default Puppy;

좀더 연습해 볼까요??
갑자기 사과가 땡겨서 아래와 같이 사과를 그냥 둘지, 먹을지 결정하는 컴포넌트를 만들어 볼께요

먼저 Apple 컴포넌트를 추가해야하니 부모인 App.js 수정

App.js

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

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

export default App;

다음으로 Apple.js 파일 생성후 아래와 같이 컴포넌트 작성!

Apple.js

import React, {useState} from 'react';

const Apple = () => {
    const [behavior, setBehavior] = useState('그냥 둔다');
    const onClickAction = () => setBehavior('냠냠냠 먹는다');
    const onClickNoAction = () => setBehavior('살찐다 그냥두자');

    return (
        <div>
            <div>사과를 어떻게 할까요? <b>{behavior}</b></div>
            <button onClick={onClickAction}>먹어보자</button>
            <button onClick={onClickNoAction}>그냥 냅두자</button>
        </div>
    );
}

export default Apple;

작성 후 먹어보자 / 그냥 냅두자 버튼을 눌러 보면서 변화를 관찰하세요