8.1.1 useState를 여러 번 사용하기

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

    이번에는 src 디렉터리에 Info.js 파일을 생성하여 다음 코드를 작성해 보세요.

    Info.js

    import React, { useState } from 'react';
     
    const Info = () => {
      const [name, setName] = useState('');
      const [nickname, setNickname] = useState('');
     
      const onChangeName = e => {
        setName(e.target.value);
      };
     
      const onChangeNickname = e => {
        setNickname(e.target.value);
      };
     
      return (
        <div>
          <div>
            <input value={name} onChange={onChangeName} />
            <input value={nickname} onChange={onChangeNickname} />
          </div>
          <div>
            <div>
              <b>이름:</b> {name}
            </div>
            <div>
              <b>닉네임:</b> {nickname}
            </div>
          </div>
        </div>
      );
    };
     
    export default Info;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.