하루 하나씩 작성하는 TIL #29
(7) 지출 항목 입력창 작성하여 지출 항목 등록 기능 구현
1) 날짜, 항목, 금액, 내용을 입력하고 지출 항목을 등록하세요.
function Home() {
const [selectedMonth, setSelectedMonth] = useState(null);
const [formData, setFormData] = useState({
date: '',
item: '',
amount: '',
description: ''
}); <div>
<form onSubmit={handleSubmit}>
<InputGroup>
<InputLabel>날짜</InputLabel>
<InputField type="text" name="date" value={formData.date} onChange={handleChange} />
</InputGroup>
<InputGroup>
<InputLabel>항목</InputLabel>
<InputField type="text" name="item" value={formData.item} onChange={handleChange} />
</InputGroup>
<InputGroup>
<InputLabel>금액</InputLabel>
<InputField type="text" name="amount" value={formData.amount} onChange={handleChange} />
</InputGroup>
<InputGroup>
<InputLabel>내용</InputLabel>
<InputField type="text" name="description" value={formData.description} onChange={handleChange} />
</InputGroup>
<button type="submit">지출 등록</button>
</form>
</div> const handleSubmit = (e) => {
e.preventDefault();
};
2) 날짜와 금액에 대해 유효성 검사를 적용해 주세요.
const validateDate = (date) => {
const datePattern = /^\d{4}-\d{2}-\d{2}$/;
if (!datePattern.test(date)) {
return '날짜는 YYYY-MM-DD 형식이어야 합니다.';
}
const parsedDate = new Date(date);
if (isNaN(parsedDate)) {
return '유효한 날짜를 입력하세요.';
}
return '';
};
const validateAmount = (amount) => {
if (isNaN(amount)) {
return '금액은 숫자여야 합니다.';
}
if (amount < 0) {
return '금액은 0보다 작을 수 없습니다.';
}
return '';
};
const handleSubmit = (e) => {
e.preventDefault();
// 유효성 검사
const dateError = validateDate(formData.date);
const amountError = validateAmount(formData.amount);
if (dateError || amountError) {
// 유효성 검사 실패 시 alert 창으로 오류 메시지 표시
if (dateError) {
alert(dateError);
}
if (amountError) {
alert(amountError);
}
} else {
// 유효성 검사 통과 시 데이터를 처리하는 로직 추가 (예: 서버로 전송, 로컬 상태에 저장 등)
console.log('폼 데이터 제출:', formData);
// 제출 후 폼 초기화
setFormData({
date: '',
item: '',
amount: '',
description: ''
});
}
};3) 지출 등록 시 id는 uuid 라이브러리를 이용해 생성합니다.
npm install uuid
import { v4 as uuidv4 } from 'uuid'; // 유효성 검사
const dateError = validateDate(formData.date);
const amountError = validateAmount(formData.amount);
if (dateError || amountError) {
// 유효성 검사 실패 시 alert 창으로 오류 메시지 표시
if (dateError) {
alert(dateError);
}
if (amountError) {
alert(amountError);
}
} else {
// 유효성 검사 통과 시 데이터를 처리하는 로직 추가 (예: 서버로 전송, 로컬 상태에 저장 등)
const newExpense = {
...formData,
id: uuidv4() // UUID 라이브러리를 사용하여 고유한 ID 생성
};
console.log('폼 데이터 제출:', newExpense);
참고: 제공해 드린 fakedata 와 같은 형식을 이용하실 필요는 없습니다. 자유롭게 데이터 형식을 택하셔도 무방합니다.
솔직히 유효성 검사 부분 ( /^\d{4}-\d{2}-\d{2}$/;) 은,,, 지피티와 함께 했다.
(8) 홈화면의 지출 항목 클릭 시 상세화면으로 이동 구현
상세화면 이동 시 클릭한 지출 항목의 id값을 가지고 이동해 주세요.
<ListItem key={index}>
<Link to={`/detail/${item.id}`}> {/*상세화면으로 이동하는 링크*/}
<p>날짜: {item.date}</p>
<p>항목: {item.item}</p>
<p>금액: {item.amount}</p>
<p>내용: {item.description}</p>
</Link>(9) 지출 수정화면 UI 구현
1) 지출을 수정할 수 있는 UI 표현해 주세요.
<Container>
<h2>지출 수정</h2>
<form onSubmit={handleSubmit}>
<InputGroup>
<InputLabel>날짜</InputLabel>
<InputField type="text" name="date" defaultValue={formData.date} ref={dateRef} />
</InputGroup>
<InputGroup>
<InputLabel>항목</InputLabel>
<InputField type="text" name="item" defaultValue={formData.item} ref={itemRef} />
</InputGroup>
<InputGroup>
<InputLabel>금액</InputLabel>
<InputField type="text" name="amount" defaultValue={formData.amount} ref={amountRef} />
</InputGroup>
<InputGroup>
<InputLabel>내용</InputLabel>
<InputField type="text" name="description" defaultValue={formData.description} ref={descriptionRef} />
</InputGroup>
<button type="submit">수정</button>
<button type="button" onClick={handleDelete}>삭제</button>
<button type="button" onClick={() => navigate('/')}>뒤로 가기</button>
</form>
</Container>2) 수정할 값을 받는 Input을 만들 때 useRef 를 사용해주세요.
const dateRef = useRef(null);
const itemRef = useRef(null);
const amountRef = useRef(null);
const descriptionRef = useRef(null);3) 수정, 삭제, 뒤로가기 기능을 넣어주세요.
<button type="submit">수정</button>
<button type="button" onClick={handleDelete}>삭제</button>
<button type="button" onClick={() => navigate('/')}>뒤로 가기</button>3) 수정 버튼을 누르면, 기존 지출의 데이터를 수정하고 ‘홈’ 으로 이동합니다. 수정된 변경사항이 바로 적용이 되어야 합니다.
❗추가 구현 필요❗
4) 삭제 버튼 클릭 시 즉시 삭제하기 보다는 사용자에게 확인받은 뒤 삭제처리 하도록 해주세요. 삭제 이후에는 홈으로 이동시켜주세요.
❗추가 구현 필요❗
(10) “context” 로 브랜치 생성 및 이동
Remind: context 브랜치에서는 redux는 사용하지 않습니다!
git checkout -b context🟡2024-05-27 10번까지 진행 완료
(11) props drilling으로 불편하게 관리하던 state를 context api 로 리팩터링
지출 state 는 context 전역상태로 변경합니다. 이외에도 전역상태 관리하고 싶은 상태가 있으면 자유롭게 context 로 관리해 줍니다.
(12) “redux” 로 브랜치 생성 및 이동
Remind: redux 브랜치에서는 context 없이 redux만 사용합니다!
git checkout -b redux
(13) context 로 관리중이던 모든 것을 redux 로 리팩터링
Redux-toolkit 을 사용해 리덕스를 구성해 주세요. (ducks 패턴은 사용하지 않습니다.)
프론트엔드 개발자를 향해서