what we learn... 🖊
이벤트 핸들러 작동 방법, 핸들러 추가
state의 조정과 변환
# 이벤트를 추가하는 방법
// button tag 내 inline으로 작성한 방식
<button onClick={() => { console.log("clicked!") }}>Change Title</button>
// function을 따로 작성하여 지정한 경우
const onButtonClick = () => {
console.log("clicked!");
}
<button onClick={onButtonClick}>Change Title</button>
# named import
import { useState } from 'react';
# useState
// 변수에 접근할 수 있게 해줌. (새로운 값을 할당하기 위해 호출할 수 있는 함수도 반환
const [title, setTitle] = useState(props.title); // [현재 상태값, 값 업데이트용 함수]
const onButtonClick = () => {
setTitle('Updated!'); // state를 업데이트하는 함수를 호출
}
1️⃣ form tag를 이용하여 입력값을 받을 수 있는 컴포넌트 추가
2️⃣ onChange와 useState를 통해 이벤트 구현
const ExpenseForm = () => {
// event.target.value가 String이라 ''로 초기화
const [enteredTitle, setEnteredTitle] = useState('');
const [enteredAmount, setEnteredAmount] = useState('');
const [enteredDate, setEnteredDate] = useState('');
const onTitleChange = (event) => {
setEnteredTitle(event.target.value);
};
const onAmountChange = (event) => {
setEnteredAmount(event.target.value);
};
const onDateChange = (event) => {
setEnteredDate(event.target.value);
};
3️⃣ 여러번 선언되어있는 useState를 한 번으로 압축하기
// 여러번 선언했던 state를 한 번에 정리하기
const [userInput, setUserInput] = useState({
enteredTitle : '',
enteredAmount : '',
enteredDate : ''
});
const onTitleChange = (event) => {
// 해당 키를 가진 값만 변경되기 때문에 다른 값들이 유실될 수 있으므로 스프레드 연산자(...)를 사용하여 객체를 복사 후 변경 값 오버라이드
setUserInput({
...userInput,
enteredTitle : event.target.value
});
};
// amount, date에도 동일 적용
4️⃣ 대체 폼을 이용하여 상태 업데이트
// 이전 state의 값을 보냄
setUserInput((prevState) => {
return { ...prevState, enteredTitle : event.target.value };
});
5️⃣ form submit 후 기입력값 제거
// 태그에 value값 추가
<input type='text' value={enteredTitle} onChange={onTitleChange}/>
// form submit내에서 State함수를 호출해 값 초기화
const onFormSubmit = (event) => {
// 브라우저 기본 동작으로 submit 시 화면이 재로드됨
event.preventDefault();
setEnteredTitle('');
setEnteredAmount('');
setEnteredDate('');
};
// 부모 js코드 (NewExpense.js)
<ExpenseForm onSaveExpenseData={fncSaveExpenseData} />
const fncSaveExpenseData = (enteredExpenseData) => {
// 자식에게 넘겨줄 props
const expenseData = {
...enteredExpenseData,
id : Math.random().toString()
};
}
// 자식 js코드 (ExpenseForm)
// props가 추가됨
const ExpenseForm = (props) => {
// 코드생략
}
const onFormSubmit = (event) => {
// 코드생략
const expenseData = {
title : enteredTitle,
amount : enteredAmount,
date : new Date(enteredDate)
};
// 부모가 onSaveExpenseData호출 시 expenseData를 전달 할 수 있음
props.onSaveExpenseData(expenseData);
}
결론적으로 뭐,, 이젠 다음파트인 동적생성에 목말라있다.