[TIL] 두 번째 개인 프로젝트 피드백 반영, 베이직 과제 후
두번째 개인 프로젝트 피드백 반영
App.js는 리액트 컴포넌트니 다른 뷰와의 통일성을 위해 확장자를 jsx로 변경
App.jsx 유무 처리
불필요한 빈 태그 처리
주의!! uuid, shortid등을 사용
TodoForm에서 todoInputs => setTodoInputs의 함수형 업데이트를 이용
유사한 형태의 UI를 공통화-> 템플릿
여기서 템플릿은 총 3번을 걸쳐 다시 만들어졌는데 첫번째는
-첫번째 템플릿
import React from "react";
import TodoCards from "view/main/todoCards/TodoCards";
// 템플릿 만들기
export const StateTemp = ({
title,
isDoneState,
todoInputs,
setTodoInputs,
onComplete,
onDelete,
}) => {
const isDoneTodos = todoInputs.filter(
(state) => state.isDone === isDoneState
);
return (
<div className="cards-wrap">
<h3>{title} </h3>
<div className="todo-card-wrap">
{isDoneTodos.map((isDoneItem) => {
const { id } = isDoneItem;
return (
<TodoCards
isDoneItem={isDoneItem}
setTodoInputs={setTodoInputs}
onComplete={onComplete}
key={id}
onDelete={onDelete}
/>
);
})}
</div>
</div>
);
};
export default StateTemp;
이렇게 짰었는데 피드백을 받고
-두번째 템플릿
-상위 컴포넌트에 들어가는 템플릿(하위 컴포넌트)
import TodoCards from "view/main/todoCards/TodoCards";
const CardTemp = ({ isDoneState, isDoneArr, setTodoInputs }) => {
return (
<section>
<div className="cards-wrap">
<h3>{isDoneState ? "Working" : "Done"}</h3>
<div className="todo-card-wrap">
{isDoneArr.map((isDoneItem) => {
const { id } = isDoneItem;
return (
<TodoCards
key={id}
isDoneItem={isDoneItem}
setTodoInputs={setTodoInputs}
/>
);
})}
</div>
</div>
</section>
);
};
export default CardTemp;
이렇게 더 간편한 코드가 됐어. props는 더 적게 보내게 됐고 3depth props가 돼서 귀찮지만 괜찮은 템플릿이라고 하셨어. 사실 기존의 첫번째 코드에서는 보내는 props가 많아서 템플릿을 쓸 필요가 있을까 해서 그냥 템플릿을 지우고 사용했는데 안 그래도 다시 피드백으로 그 부분을 지적해 주시며 아래 위로 중복되는 코드를 공통화 시키면 좋겠다고 하셨어. 그래서 지웠던 템플릿을 부활시키고 불편했던 props부분을 최소한으로 필요한 것만 보낼 수 있도록 다시 개선시켜서 두번째 코드가 완성이 됐어.
완성되기 전에 상위 컴포넌트에서 첫번째 템플릿을 썼을 땐, 이런 모습이었거든..다시봐도 ui공통화 시킨 이유가 없게 만드는 코드 모습같아.
-첫번째 하위 컴포넌트(템플릿)을 사용한 상위 컴포넌트 모습
return (
<>
<section>
<StateTemp
title={"working"}
isDoneState={true}
todoInputs={todoInputs}
setTodoInputs={setTodoInputs}
onComplete={onComplete}
onDelete={onDelete}
/>
</section>
<section>
<StateTemp
title={"Done"}
isDoneState={false}
todoInputs={todoInputs}
setTodoInputs={setTodoInputs}
onComplete={onComplete}
onDelete={onDelete}
/>
</section>
</>
);
-완성된 두번째 템플릿을 사용한 상위 컴포넌트 모습
상위 컴포넌트에선 이렇게 템플릿이 쓰이고 보내는 props도 최소한이라 많은 props사용을 줄일 수 있었고 가독성도 높일 수 있어서 좋은 것 같아. 위에 코드에서 보내던 todoInputs값을 setTodoInputs가 포함하고 있어서 setTodoInputs를 함수형 업데이트로 사용하면 setTodoInputs가 가지고 있는 이전 정보인 todoInputs값을 사용해서 값을 세팅할 수 있거든. 그래서
todoInputs값대신 setTodoInputs값을 보내게 됐고 나머진 최하위 컴포넌트인 TodoCards에서 노나서 구현해도 좋고 그렇게 하면 가독성도 좋아지고 유지보수도 좋아져서 onComplete, onDelete함수는 최하위 컴포넌트 자체에서 구현해서 사용하게 되닌까 보내는 props를 줄였어. 타이틀 같은 경우 isDoneState의 상태에 따라 바뀔 수 있게 boolean값을 보내줘서 템플릿의 가독성과 유지보수도 좋게 했고. 그래서 아래와 같은 결과물이 나왔어.
-상위 컴포넌트
<CardTemp
isDoneState={true}
isDoneArr={doneTrueTodos}
setTodoInputs={setTodoInputs}
/>
<CardTemp
isDoneState={false}
isDoneArr={doneFalseTodos}
setTodoInputs={setTodoInputs}
/>
베이직 과제
- 마감기한 추가하고 마감기한 순서대로 정렬하기를 했어.
거기서 이런 식으로 new Date(utc시간).toLocaleDateString("언어선택", {표시방법}) 표현했어.
const date = new Date(deadLine).toLocaleDateString("ko-KR", {
year: "numeric",
month: "long",
day: "numeric",
});
이러면 바로 "2024년 1월 26일" 이렇게 표현 되서 쓰기 좋은 것 같아.
느낀점
- setState에 내장된 기본 값 state를 활용한 함수형 업데이트를 사용해서 받는 props를 최소화시킬 수 있어서 좋은 것 같아. 그 전엔 기본 값인 state와 setState를 같이 props로 보냈는데 굳이 안 그래도 되서. 그래도 props-driling은 그 depth가 몇번을 계속 되면 관리하기 어려울 것 같아.
*참고사이트
- https://kimyang-sun.tistory.com/entry/new-Date-toLocaleDateString-%ED%98%84%EC%9E%AC-%EB%82%A0%EC%A7%9C%EC%8B%9C%EA%B0%84-%ED%91%9C%EC%8B%9C%ED%95%98%EA%B8%B0-JavaScript (현재 날짜/시간 표시 테스트)
- https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID