React - 상태와 이벤트 바인딩

 

지역상태를 관리하기 위해서는 useState를 사용한다.

const [state, setState] = useState(initialState);

 

이벤트 바인딩

export default function Button() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

 

인라인 정의

<button onClick={function handleClick() {
  alert('You clicked me!');
}}>

 

화살표 함수 정의

<button onClick={() => {
  alert('You clicked me!');
}}>

 

주의점

 

이벤트 핸들러로 props 읽기

function AlertButton({ message, children }) {
  return (
    <button onClick={() => alert(message)}>
      {children}
    </button>
  );
}

export default function Toolbar() {
  return (
    <div>
      <AlertButton message="Playing!">
        Play Movie
      </AlertButton>
      <AlertButton message="Uploading!">
        Upload Image
      </AlertButton>
    </div>
  );
}

 

 

이벤트 전파 막기

function Button({ onClick, children }) {
  return (
    <button onClick={e => {
      e.stopPropagation();
      onClick();
    }}>
      {children}
    </button>
  );
}

 

 

이벤트 기본동작 막기

export default function Signup() {
  return (
    <form onSubmit={e => {
      e.preventDefault();
      alert('Submitting!');
    }}>
      <input />
      <button>Send</button>
    </form>
  );
}