투두리스트 코드
import React, { useState } from "react";
const inputArray = ["Title", "subTitle", "Desc"];
const Pra = () => {
const [inputValue, setInputValue] = useState({
Title: "",
subTitle: "",
Desc: "",
});
const [todos, setTodos] = useState([]);
const completeArray = todos?.filter((todo) => todo?.isDone === true);
const noCompleteArray = todos?.filter((todo) => todo?.isDone === false);
const handleInputValue = (e) => {
const { value, name } = e?.target;
setInputValue((prev) => {
return { ...prev, [name]: value };
});
};
const handleAddClick = () => {
setTodos((prev) => {
return [...prev, { ...inputValue, isDone: false, id: todos?.length + 1 }];
});
setInputValue({
Title: "",
subTitle: "",
Desc: "",
});
};
const handleDeleteClick = (id) => {
setTodos((prev) => prev?.filter((_, i) => i !== id));
};
const handleCompleteClick = (todo, id) => {
let newTodo = { ...todo, isDone: true };
let newArray = [...todos];
newArray?.splice(id, 1, newTodo);
setTodos(newArray);
};
console.log({ inputValue });
console.log({ todos });
return (
<div>
{/* Input Section */}
<div style={{ display: "flex", flexDirection: "column" }}>
{inputArray.map((name, idx) => {
return (
<div key={idx}>
<span>{name}</span>
<input
name={name}
value={inputValue?.[name]}
onChange={handleInputValue}
/>
</div>
);
})}
<button onClick={handleAddClick}>Add</button>
</div>
{/* Todo Section */}
<div>
<h2>Todo Section</h2>
{noCompleteArray.map((todo, id) => {
return (
<div key={id}>
<div
style={{
display: "flex",
justifyContent: "flex-end",
columnGap: 10,
}}
>
<button onClick={() => handleCompleteClick(todo, todo?.id)}>
Complete
</button>
<button onClick={() => handleDeleteClick(todo?.id)}>
Delete
</button>
</div>
<p>Title: {todo?.Title}</p>
<p>subTitle: {todo?.subTitle}</p>
<p>Desc: {todo?.Desc}</p>
</div>
);
})}
</div>
{/* Complete Section */}
<div></div>
</div>
);
};
export default Pra;
// 1. 기본적인 UI 틀 구성
// 2. span 태그와 input 태그가 세 번 반복 렌더링 되어야 함
// 2-1. map method를 활용해야 한다는 뜻인데 배열이 없음
// 2-2. 세 개의 input에 대한 data를 배열을 통해 표현할 필요가 있음
// 2-3. 결론적으로 inputArray 배열을 생성함
// 3. 2번의 내용을 InputSection에 적용
// 4. input 태그에서 작동할 매커니즘, 즉 속성을 정의해줘야함
// 4-1. 가장 먼저, input에 어떠한 value가 입력되면 해당 값을 저장할 '상태'가 필요함
// 4-2. inputValue는 title, subtitle, desc 세 가지 형태일 것임
// 4-3. onChange에 대한 함수를 정의함(handleInputValue)
// 4-4. handleInputValue에서부터 input에 속성을 부여하는 과정이 지금은 잘 이해가 안 됨 pass
// 5. add button의 기능을 구현해야 함
// 5-1. add를 클릭했을 때 추가되는 todo를 저장할 상태가 필요함
// 5-2. 클릭하면 inputValue가 todos 배열의 n번째 idx 요소로 추가되도록 하고, 추가적으로 inputValue를 empty string으로 초기화해준다.
// 5-3. 버튼에 해당 함수를 적용한다.
// 6. 저장된 값을 Todo Section에서 보여줘야 한다.
// 6-1. Todo Section의 UI를 대략적으로 표현해본다.
// 6-2. 완료와 미완료의 구분이 적용된 배열이 필요할 것이고, 미완료에 대한 값을 Todo Section에서 보여줘야 한다.
// 6-3. isDone을 통해 완료와 미완료에 대한 배열을 만들었다. Todo Section에서는 미완료에 대해서 map을 적용할 것이다.(초기값: 미완료)
// 6-4. complete와 delete 버튼을 구현한다.
// 7. id를 활용하는 과정에서 맛이 갔다.
새로운 형태의 투두리스트에 도전 중인데, index만으로는 기능을 구현하는 데 한계가 있어서 id를 활용하고자 했다. id를 통해 코드를 조정하는 순간 맛이 갔다. 그래도 차근차근 학습하는 과정에서 많은 것들이 익숙해지고 이해됐다.
회고
최근에 TIL 작성을 등한시했다. 학교 공부를 했다. 시험지를 백지로 내면 F를 주겠다는 교수님의 엄포에 멘탈이 빠그라졌다. 학력이 실력을 곧바로 의미하지 않는다고 굳게 믿지만, 사회는 그리 말랑말랑하지 않다. 대졸자가 아니라면 지원조차 못하는 회사가 태반이다. 여러 이유로 전공을 포기하게 된 나로서는 "지금이라도 열심히 해!"라는 말이 너무 매정하게 들렸다. 어디서부터 어떻게 하란 말인가.
자퇴를 하고 편입을 할까? 개발을 잠시 멈춰야 하나? 오만 생각을 다 했는데, 결론은 개발에 집중하겠다는 것으로 귀결됐다. 내가 바꿀 수 있는 것과 바꿀 수 없는 것을 명확히 구분 짓고자 했고, 개발은 바꿀 수 있는 영역이고 전공과 관련된 학업은 바꿀 수 없는 영역이라고 판단했다.
"전공 필수인데 F 나오면 어쩌게, 졸업 못하면 의미 없잖아?", 지극히 상식적인 이야기다. 공식 한 줄이라도 외워서 시험지에 적어 낼 생각이다. 그것조차 어렵다면 편지라도 써야겠다고 생각했다. 일단 이것이 내가 전공에 다할 수 있는 최선이다. 다가오지 않은 미래를 두고 불안에 떠는 것보다는 괜찮은 태도라고 생각한다. 필요하다면 차후에 교수님하고 상담해서 나의 고민을 공유할 계획이다.
이미 포기한지 오래됐던 전공에 대한 집착은, 개발에 대한 자신감 하락의 반증일 수 있다. 개발을 잘하고 싶은 마음에, 성과가 느리게 나오면 좌절하는 순간이 많았다. 나의 이런 어린 마음은 건방진 태도일 수도 있다. 이 일을 업으로 삼고 있는 사람들의 노력에 대한 결과가, 나에게는 당연스럽게 빨리 올 수 있다는 오만방자함의 표출이었다. 결과는 과정에 의해 따라온다, 과정에 집중하자.(물론 어렵겠지만)
핵심은 '전공에 대해서는 애타게 빌고, 개발은 빡세게 하자는 것'이다. 사실 별거 없는데 이게 내 방식이라면, 고민 그만하고 다시 열심히 TIL 작성하자!
