useState로 여러 상태 관리하기

useState로 여러 상태 관리하기

 

import { 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>Name: </b> {name}
        </div>
        <div>
          <b>Nickname: </b> {nickname}
        </div>
      </div>
    </div>
  );
};

export default Info;

지금까지 책의 예제를 보면 onChangeXX 이벤트 발생 시, input창에만 표시하는 경우만 있었다. 그런데 이번에 <div>에 렌더링을 하는데 그 보여지는 효과가 흥미롭게 느껴진다. 누군가가 대신 글을 쓰는 듯한 마법? 착시?효과 같은 것 때문일까. 

Franklin note에서 글을 작성하고 있을 때 어딘가에 이런 효과를 보여주는 기능이 있으면 어떨까