[2주차] 신동현 미션 제출합니다. #7
Conversation
| import React, { useState } from "react"; | ||
| import Button from "../utils/Button"; | ||
| import styled from "styled-components"; | ||
|
|
There was a problem hiding this comment.
사용자마다 이름을 추가해 개인 별 투두리스트로 만든 것 멋지네요
| overflow-y: auto; | ||
| // 내용이 넘치면 스크롤바 나타나게 | ||
| `; | ||
|
|
There was a problem hiding this comment.
제가 지난번에 리뷰 받았던 것인데 스크롤바가 나타나면 버튼위치가 밀려서 스크롤바를 숨기는 기능을 활용해 보시면 좋을 것 같아요
| font-size: 1.5rem; | ||
| font-family: "SUITE-Regular", sans-serif; // 폰트 지정 | ||
| `; | ||
|
|
There was a problem hiding this comment.
전에 제가 리뷰받았던 내용인데, 영어에 대해서는 줄 바꿈 처리가 안되어있어서
word-break: break-all; 를 추가해보시는 것도 좋을 것 같습니다 !
| backgroundColor="#6aafe6" | ||
| textColor="white" | ||
| buttonSize="small" | ||
| /> |
There was a problem hiding this comment.
위코드들을 보니 isDone을 사용해 , todo와 done을 구분하는 코드가 훨씬 직관적이고 간단하더라구요 배워갑니다 !
| background-color: #f0f0f0; | ||
| font-family: "omyu_pretty", sans-serif; // 폰트 지정 | ||
| `; | ||
|
|
There was a problem hiding this comment.
전체 컨테이너에 vw 와 vh를 사용해서 전체 크기를 조정하니 더 괜찮네요 배워갑니다 !
| type="text" | ||
| placeholder="✏️Enter your name" | ||
| value={name} | ||
| onChange={(e) => setName(e.target.value)} |
There was a problem hiding this comment.
이름 설정 부분도 할일 추가 기능처럼 입력값 유효성 검사가 있으면 좋을 것 같아요! 이쪽은 trim처리가 안되어서 공백도 들어가네요
There was a problem hiding this comment.
아 이름 부분 input은 예외처리를 깜빡했네요!! 찾아주셔서 감사합니당ㅎㅎㅎ
| font-family: "TheJamsil5Bold", sans-serif; | ||
| text-decoration: none; | ||
| font-weight: 600; | ||
| transition: 0.25s; |
|
|
||
| //delete Btn 누르면 -> isDone 여부에 따라 todos, dones 배열을 update | ||
| const deleteBtn = (index, isDone) => { | ||
| if (isDone === true) { |
There was a problem hiding this comment.
isDone이 bool값이라 그냥 if (isDone) {} / if(!isDone) {}으로도 쓸 수 있을 것 같네요!
| ); | ||
|
|
||
| //todos, dones, name의 변화가 일어날때마다 local storage에 저장 | ||
| useEffect(() => { |
There was a problem hiding this comment.
저는 보통 바뀌는 요소를 한 배열안에 넣어서 모두 업데이트하는데 이렇게 따로따로 하는게 불필요한 리렌더링을 방지할 수 있을 것 같네요 !
느낀점
React의 기본 개념을 다시 공부하고 component 을 어떻게 나누어야 효율적인지에 대한 고민을 하면서 진행했습니다. 지난 코드리뷰를 기반으로 코드를 발전시키려고 했습니다..! styled-component은 처음 써보는데 익숙해지도록 노력해보겠습니다!! 좀 예쁘게 꾸며보려고 했는데 아직 부족한것 같습니다.
추가 구현으로는 local storage 저장이랑, 처음에 사용자 이름을 입력 받고, 이름을 입력 받으면 현재 날짜와 함께 상단에 표시되는 것을 구현해보았습니다. 앞으로 과제도 열심히 해보겠습니다!
배포링크
https://donghyun-todo-18th.vercel.app/
Key Questions
Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?
가상 DOM은 실제 DOM에서 처리하는 방식이 아닌 Virtual DOM과 메모리에서 미리 처리하고 저장한 후 실제 DOM과 동기화하는 프로그래밍 개념입니다. 해당 DOM을 컴포넌트 단위로 쪼개어 HTML 컴포넌트 조립품 처럼 다루는 개념이다. 새로운 element가 업데이트 된 경우 새로운 가상 DOM 생성 후 이전 DOM과 비교 후 차이점 만 업데이트를 한다는 특징이 있습니다.
Virtual-DOM 은 DOM의 문제점을 해결했다는 이점이 있습니다. DOM은 트리 구조로 되어 있어서 이해하기 쉽지만, 노드의 수가 많아질 수록 속도가 느려지고, DOM 업데이트에 잦은 오류를 발생시킬 수 있고, HTML을 직접적으로 업데이트하면서, 메모리 낭비가 많습니다. Virtual-DOM을 사용하면 DOM을 직접 업데이트하는 것보다 상대적으로 빠르다는 이점이 있습니다.
미션을 진행하면서 느낀, React를 사용함으로서 얻을수 있는 장점은 무엇이었나요?
React useState, useEffect 를 사용하면 상태 변화에 대한 관리가 편리하다는 장점이 있었습니다. 이에 따라 local storage에 저장하고 불러올때도 더 편리했던 것 같습니다. 실시간 update 가 필요한 경우, 코드를 직관적으로 작성할 수 있는 게 장점이라고 느꼈습니다.
React에서 상태란 무엇이고 어떻게 관리할 수 있을까요?
React 에서 상태(State) 란 컴포넌트 내부에서 변할 수 있는 값입니다.
useState(): 함수형 컴포넌트에서 상탯값을 관리const [state, setState] = useState(initialState);useState: 리액트가 제공하는 React Hook 중 하나로, 상태를 다룰 수 있는 특별한 함수이다.
반환값: 배열 - 배열의 0번째 요소는 현재 state 변수, 1번째 요소는 이 변수를 갱신할 수 있는 함수, 인자값은 초기값이 된다.
useState: state 가 바뀌면 새로운 값을 가지고 component의 rerendering 이 일어납니다.
useEffect(): 어떤 Effect 을 발생시키고 싶을때 사용 합니다.여기서 말하는 Effect은, 명령형함수 또는 타이머, 로깅, 변형, sideEffect등을 발생시키는 함수 등을 말합니다.
useEffect(didUpdate);useEffect를 사용하면 그 컴포넌트가 나타난 후 수행되는 일을 지정해주는 것으로, 쉽게 말해 함수 한번 호출되면 실행되는 effect인 것이다!! 특정 state 가 바뀔때만 코드가 실행되도록 하고 싶을때 사용합니다.
Styled-Components 사용 후기 (CSS와 비교)
styled-components는 타일이 지정된 html 요소(element)들을 React 컴포넌트 형식으로 사용할 수 있게 해주는 Node.js 패키지입니다. 기존 css처럼 분리된 파일에서 스타일을 지정하고, class나 id값등을 가져와 쓰지 않습니다. html 태그를 손쉽게 변경할 수 있다는 장점이 있습니다. ( styled-components로 지정된 부분만 변경하면됨 )
동일한 컴포넌트 내부에서 작성하는
css in js방식을 사용해서 CSS의 범위, 중첩, 충돌 등과 관련된 일반적인 문제를 피할 수 있다고 합니다.