프론트엔드 5기 1조(김필진, 이은지, 임승이, 방미선) 토이프로젝트 #11
Conversation
| } | ||
|
|
||
| function Router({ theme, setTheme }: IRouterProps) { | ||
| const isLight = theme === "light"; |
There was a problem hiding this comment.
애초에 state를 theme이 아니라 isLight로 설정해주거나 isLight 대신 theme을 계속 사용하는게 어떨까 싶습니다.
is~라는 변수를 선언하는 경우가 많긴 하지만, theme보다 더 시맨틱하거나 사용하기 좋진 못한 것 같아요.
| import { WeeklyView } from "./WeeklyView"; | ||
|
|
||
| function CalendarSection() { | ||
| const [toggleBtn, setToggleBtn] = useState(true); |
There was a problem hiding this comment.
state 변수명이 조금 더 시맨틱 해질 수 있을 것 같습니다.
일단 toggleBtn은 특정 값이라기보단 버튼 자체를 나타내는 의미라서 아쉽습니다.
또한, 실제로 토글되는 정보가 단순 true, false가 아니니 boolean이 아니라 string을 담는 것도 좋은 선택일 것 같습니다.
| <CalendarContainer> | ||
| <Calendar | ||
| value={today} | ||
| calendarType={"US"} |
There was a problem hiding this comment.
전달 값이 단순 string인 경우 중괄호는 필요 없습니다.
| calendarType={"US"} | |
| calendarType="US" |
| tileContent={({ date, view }: { date: Date; view: string }) => | ||
| view === "month" && | ||
| Object.keys(monthlyCharge).map((a) => | ||
| a === date.getDate().toString() ? ( | ||
| <div key={a}> | ||
| {totalAmount(monthlyCharge[Number(a)])[0] !== 0 ? ( | ||
| <p className="amount-text"> | ||
| {totalAmount(monthlyCharge[Number(a)])[0].toLocaleString()} | ||
| </p> | ||
| ) : null} | ||
| {totalAmount(monthlyCharge[Number(a)])[1] !== 0 ? ( | ||
| <p className="amount-text posi"> | ||
| {"+" + | ||
| totalAmount(monthlyCharge[Number(a)])[1].toLocaleString()} | ||
| </p> | ||
| ) : null} | ||
| </div> | ||
| ) : null, | ||
| ) | ||
| } |
There was a problem hiding this comment.
너무 길고 복잡합니다...
return 밖에서 따로 함수로 선언해주고 props에는 함수를 전달해주는 식으로 구성하는 것이 가독성에 더 좋을 것 같습니다.
| console.error(error); | ||
| } | ||
| }; | ||
| setTimeout(() => fetchData(), 5); |
|
|
||
| export function WeeklyView() { | ||
| const [thisMonthData, setThisMonthData] = useState([]); | ||
| const [today, setToday] = useRecoilState(todayAtom); |
There was a problem hiding this comment.
today는 오늘이라는 뜻이니 date등의 표현이 더 적합해보입니다.
There was a problem hiding this comment.
리액트에 종속되지 않는 함수들은 util function으로 따로 빼서 관리하는 것이 일반적입니다.
아래 참고 글을 보면 util function directory에 대한 설명이 나와있습니다.
참고: https://blog.webdevsimplified.com/2022-07/react-folder-structure/
| if (name === "amount") { | ||
| if (!isNaN(Number(value))) { | ||
| setEditAmount(+value); | ||
| } |
There was a problem hiding this comment.
중첩으로 1가지만 검사하는 것은 and와 같습니다.
| if (name === "amount") { | |
| if (!isNaN(Number(value))) { | |
| setEditAmount(+value); | |
| } | |
| if (name === "amount" && !isNaN(Number(value))) { | |
| setEditAmount(+value); | |
| } |
| } else if (name === "userId") { | ||
| setEditUserId(value); | ||
| } else if (name === "category") { | ||
| setEditCategory(value); | ||
| } else if (name === "date") { | ||
| setEditDateValue(value); | ||
| } else if (name === "time") { | ||
| setEditTimeValue(value); | ||
| } |
There was a problem hiding this comment.
해당 else if문은 중복으로 걸릴 일이 없기 때문에 if문으로만 작성해도 됩니다.
| } else if (name === "userId") { | |
| setEditUserId(value); | |
| } else if (name === "category") { | |
| setEditCategory(value); | |
| } else if (name === "date") { | |
| setEditDateValue(value); | |
| } else if (name === "time") { | |
| setEditTimeValue(value); | |
| } | |
| if (name === "userId") { | |
| setEditUserId(value); | |
| } | |
| if (name === "category") { | |
| setEditCategory(value); | |
| } | |
| if (name === "date") { | |
| setEditDateValue(value); | |
| } | |
| if (name === "time") { | |
| setEditTimeValue(value); | |
| } |
KEEP
링크 클릭
github 클릭
👩🚀 개발팀
김필진
이은지
임승이
방미선
사용기술 및 개발환경
Development