[2주차] 정윤지 과제 제출합니다. #7
Conversation
There was a problem hiding this comment.
전역 스타일을 사용한것이 좋아보입니다 특히 타입스크립트를 사용한게 앞으로 있을 과제들에서도 유용할것같습니다
There was a problem hiding this comment.
https://www.youtube.com/watch?v=fR8tsJ2r7Eg
컴포넌트 분리를 하려고 했던 고민의 흔적이 보여서 좋은 것 같습니다. 단일책임원칙에 따라서 한 컴포넌트 하나에는 하나의 역할만 두는 것이 좋습니다. DataNav, TodoList, TodoInput들 다 분리해도 좋을 듯 해보입니다!
| onKeyUp={(e) => { | ||
| if (e.key === "Enter") { | ||
| handleAdd(); | ||
| } | ||
| }} |
There was a problem hiding this comment.
onKeyUp의 경우 키보드를 눌렀다 뗀 후, 동작이 되는 방식으로 onKeyDown에 비해 사용자의 경험이 떨어질 수 있다는 단점이 있습니다.
추가적으로 텍스트 입력하자마자 엔터 누르고 이벤트 처리전에 빠르게 다른텍스트 입력하면 입력중이던 텍스트까지 같이 전송되는 이슈도 존재합니다...(이거 영상으로 녹화해서 보여주고 싶은데 맥북 녹화 어떻게 하는지 모르겠어서 못올리는중,,,,,,)
따라서 onKeyDown에 preventDefault(길게 누를경우 반복이벤트 존재 막기위함)조합으로 많이 사용합니다
http://velog.io/@jiniooo/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%94%ED%84%B0%ED%82%A4%EC%9D%B4%EB%B2%A4%ED%8A%B8
추가적으로 keyDown을 사용하는 경우 이러한 이슈도 존재하니, 한 번 공부해보시길 추천드립니다.
There was a problem hiding this comment.
styledComponent의 경우 파일을 컴포넌트 단위로 작성하는데, 이때 컴포넌트별 폴더를 나누고 그 아래에 컴포넌트 코드와 스타일 코드를 넣는 방식으로 파일을 분리합니다.
There was a problem hiding this comment.
또한 S-dot 네이밍이라고 해서 import할 때 스타일 컴포넌트 파일인지, 일반 컴포넌트 파일인지 구별할 수 있도록 파일명을 작성합니다.
| <NavButton onClick={() => changeDate(1)}>▶</NavButton> | ||
| </DateNav> | ||
|
|
||
| <p>오늘의 남은 할 일은 {remainingCount}개 입니다!</p> |
There was a problem hiding this comment.
오늘이 아닌날짜에서도 같은 텍스트가 있는 것보다는 오늘이 아닌 날에는 해당 날짜을 노출하는 게 UX적으로 더 좋아 보여요!
| @@ -0,0 +1,52 @@ | |||
| import { useState, useEffect } from "react"; | |||
| import type { Todo } from "../types/todo"; | |||
There was a problem hiding this comment.
import문 사용할 때 상대경로보다 절대경로로 선언하는 것이 오류 가능성이 낮아요! 이번 주차 세션에 말씀드리긴할 텐데, prettier에 더불어 eslint사용하게 되면 코드 내에서 사소한 실수나 버그를 사전에 예방할 수 있고, 코드 품질도 또한 일정하게 유지도 가능하다는 장점이 있어요
eslint를 통해 절대경로로 import문 자동으로 작성되거나, Import문 sort도 할 수 있는 패키지가 있으니 같이 공부해보시길 추천드립니다.
배포링크
react-todo-22nd-jungyungee.vercel.app
구현화면
구현내용
느낀 점
Review Questions
- 가상 돔: 실제 DOM의 가벼운 복사본. 메모리 상에 Javascript 객체 형태로 존재
리액트 앱에서 불필요하게 컴포넌트가 다시 그려지는 것(리렌더링)을 줄이고 성능을 높이는 기법들
useCallback(): 특정함수를 새로 생성하지 않고 재사용할 수 있도록 함수를 memorization. 의존성 배열 관리가 중요 (필요한 상태나 props를 반드시 포함시켜야 함).useMemo(): 같은 결과 값을 사용하는 함수에서는 여러 번 호출보다는 결과 값을 캐싱해놓고 사용. 무거운 연산이나 렌더링 비용이 큰 데이터 변환에만 사용React.memo(): 감싼 컴포넌트의 프롭스가 변경이 되었는지 확인, 변경이 없을 경우 이전 렌더링 결과 재사용 -> props의 변화만 감지하기 때문에 state, context가 변경되었을 때의 리렌더링은 막지 못함. props가 객체/배열/함수와 같이 참조형 데이터일 경우, 값이 같아도 새로 생성되면 !==로 판별되어 리렌더링이 발생할 수 있음 → useCallback, useMemo와 함께 사용.컴포넌트가 화면에 나타나고, 업데이트되고, 사라지는 과정
useEffect(() => { ... })→ 렌더링 이후 실행되는 코드 (componentDidMount + componentDidUpdate 역할)
useEffect의 cleanup 함수
→ 컴포넌트가 사라질 때 실행 (componentWillUnmount 역할)