[2주차] 이은비 미션 제출합니다 #2
Conversation
| `; | ||
|
|
||
| const Title = styled.div` | ||
| font-size: 2vw; |
There was a problem hiding this comment.
vw 단위 활용해서 반응형 고려하신 거 좋은 것 같습니다 저도 나중에 써봐야겠네요!!
| const checkValue = (tempVal) => { | ||
| //입력값 유효성 검사 | ||
| tempVal = tempVal.trim(); | ||
| if (tempVal === '') { | ||
| alert('입력이 필요해요!'); | ||
| return false; | ||
| } else if (tempVal.length >= 30) { | ||
| alert('30자 이하로 입력해주세요!'); | ||
| return false; | ||
| } | ||
| return true; | ||
| }; |
There was a problem hiding this comment.
check value 함수는 이후에 다른 부분에서도 충분히 사용될 수 있어 utils.js와 같은 파일을 따로 만들어 공용으로 사용해봐도 좋을 것 같아요~
| margin-left: 20%; | ||
| `; | ||
|
|
||
| export default TodoListItem; |
There was a problem hiding this comment.
각각의 TodoListItem에서 삭제나 done 버튼을 누르면 페이지 TodoList 컴포넌트 전부가 리렌더링 되는 모습을 볼 수 있어요! 그래서, InputBar 컴포넌트와 TodoListItem 컴포넌트에 memo를 적용하면 불필요한 리렌더링을 막을 수 있을 것 같습니다~~
|
|
||
| const TodoBox = styled.div` | ||
| background-color: red; | ||
| width: 50%; |
There was a problem hiding this comment.
width를 %로 정의해서 window의 크기가 변해도 내용물이 초과되거나 하는 오류는 없는데, 모바일 화면에서 봤을 때는 다소 작아지는 경향이 있는 것 같아요! min-width 항목도 정의해보면 좋을 것 같습니다~~
| const [doneData, setDoneData] = useState( | ||
| initialData.filter((item) => item.checked) | ||
| ); |
There was a problem hiding this comment.
doneData를 따로 state가 아닌 일반 변수로 관리해도 괜찮을 것 같아요! 아래와 같이 관리하면 setState를 통해 상태변화를 따로 관리하지 않아도 될 것 같아요~~
| const [doneData, setDoneData] = useState( | |
| initialData.filter((item) => item.checked) | |
| ); | |
| const doneDateLength = data.filter((item) => item.checked); |
| border-radius: 10px; | ||
| background: linear-gradient( | ||
| 180deg, | ||
| rgba(255, 89, 0, 0.1) 36.57%, | ||
| rgba(239, 64, 90, 0.2) 100% | ||
| ); | ||
| box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05); |
There was a problem hiding this comment.
linear-gradient 넣으니까 디자인적으로 예쁜것 같아요!!👍 그라데이션 효과 줄 수 있는 옵션이 있는 줄 몰랐는데 배워갑니다~!
| &:focus { | ||
| border-color: rgba(239, 64, 90, 0.2); | ||
| box-shadow: 0 0 0 2px rgba(239, 64, 90, 0.2); | ||
| } |
| gap: 0.5rem; | ||
|
|
||
| padding-left: 10%; | ||
| padding-right: 10%; | ||
| padding-top: 3%; | ||
| padding-bottom: 3%; | ||
| //최대높이, 스크롤바 설정 | ||
| max-height: 45vh; | ||
| overflow: auto; | ||
| `; |
There was a problem hiding this comment.
rem, vh, vw 단위를 자유롭게 사용하시는 것 같아서 좋은것 같아요!
| if (item.checked) { | ||
| item.checked = false; | ||
| } else { | ||
| item.checked = true; |
There was a problem hiding this comment.
checked 로 체크 여부 따지는 것 좋은것 같아요!
item.checked = !item.checked; 로 하면 조금더 간결한 코드도 가능할 것 같습니다~
| /> | ||
| ))} | ||
| <SubTitle> | ||
| {doneData.length} / {data.length} 완료 |
| nextId.current += 1; | ||
| localStorage.setItem('nextId', nextId.current.toString()); |
There was a problem hiding this comment.
리스트를 추가할때 id값을 로컬에 저장했다가, nextId를 업데이트하고 사용하는 방법도 새롭고 좋은것 같아요!
배포링크
https://react-todo-18th.vercel.app/
Key Questions
Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?
리액트에서는 실제 DOM의 변경 사항을 반영하기 위해 내부적으로 Virtual DOM을 만들어 관리합니다. Virtual DOM은 추상화한 JS객체를 구성해 사용하는데, DOM의 상태를 메모리에 저장해 변강 전과 변경 후 의 상태를 비교해 최소한의 내용만을 반영한다.
이를 사용하면 사소한 변경사항에도 전체가 리렌더링되는 것을 막아 브라우저의 과부화를 피할 수 있다.
미션을 진행하면서 느낀, React를 사용함으로서 얻을수 있는 장점은 무엇이었나요?
vanila js에서 React로 리펙토링하면서 객체를 컴포넌트 단위로 다루어 화면 전체를 리렌더링하지 않고 일부분만 업데이트할 수 있다는 점에서 편하게 느껴졌고,' 재사용하는 공통 컴포넌트를 따로 빼서 관리할 수 있다는 점이 좋았습니다.
React에서 상태란 무엇이고 어떻게 관리할 수 있을까요?
상태란 웹에서 render하는데 영향을 미칠 수 있는 값으로, React에서는 컴포넌트가 변화할 때 리렌더링 하면서 가상 Dom에서 변화된 부분만 반영시키는 방식으로 상태를 관리합니다. 우리는 useState Hook을 사용해 state를 만들고 setState함수로 state를 관리합니다.
Styled-Components 사용 후기 (CSS와 비교).
vanilaJS를 쓸 때는 HTML, CSS, JS파일을 따로 분리해서 관리했었는데, styled-component를 사용해 JS파일 안에서 스타일링까지 처리할 수 있다는 점에서 편리했습니다
후기
저번 과제에서 피드백 받은 점을 보완하려고 노력했습니당
todo , done 배열을 나누니 중복되는 함수가 많이 나오는 것 같아 하나의 배열안에 checked 요소를 넣어 todo/done요소를 구분했습니다! 디자인도 일부 수정해 조금 더 깔끔하게 만들어봤습니당
redux나 useCallback 등을 사용해보고 싶었는데 시간이 부족해서 useState, useEffect의 기본 Hook으로만 구현했습니다 ㅎㅎ..
많은 피드백 부탁드려요~!