오늘의 React

1. input 

• input를 쓸 땐 반드시 끝내던지 <input></input> 아니면 <input/> 이렇게 해야한다.
• <input type="종류">- text, range, checkbox, date 등등
• select는 옵션 선택
• textarea는 작성할 수 있는 크기가 더 커짐
• 만약에 뭔가 입력시 코드 실행하고 싶으면 아래 두 개 작성
  • <input onChange={() => {}}>
  • <input onInput={() => {}}>
• <input onMouseOver={() => {}}> 하면 마우스를 올려 놨을때 코드가 작동한다.
• 이벤트핸들러 매우 많다.
• input에 입력한 값 가져오는 법
  • e = 이벤트 객체(지금 발생하는 이벤트에 관련한 여러 기능이 담겨 있다.)
  • <input onChange={(e) => {console.log(e.target.value)}}>
  • target은 이벤트 발생한 html 태그
  • value는 이벤트 발생한 html태그에 입력한 값
• 현재 span 태그를 눌러도 모달창이 나오는것은 그것을 감싸고 있는 h4 그리고 div까지 총 3번 누르게 된다.
• 클릭이벤트는 상위html로 퍼짐(이벤트 버블링)
• 상위html로 퍼지는 이벤트버블링을 막고 싶으면 e.stopPropagation()을 사용.

/* eslint-disable */

import { useState } from "react";
import './App.css';

function App() {

  let [메뉴, 메뉴변경] = useState(["김밥", "라면", "떡볶이"]);

  let [modal, setModal] = useState(false);

  let [따봉, 따봉변경] = useState([0, 0, 0]);


  let [title, setIndex] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>blog</h4>
      </div>

     {
      메뉴.map(function(a, i) {
        return (
          <div className="list" key={i}>
            // 따봉 +1
            <h4 onClick={() =>
            {setModal(!modal); setIndex(i)}}>
            { 메뉴[i] }
            <span onClick={ (e) => { e.stopPropagation();
              let copy = [...따봉];
              copy[i] = copy[i] + 1;
              따봉변경(copy);
             } }>👍</span> { 따봉[i] } </h4>
            <p>2월 7일 발행</p>
            // 삭제코드
            <button onClick={()=>{ 
              let copy = [...메뉴];
              copy.splice(i, 1);
              메뉴변경(copy);
           }}>삭제</button>
          </div>
        )
      })
     }

    {
      modal == true ? <Modal
      메뉴={메뉴} 메뉴변경={메뉴변경} title={title}/> : null
    }

    </div>

  );
}


function Modal(props) {
  return (
      <div className = "modal">
        <h4>
          { props.글제목[props.title] }
        </h4>
        <p>날짜</p>
        <p>상세내용</p>
        <button>글수정</button>
      </div>
  )
};

export default App;

• state변경함수는 늦게 처리된다.(전문용어로 비동기처리)

  <input onChange={(e) => {
    // 이거 완료되기 전에
    입력값변경(e.target.value);
    // 다음줄 실행해준다.
    console.log(입력값) }} />