• 목차

개요

• App.js 의 삭제 버튼을 클릭하였을 때 이벤트가 발생하도록 해보자.

• 바닐라 자바스크립트에서는 하기와 같이 버튼에 이벤트 명령을 주었다.

  document.querySelector('button').addEventListener('click');
  

  • DOM 객체에 직접 접근하여 버튼에 listener 를 주었다.
  • 하지만 이 방법은 명령형 접근(어떤 일이 일어나야 하는지를 기술)이다.
  • 리액트는 **선언형 접근(목표 결과를 기술)**을 사용한다.
  • 그러므로 해당 코드는 리액트에서 사용할 수 없다.

Todo.js

function Todo(props) {
  function deleteHandler() {
    // console.log("clicked!")
    // console.log(props.text)
  }

  return (
    <div className="card">
      <h2>{props.text}</h2>
      <div className="actions">
        <button className="btn" onClick={deleteHandler}>Delete</button>
      </div>
    </div>
  )
}

export default Todo

• jsx 코드 안에 있는 버튼, 혹은 다른 HTML element 에도 onClick 속성을 추가할 수 있다.
• 일반 HTML element 와 달리 소문자 o 에 대문자 C 를 구별해야 한다.
• onClick 에 할당하는 값은 동적 표현식이며, 함수를 사용할 수도 있다.
• 동적 표현식에 들어가는 함수는 실행하지 않기 떄문에 괄호 () 를 붙이면 안된다.
  • 괄호를 붙여서 함수가 실행된다면 자바스크립트와 리액트가 코드를 검증하는 시점에 실행된다. 하지만 우리는 버튼을 클릭하였을 때 실행되는 것이 목적이므로 괄호를 붙이지 않는다.

Modal.js

function Model() {
  return (
    <div className={"modal"}>
      <p>Are you sure?</p>
      <button className={"btn btn--alt"}>Cancel</button>
      <button className={"btn"}>Confirm</button>
    </div>
  )
}

export default Model

• 컴포넌트 함수들은 작고 유지보수 쉽게 유지하는 것이 좋다.
• jsx 코드들은 너무 복잡하면 안된다.
• 그러므로 delete 버튼 클릭 시 사용할 모달을 다른 컴포넌트로 만들었다.
• 이제 모달 뒤에 보일 회색 배경(Backdrop.js)을 만들어보자.

Backdrop.js

function Backdrop() {
  return (
    <div className={"backdrop"} />
  )
}

export default Backdrop

.backdrop {
    position: fixed;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.75);
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
}