코드스테이츠 Section 4의 마지막 과제로 Todo-App 프로젝트를 시작했다.
지난 Section 3의 과제로 Figma를 활용하여 Todo-App을 기획하는 시간을 가졌었다.

1. Todo 앱 기획하기 (Figma)

Todo 앱의 기본적인 디자인과 구조를 Figma로 만들어보았다.

매번 Figma로 기획을 하는 것은 확실히 오래 걸리지만, 구현하기 전에 먼저 밑그림을 그려놓고 시작하는 것과 빈 도화지부터 시작하는 것은 큰 차이가 있다고 생각한다!!

확실히 Figma로 기본 구조를 잡아놓으니 css작업할 때 빠르게 할 수 있었고, 어떤 기능을 구현해야 할지 미리 파악을 하고 작업을 하다보니 컴포넌트의 구조를 잡기에도 수월했다.

이번에 Todo 앱을 Figma로 기획하면서, 앞으로 규모가 큰 프로젝트를 진행할 때는 더욱 Figma로 기획을 하고 구현을 해야 겠다고 생각이 들었다.

---

2. Todo 앱 구현하기

진행 사항

• CRUD 기능 구현 하기
  
  

진행 예정

• 서버 구축하기

• 배포하기

---

3. TIL

수정 기능 에러

수정 기능 구현 중 에러 발생

수정 버튼과 수정 취소 버튼을 누르면 입력한 내용이 없어지고, 빈 값이 나옴
콘솔에 찍어보니 undefined를 반환, 하지만 value에는 입력한 상태로 업데이트 되는 현상 발생

function TodoItem({id, done, text, newText}) {
	const dispatch = useTodoDispatch();
	const [value, setValue] = useState(text);

	const onChange = (e) => setValue(e.target.value);
	const onEdit = () => dispatch({type: "EDIT", id, newText});

	const onCancleClick = () => {
		setEditToggle(false);
		setValue(text);
	};

	const onEditClick = () => {
		onEdit(id, value);
		setEditToggle(true);
	};
}

시도한 방법

	const onEditClick = () => {
		onEdit(id, newText);
		setEditToggle(true);
	};

수정 버튼 클릭을 하면 수정 기능 함수가 작동하는데 값이 제대로 안들어가서 오류가 발생한 것으로 판단하여 newText를 직접 전달했지만 역시나 undefined 반환.. 리듀서 함수와 create 함수를 천천히 뜯어보니 이 구조는 구조분해 할당으로 값을 변경해주고 있는데 dispatch 함수의 newText에는 값이 들어가 있지 않아 undefined가 반환하는 것으로 보였다.

해결 방법

조금 허무하지만 dispatch 부분에 newText에 value를 넣어주니까 구조분해할당으로 newText에 바뀐 value값이 잘 들어가서 수정도 되었고, 바뀐 value는 text가 되어 수정 취소 버튼을 누르면 set함수로 입럭했던 값이 아닌 text 값으로 돌아갈 수 있게 되었다.
간단한 듯 복잡하게 돌아가는 구조라 실수가 있었는데 CRUD 중에 특히 어려웠던 수정 기능이라 해결해서 더욱 뿌듯했다!

const onEdit = () => dispatch({type: "EDIT", id, newText: value});