이벤트리스너

화살표함수

 

function App()

{

를

const App = () => 

{

로

function ExpenseItem(props) {
    const ClickHandler=()=>{
        console.log('clicked');
    }
    return (
        <Card className='expense-item'>
            <ExpenseDate date={props.date}></ExpenseDate>
            <div className='expense-item__description'>
                <h2>{props.title}</h2>
                <div className='expense-item__price'>${props.amount}</div>
            </div>
            <button onClick={ClickHandler}>button!</button>
        </Card>
    )

}

태그 속에 on이벤트명 ={함수} 형식으로 사용.

 

하지만 위와같은 방식으로 화면에 출력되는 내용을 바꾸기는 불가능.

변수의 값을 바꾼다고 해서 컴포넌트를 새로 로드하는것은 아니기때문

그럴때 useState를 사용

import {useState} from 'react' 

후에

컴포넌트 함수 속에 

const [name , setName]  = useState(props.something) 형식으로 사용

값을 바꿀때는 변수의 값을 바꾸는 것이 아니라 이벤트핸들러 함수속에

setName('바꿀값')와 같은 형식으로 사용.

 

자바스크립트에서 처럼 이벤트핸들러의 인자 event.target으로 이벤트에 접근할 수 있다

input에 onChange 이벤트때 실행되는 핸들러 함수에서

event.target.value 와 같이 사용해서 form에서 사용중인 값에 접근할 것