[2주차] 장효신 미션 제출합니다. #2
Conversation
| display: flex; | ||
| align-items: center; | ||
| padding: 3px 0 3px 10px; | ||
| cursor: pointer; |
|
|
||
| const handleSubmit = (e) => { | ||
| e.preventDefault() | ||
| const inputValueTrim = input.value.trim() |
src/pages/todo.js
Outdated
| <section className="container-input"> | ||
| <h1 className="title">Things to do</h1> | ||
| <form | ||
| className="input-wrapper" |
There was a problem hiding this comment.
종종 className을 사용하는게 보이는데, 혹시 styled-component를 사용하고 있음에도 불구하고 className를 사용하시는 이유가 있을까요?
styled-component를 사용할때 className를 함께 사용하는건 권장되지 않는다고 합니다! 이미 styled-component를 사용하고 있는 만큼 className 대신에 컴포넌트로 관리해주면 좋을 것 같아요!
There was a problem hiding this comment.
styled-component로 만들기에는 자잘한 코드들은 className으로 관리했는데 말씀대로 하나로 통일하는게 좋을거 같네요! 피드백 감사합니다 ㅎㅎ
| const TodoItem = ({item, toggleStatus, removeItem}) => { | ||
| const getPriorityToTagSize = (priority) => { | ||
| switch (priority) { | ||
| case "5": | ||
| return <h1>{item.value}</h1> | ||
| case "4": | ||
| return <h2>{item.value}</h2> | ||
| case "3": | ||
| return <h3>{item.value}</h3> | ||
| case "2": | ||
| return <h4>{item.value}</h4> | ||
| case "1": | ||
| return <h5>{item.value}</h5> | ||
| default: | ||
| return <span>{item.value}</span> | ||
| } | ||
| } |
There was a problem hiding this comment.
우왕 중요도 선택에 따라서 폰트 사이즈를 다르게 해주는 아이디어!!! 굿👏🏻👏🏻
| const Animation = () => { | ||
| return ( | ||
| <Wrapper> | ||
| <Lottie | ||
| loop | ||
| animationData={Popper} | ||
| play | ||
| /> | ||
| </Wrapper> | ||
| ) | ||
| } | ||
|
|
||
| export default Animation |
src/components/Input.js
Outdated
| <input | ||
| type="text" | ||
| onChange={onChange} | ||
| autoFocus |
There was a problem hiding this comment.
autoFocus로 input에 자동 포커스 준거 좋은 것 같습니다!!
| saveToDos() | ||
| }, | ||
| [todo, done] | ||
| ) |
There was a problem hiding this comment.
if문을 이용해 삭제와 done<->todo간의 이동을 깔끔하게 코딩하신 것 같아 많이 배워갑니다,,!
| </button> | ||
| ) | ||
| } | ||
|
|
||
| export default Button | ||
| export default React.memo(Button) |
| <> | ||
| {todo && | ||
| todo | ||
| .sort((a, b) => b.priority - a.priority) |
|
|
||
| return ( | ||
| <Wrapper> | ||
| <section className="container-input"> |
| @@ -0,0 +1,89 @@ | |||
| .input { | |||
There was a problem hiding this comment.
전반적으로 css 속성에 대한 이해도가 높으신 것 같아 재밌게 봤습니다 ㅎㅎ
배워가는게 왕창인 코드네용
|
안녕하세요, 최민주입니다! 이렇게 효신님 코드를 볼 수 있게 되어 정말 감사한 것 같아요!! 리액트 완전 초보자인 저에게 정말 눈이 번쩍 뜨일 만한 코드였네요 ㅎㅎ 저도 잘 알아볼 수 있을 정도로 잘 정리도 되어있는데, 거기에 다양한 내장 기능들을 깔끔하게 사용하신 게 굉장히 인상 깊었습니다!! 특히 저도 sorting 넣어보고 싶었는데 결국 구현 못하고 실패했거든요.. 근데 효신님 코드에서 sorting을 어떻게 구현할 수 있는지 볼 수 있어서 정말로 공부할 게 많았습니다~ 감사해요!! 앞으로도 좋은 코드들 견식할 수 있길 응원하겠습니다>ㅡ< |
| default: | ||
| return <span>{item.value}</span> | ||
| } | ||
| } |
There was a problem hiding this comment.
우와! 중요도 선택에 따라 글씨 크기가 달라지는 걸 이렇게 head 태그들로 구현하셨군요!! 굳이 폰트 또 쓰고 하면 지저분해질 텐데 저렇게 태그 따라 글씨 크기 달라질 수 있게 해주신 게 신박하게 느껴져요 배워갑니다~
src/pages/todo.js
Outdated
| <TodoContainer | ||
| todo={todo} |
There was a problem hiding this comment.
개인적으로 이 todo.js 에서 정말 많이 배웠습니다! 한 페이지에서 todo와 done 리스트를 사용해서 반복되는 코드는 최대한 줄이면서도 두 리스트간의 유사성을 찾아 체계적으로 코드를 정리하신 게 한 눈에 들어왔어요! 로컬까지 적용 시키면서도 다양한 sueState들을 통해 priority 관리와 toggle까지 적절히 적용시키신 게 인상깊었습니다. 삼항연산자부터 useEffect, find까지 리액트가 이렇게 쓰일수 있구나 많이 배워갑니다 bb
| justify-content: center; | ||
| align-items: center; | ||
| font-family: NotoSansKRRegular; | ||
| user-select: none; |
There was a problem hiding this comment.
ㄱ,,,강아지 쓰면 반칙... 진짜 쓰고싶어지잖아요 ㅠ 디자인까지 귀엽고 폰트까지 깔끔해서 즐겁게 이것저것 적어봤습니다 ㅎㅎ
배포 링크
https://react-todo-17th-4dvn.vercel.app/
느낀 점
리엑트의 소중함을 다시 한번 느끼는 주차였습니다! 지난 주차에 받았던 피드백을 반영하려고 노력했습니다. 렌더링 성능은 최적화하지 못했는데 이 부분은 일요일까지 고민해보고 수정하겠습니다.
Key Questions