[React] input, 이벤트버블링

input

<input type="text"></input>

<input type="range"></input>

<input type="checkbox"></input>

<input type="date"></input>

입력 시 실행코드

<input onChange={()=>{ 실행코드 }} />

<input onChange={(e)=>{ 실행코드(e.~) }}/>

이벤트 버블링

: 이벤트가 발생한 요소부터 점점 부모 요소를 거슬러 올라가 이벤트를 전파시킴

→ e.stopPropagation() 사용으로 막을 수 있음

unshift() : 배열의 앞에 요소 추가

splice(pos,length) : pos번째부터 length까지 요소 제거

class를 이용한 React 문법

: 기본 템플릿

class Modal2 extends React.Component{
	constructor(){
		super()
	}
	render(){
	}
}

→ 사용

<Modal2></Modal2>

class 컴포넌트 안에서 state 만들기 / 수정

class Modal2 extends React.Component{
	constructor(props){
		super(props)
		this.state = {
			name : 'kim',
			age : 20
		}
	}
	render(){
		return (
			<div>안녕 {this.state.age}
				<button onClick={()=>{
					this.setState({age : 21})
				}}>버튼</button>
			</div>
		)
	}
}

이미지 넣는 법

css파일에서 src안의 이미지 넣을 때 ./이미지경로

js파일에서 import bg from './이미지경로; 후 사용

import

data.js

let data = [ 
	{
		id: 0,
		title: "a",
		content: "b",
		price : 120000
	},
	{
		id: 1,
		title: "c",
		content: "d",
		price : 130000
	},
]

export default data;

app.js

import './data.js';