React input, class

 

 

 

 

 

 

 

 

React input

종류 : text, range, checkbox 등등

e.target.value : 입력한 값을 가져옴

e.stopPropagation() : 상위 html로 퍼지는 이벤트버블링을 막고 싶을때 사용

splice() : 배열에서 특정 인덱스 삭제

/* eslint-disable */
import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function App() {

  let [글제목, 글제목변경] =useState(['남자 코트 추천', '강남 우동맛집', '파이썬독학'])
  let [따봉, 따봉변경] = useState([0, 0, 0]);
  let [modal, setModal] = useState(false);
  let [title, setTitle] = useState(1);
  let [입력값, 입력값변경] = useState('');

  return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>
      <span>{입력값}</span>
      {
        글제목.map(function(a, i){
          return (
            <div className='list'>
              <h4 onClick={() => {setModal(!modal); setTitle(i) }}>{a}, {i} 
              <span onClick={ (e) => {
                  e.stopPropagation();
                  let copy = [...따봉];
                  copy[i] = copy[i] + 1;
                  따봉변경(copy)} }>👍
                </span> {따봉[i]}
                <button onClick={(e) => {
                  e.stopPropagation(); 
                  let copy = [...글제목];
                  copy.splice(i, 1);
                  글제목변경(copy);
                }}>
                삭제</button>
              </h4>
              <p>2월 17일 발행</p>
            </div>
          )
        })
      }

      <input onChange={(e) => { 입력값변경(e.target.value); console.log(입력값) }}></input>
      <button>버튼</button>

      {
        modal == true 
        ? <Modal title= {title} func={() => {let copy = [...글제목]; copy[0] = '여자 코트 추천'; 글제목변경(copy)}} color={'skyblue'} 글제목={글제목}/> 
        : null
      }

    </div>
  );
}

function Modal(props){
  return(
    <div className='modal' style={{background : props.color}}>
      <h4>{props.글제목[props.title]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
      <button onClick={props.func}>글수정</button>
    </div>
  )
}
export default App;

 

실행 결과

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

React class (중요 x)

function 대신 class 이용