[2주차] 김선영 미션 제출합니다 #7
Conversation
|
|
||
| // 추가 | ||
| const nextId = useRef(3); | ||
| const onConcat = useCallback( |
There was a problem hiding this comment.
useCallback 엄청 잘 사용하시네요... 배워 갑니다 🥰
src/component/DoneListBox.js
Outdated
| ); | ||
| }; | ||
|
|
||
| export default DoneListBox; |
There was a problem hiding this comment.
DoneListBox 컴포넌트와 TodoListBox 컴포넌트는 하나로 합쳐도 좋을 것 같아요!! 제목과 완료 여부를 props으로 전달하면 되지 않을까 싶습니다...!
There was a problem hiding this comment.
계속 고민하던 부분이였는데..! 시도해보겠습니다 감사합니다 !!
| import React from "react"; | ||
| import styled from "styled-components"; | ||
| import { AiFillDelete } from "react-icons/ai"; | ||
| import { BsCircle, BsCheckCircleFill } from "react-icons/bs"; |
There was a problem hiding this comment.
우와 저도 다음엔 라이브러리 사용해서 아이콘 써 봐야겠어요!! 🤩
There was a problem hiding this comment.
안녕하세요, 프론트 파트장 주효정입니다👏
전반적으로 코드를 잘 작성해주신 것 같아서 따로 조언해드릴 부분이 많이 없었던 것 같아요. 메모이제이션도 잘 활용해서 리렌더링을 방지해주셨고, 깔끔하네요👍
다만 스타일 컴포넌트나 함수 네이밍이 조금은 추상적인 느낌이 강한 것 같아요. 지금은 기능이 많은 웹을 제작하는게 아니지만, 기능이 많아지는 경우 Box나 Item, List와 같은 네이밍은 해당 컴포넌트의 작업을 설명하지 못해 부적절할 것 같아요. 이 부분만 조금 신경써주신다면 좋을 것 같아요!
이번주 수고 많으셨고 스터디 시간에 봬요~
| <input | ||
| type="text" | ||
| placeholder="할 일을 작성하세요" | ||
| required |
There was a problem hiding this comment.
선영님이 지난번 코드리뷰 때 알려주신 required 를 저도 적용해보았어요! 덕분에 많은 것을 배워갑니당🤩
| @@ -10,16 +10,16 @@ function App() { | |||
| { id: 2, text: "yayaya", checked: false }, | |||
| ]); | |||
There was a problem hiding this comment.
사용자의 입장에서 이렇게 미리 적용해두신게 기능을 더 빠르게 이해하기 좋았습니다!
src/component/StyleComponent.js
Outdated
| css` | ||
| text-decoration: line-through; | ||
| color: gray; | ||
| `} |
There was a problem hiding this comment.
헙 이부분 구현 실패했는데 .. styled-components안에서 이렇게 적용할 수 있군요 ! 저도 한번 적용해봐야겠어요! 배워갑니당 🤩
배포링크
http://react-todo-16th-87m9.vercel.app/
Key Questions
Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?
미션을 진행하면서 느낀, React를 사용함으로서 얻을수 있는 장점은 무엇이었나요?
React에서 상태란 무엇이고 어떻게 관리할 수 있을까요?
함수 내에 선언된 변수처럼 컴포넌트 내부에서 관리된다.
Styled-Components 사용 후기 (CSS와 비교)