지난 과제에서는 Date 객체를 이용해 getDate()
와 같은 메서드로 숫자를 가져온 후, 미리 정의한 배열을 이용해 날짜와 현재 시간을 구했습니다.
이번 과제에서는 toLocaleDateString
과 toLocaleTimeString
을 이용해 간단하게 날짜와 시간을 가져왔습니다.
각각 사용자의 문화권에 맞는 날짜, 시간을 리턴 받습니다.
toLocaleDateString(locale, option) // 날짜 관련
toLocaleTimeString(locale, option) // 시간 관련
locale : 지역 정보
option : 데이터 형식 form
const TodoHead = () => {
const [date, setDate] = useState(
new Date().toLocaleDateString("en-US", DATE_FORM)
);
const [time, setTime] = useState(
new Date().toLocaleTimeString("en-US", TIME_FORM)
);
};
// utils/constants.ts
export const DATE_FORM: Intl.DateTimeFormatOptions = {
year: "numeric",
weekday: "long",
month: "long",
day: "numeric",
};
export const TIME_FORM: Intl.DateTimeFormatOptions = {
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
};
locale
정보에 영어, 미국 지역 정보 입력을 입력합니다. 한글, 한국에 경우 kr-KR
입니다.
option
엔 타입 형식 설정을 합니다. 2-digit
같은 경우 앞의 0을 자동으로 채워줍니다.
{
year: "numeric",
weekday: "long",
month: "long",
day: "numeric",
}
{
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
}
DateTimeFormatOptions
의 타입은 Intl.DateTimeFormatOptions
입니다.
setInterval에 1초의 시간을 설정해 1초마다 리렌더링 되도록 구현했습니다.
1초마다 setTime 함수에 시간을 계산해 갱신시킵니다.
useEffect(() => {
const timer = setInterval(() => {
setTime(new Date().toLocaleTimeString("en-US", TIME_FORM));
}, 1000);
return () => {
clearInterval(timer);
};
}, []);
일반적인 객체의 속성을 바꾸는 것이 아닌, 특정 아이템을 선택하고 그 아이템의 객체 속성을 불변성을 유지하면서 바꾸는 방법입니다.
const clickSomething = (id: number) => {
setTodoState((prevState) =>
prevState.map((todo: Itodo) =>
todo.id === id
? {
...todo,
done: !todo.done,
}
: todo
)
);
};
특정 아이템의 id를 받아오고 삼항연산자를 통해 true일 때 수정, false라면 그대로 수정하지 않고 둡니다.
이때 ES8의 object spread properties 문법을 이용해 기존 객체를 그대로 복사하고 바꾸고 싶은 속성만 바꾸면서 불변성을 유지합니다.
이번 과제를 통해 antd design
사용법에 대해 알게 됐습니다. 디자인 자체가 깔끔했고 무엇보다 모든 예제에 대한 코드들을 쉽게 볼 수 있다는 것이 장점이었습니다.
Modal
을 쉽게 구현할 수 있습니다. 저는 그중 Modal.error
을 선택했습니다.
import { Modal } from "antd";
export const Modal = () => {
Modal.error({
title: "오류",
content: "검색어를 입력해주세요.",
});
};
달력을 이용해 날짜를 선택할 수 있는 antd design
입니다.
DatePicker
중 시작-만료 일을 선택할 수 있는 RangePicker
을 이용해 구현했습니다.
onChange
속성의 두 번째 매개변수를 이용해 선택된 날짜를 저장할 수 있습니다.
import { DatePicker } from 'antd';
const { RangePicker } = DatePicker;
const TodoCreate = ({ nextId, createTodo, incrementNextId }: TodoCreateProps) => {
const [startDate, setStartDate] = useState('');
const [deadline, setDeadline] = useState('');
const handleDateChange = (_: any, dateStrings: [string, string]) => {
const [start, end] = dateStrings;
setStartDate(start);
setDeadline(end);
};
return {
<RangePicker onChange={handleDateChange} />;
}
}