이번에는 React로 만든 간단한 할 일 관리하기 페이지를 배우고 공부하였다.
이것이 완성작이다.
1. 할 일 관리페이지 설명
할일 관리 페이지를 간단하게 설명하자면
첫번째 :
오늘의 날짜와 요일이 나오게 설정해두었다.
두번째 :
나의 할일을 5개 미리 넣어놓았는데 이를 삭제 할 수도 있고 플러스 버튼을 누르게 되면 추가 할 수도 있다.
세번째 :
오늘 내가 해야할 일들이 있는데 이를 하고나서 체크를 해두면 위에 파란 글씨로 되어져있는 것이 변화한다.
만약 5가지 할 일들 중에서 2가지를 체크를 해두면 오늘 해야할 일이 3가지 남았다고 뜬다.
2. 할 일 관리페이지 코드 분석
첫번째 오늘의 날짜와 요일이 나오게 설정해둔 코드를 분석하자면
const today = new Date();
const dateString = today.toLocaleDateString('ko-KR', {
year: 'numeric',
month: 'numeric',
day: 'numeric'
});
const dayname = today.toLocaleDateString('ko-KR', { weekday: 'long' });today라는 변수를 만들어서 new Date()로 지금의 날짜가 나올 수 있도록 설정을 해주었다.
toLocaleDateString를 ko-KR로 설정을 해준 이유는
년도와 날짜가 나오는 것이 한국 기준으로 설정을 해야하기 때문이다.
두번째 할 일들을 삭제하고 추가 할 수 있는 기능이다.
삭제 기능
추가 기능
useReducer를 이용하여 기능들을 삭제하고 추가 할 수 있게 만들었다.
function todoReducer(state, action){
switch(action.type){
case 'CREATE':
return state.concat(action.todo);
case 'TOGGLE':
return state.map(todo =>
todo.id === action.id ? { ...todo, done: !todo.done } : todo
);
case 'REMOVE':
return state.filter(todo => todo.id !== action.id);
default:
throw new Error(`Error !! : ${action.type}`);
}
}이렇게 Switch문을 이용하여서 기능들을 생성할 때 와 기능들을 삭제 할 때를 두었다.
세번째로는 할일을 체크하여서 기록에 몇개가 남았는지 뜨는 것이다.
function TodoCreate(){
const [open, setOpen] = useState(false);
const [value, setValue] = useState('');
const dispatch = useTodoDispatch();
const nextId = useTodoNextId();
const onToggle = () => setOpen(!open);
const onChange = e => setValue(e.target.value);
const onSubmit = e => {
e.preventDefault(); // 새로고침 방지
dispatch({
type: 'CREATE',
todo: {
id: nextId.current,
text: value,
done: false
}
});
setValue('');
setOpen(false);
nextId.current += 1;
};우선 아이콘을 플러스를 눌렀을 때
useState에 초기값을 false로 지정을 해주고
값을 집어 넣는 초기값은 ''빈 칸으로 지정을 해주었다.
플러스 아이콘을 눌렀을 때 입력할 수 있는 창이 있고 이를 변화할 수 있게 하는 것으로 이벤트 객체를 사용하였다.
e.preventDefault();를 사용한 이유는 새로고침을 방지하기 위해서이다.
3. 느낀점
항상 flask로만 프로젝트를 만들다가 React를 배우고 나서 만든 처음 페이지이다. 이건 프로젝트라기 어렵지만 React를 이용하여 처음으로 만든 페이지 인 만큼 이해해야할 부분과 배울 점이 많고 공부 시간도 많이 들었다. 부족한 부분은 더 공부해서 조만간 홈페이지를 만들어 볼 계획이다.
