[2주차] 최무헌 과제 제출합니다. #9
Conversation
| <> | ||
| <GlobalStyle /> | ||
|
|
||
| <h1 style={{ textAlign: "center" }}>To Do</h1> |
There was a problem hiding this comment.
다른 날짜를 보고 오늘 날짜로 돌아가는 것이 어려운 것 같은데 이 기능을 제목을 누르면 오늘 날짜로 돌아가도록 하는 것도 좋을 것 같습니다!
There was a problem hiding this comment.
불필요한 파일은 삭제하면 파일크기가 줄어들어 로딩 속도 향상에 도움을 줄 수 있을 거 같습니다..!
There was a problem hiding this comment.
컴포넌트 별로 나눠져 있는 점이 인상 깊습니다..! 저도 이렇게 해야겠다고 생각했어요👍
| color: #486ad0; | ||
| font-weight: 800; | ||
| cursor: pointer; | ||
| `; |
There was a problem hiding this comment.
저도 들었던 review인데요, 삭제버튼에 shrink:0 효과 추가하면 이렇게 내용이 길어졌을 때 삭제 버튼 크기가 달라지는 걸 막을 수 있다고 합니당!
| </IconButton> | ||
|
|
||
| <Badges> | ||
| <Badge>{todoCount} 개</Badge> |
There was a problem hiding this comment.
전체적인 디자인과 이모지 사용, background-color가 심플하고 깔끔한 것 같습니다! 😊
There was a problem hiding this comment.
과제하시느라 고생 많으셨습니다! 👏
리드미에서 언급해주신 것처럼 styled-components를 사용할 때는 중복되는 스타일을 어떻게 관리할지가 고민이 될 수 있는데요,
이럴 땐 styled(기존컴포넌트) 패턴을 활용해 기존 컴포넌트를 확장하면, 중복을 줄이면서도 재사용성을 높일 수 있습니다!
import styled from "styled-components";
const Card = styled.div`
padding: 16px;
border-radius: 12px;
background: white;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
`;
// Card를 확장해서 새로운 스타일 추가
const HighlightedCard = styled(Card)`
border: 2px solid #4a90e2;
background: #f0f6ff;
`;
| @@ -0,0 +1,12 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
There was a problem hiding this comment.
사소한 부분이지만, lang="ko"로 지정하면 스크린 리더가 영어를 자동으로 올바르게 해석해줍니다!
따라서 한국어 콘텐츠가 많은 웹페이지라면 기본 언어를 lang="ko"로 지정하실 것을 추천드립니다. :D
https://developer.mozilla.org/ko/docs/Web/HTML/Reference/Global_attributes/lang
There was a problem hiding this comment.
유틸 함수, 타입들을 따로 분리해주신 점 좋습니다 👍
다만 앞으로 폴더 구조가 복잡해질 가능성을 고려하면, 단일 utils.ts (types.ts) 파일보다는
utils (types) 폴더 내부에 역할을 드러내는 파일명으로 나누어 관리해보시는 것을 권장드립니다!
There was a problem hiding this comment.
또한 앞으로 유틸 함수를 작성하실 일이 많을 텐데요,
함수 네이밍에 일관성을 갖추면 가독성과 유지보수성이 더욱 좋아질 것 같습니다!
There was a problem hiding this comment.
앞으로 styled-components를 사용할 기회가 많지는 않겠지만,
스타일 파일을 TodoInput.Styled.ts와 같이 분리하는 방법도 있습니다!
이렇게 하면 TodoInput.tsx 파일 안에는 UI와 기능만 남아 가독성이 더욱 좋아질 수 있습니다.
There was a problem hiding this comment.
styled-components를 사용할 경우, 브라우저의 기본 스타일을 초기화해주는 라이브러리를 함께 적용하면 더 깔끔하게 스타일링할 수 있습니다!
https://www.npmjs.com/package/styled-reset
https://bluemiv.tistory.com/134
| placeholder="오늘의 할 일을 적어주세요!" | ||
| value={text} | ||
| onChange={(e) => setText(e.target.value)} | ||
| onKeyDown={(e) => e.key === "Enter" && submit()} |
There was a problem hiding this comment.
지난주차 다른 분들 코드리뷰에도 남겨드렸던 부분인데요,
한글 입력 후 엔터로 등록할 때 마지막 글자가 두 번 입력되는 현상이 있습니다.
이 문제는 IME 조합형 입력 중 keydown 이벤트가 조합이 완료되기 전에 먼저 실행되면서 발생하는 이슈인데요.
아래 참고 자료들에서 안내하는 것처럼 KeyboardEvent의 isComposing 속성을 활용하면
이런 상황을 방지할 수 있으니 참고해보시면 좋을 것 같아요 👍
https://developer.mozilla.org/ko/docs/Web/API/KeyboardEvent/isComposing
https://velog.io/@goldfrosch/is-composing
| import type { Book } from "./types"; | ||
| import { GlobalStyle } from "./global"; | ||
|
|
||
| const STORAGE_KEY = "todo-react"; |
There was a problem hiding this comment.
상수 값은 constants로 따로 분리해도 좋을 거 같네요!
배포링크
https://react-todo-22nd-omjl.vercel.app/
느낀/배운점
Styled-Components를 사용하면서 매 컴포넌트마다 바로바로 스타일 코드를 작성하여 편리했지만, 컴포넌트마다 중복되는 스타일을 어떻게 처리해야 할지 고민되었습니다.
React를 사용하여 더 쉬울 줄 알았는데 오히려 좀 더 복잡했던 것 같습니다.
Key Questions
Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?
브라우저의 실제 DOM을 직접 건드리지 않고, 메모리상에 가상의 DOM을 만들어서 UI 변경을 계산하는 방식
이를 통해 최소한의 실제 DOM만 업데이트되어 렌더링 성능 최적화 가능
React.memo(), useMemo(), useCallback() 함수로 진행할 수 있는 리액트 렌더링 최적화에 대해 설명해주세요. 다른 방식이 있다면 이에 대한 소개도 좋습니다
React.memo: props가 변하지 않았다면 해당 컴포넌트를 다시 렌더링하지 않으므로 Footer같은 거의 변하지 않는 UI에 적용 가능합니다.
useMemo: 복잡한 계산 결과를 메모이제이션해서 dependencies가 안 바뀌면 캐싱된 값을 사용합니다. contextAPI를 사용할때 하위 컴포넌트가 불필요하게 리렌더링 되는 경우가 있는데 이때 해당 hook을 사용해 렌더링을 최소화합니다.
useCallback: useMemo의 함수 버전입니다. 리스트 아이템 클릭 핸들러를 자식으로 내려줄때 핸들러가 매번 새로 생성되면 자식이 불필요하게 리렌더링 되는데 이를 방지하여 스크롤시 버벅이는 문제를 해결할 수 있습니다.
React 컴포넌트 생명주기에 대해서 설명해주세요
Mount -> Update -> Unmount 흐름이며, 세분화하면
constructor (클래스 기준, 초기화)
render() (UI 그리기)
componentDidMount (DOM 접근/데이터 fetch 가능)
render() (다시 그림)
componentDidUpdate (갱신 후 DOM 접근)
componentWillUnmount (정리 작업: 타이머 clear, 이벤트 해제 등)
또한 함수형 컴포넌트에선 useEffect 하나로 Mount/Update/Unmount 시점을 모두 다룰 수 있습니다.