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 이용
'react' 카테고리의 다른 글
React if문 작성 패턴, localStorage, react-query, PWA(앱 실행), async (0) | 2024.06.03 |
---|---|
React Styled-component, Lifecycle & useEffect, ajax, 동적 UI, transition) (0) | 2024.05.31 |
React Bootstrap, 이미지 및 public폴더 사용, import & export, 라우터 (0) | 2024.05.31 |
React 컴포넌트, 동적 UI, 박복문(map), props(state 자식과 부모) (0) | 2024.05.30 |
React 개발 환경 세팅 및 실행, 레이아웃(JSX), state (0) | 2024.05.30 |