[230509] React 이벤트

⚛️ React 이벤트

• React의 이벤트는 카멜케이스를 사용한다.
• JSX를 사용하여 함수로 이벤트 핸들러를 전달한다.

상태 관리 + 이벤트
reconciliation(재조정)을 통해 바뀐 부분만 빠르게 렌더링 해주기 위해 useState를 사용한다.

import { useState } from "react";

function App() {

  const [id, setId] = useState("");
  const [pw, setPw] = useState("");

  const handleLoginSubmit = (e) => {
    e.preventDefault();
    console.log("submit");
    if(id === ''){
      alert('아이디를 입력하지 않았습니다.')
    }
    if(pw === ''){
      alert('패스워드를 입력하지 않았습니다.')
    }
    alert(`id : ${id}, pw : ${pw}`);
  };

  const handleLoginInput = (e) => {
    console.log("id", e.target.value);
    setId(e.target.value)
  };

  const handlePasswordInput = (e) => {
    console.log("pw", e.target.value);
    setPw(e.target.value)
  };

  return (
    <form onSubmit={handleLoginSubmit}>
      <label>
        아이디 : <input type="text" onChange={handleLoginInput} />
      </label>
      <br/>
      <label>
        비밀번호 : <input type="password" onChange={handlePasswordInput} />
      </label>
      <button type="submit">로그인</button>
    </form>
  );
}

export default App;

💡 on이벤트이름={실행하고싶은함수} 형태로 설정해야 한다. 이벤트를 설정할 때에는 함수타입의 값을 넣어주어야 한다. (on이벤트이름={실행하고싶은함수()}와 같이 함수를 실행하면 안된다.)
💡 onSubmit 속성은 form 태그 내부에서만 사용가능하다.
💡 e.preventDefalut()를 입력해 submit 관련 태그 고유의 동작(양식 제출, 새로고침으로 flashing 현상. Ajax가 아니기 때문에)을 막는다.

💻 사용자 정보를 이용해 로그인 처리

💻 모달
부모 컴포넌트에서 자식 컴포넌트 안의 내용을 바꾸고 싶은 경우

import { useState } from "react";

function App() {
  const [modalShow, setModalShow] = useState(true);

  // setModalShow() 함수를 사용하는 함수
  // 모달을 여러 개 사용할 경우 부모 컴포넌트에 두고 전달하여 재사용성을 높인다
  function modalClose() {
    setModalShow(false);
  }

  return (
    <>
      {modalShow && (
        <Modal modalClose={modalClose}>
          <h2>사용약관에 대해 말씀드리겠습니다.</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi illum laborum, quo facilis eaque quam optio aliquam nam provident.</p>
          <a href="#none">더 보기</a>
        </Modal>
      )}
    </>
  );
}

export default App;

💡 props 파라미터에 JSX도 전달할 수 있다.
💡 JSX는 false, true를 화면에 아무것도 그려주지 않는다.

export default function Modal(props) {
  function close() {
    props.modalClose(true);
  }
  
  return (
    <div className="modal-backdrop">
      <article className="modal">
        {props.children}
        {/* <h2>홈페이지에 오신 것을 환영합니다!</h2>
        <p>좋은 하루 되세요!</p> */}
        <button onClick={close}>닫기</button>
      </article>
    </div>
  );
}

props 파라미터에 JSX를 전달하면 props의 children으로 받을 수 있다.
여러 가지 모달을 만들지 않아도 동적으로 만들 수 있다.

리액트는 모든 것을 상태로 관리한다!!
변수의 변화를 화면에 반영하라고 하지 않으면 리액트는 모른다.