Conversation
| <section | ||
| className="w-105 shrink-0 flex flex-col gap-5 border-r-1.5 border-line p-7 bg-surface-alt overflow-y-auto max-cal:w-full max-cal:border-r-0 max-cal:border-b-1.5 max-cal:p-4 max-cal:grid max-cal:grid-cols-2 max-cal:gap-3" | ||
| role="region" | ||
| aria-labelledby="calendarTitle" |
There was a problem hiding this comment.
1주차 과제때는 캘린더 헤더 영역에 aria-labelledby="calendarTitle"대응되는 id="calendarTitle"를 부여해주셨는데,
이번에는 누락된거 같습니다!
There was a problem hiding this comment.
https://tailwindcss.com/blog/automatic-class-sorting-with-prettier
유민님 tailwind 클래스 자동정렬 플러그인 써보셔도 좋을거 같습니다!
|
이번주에도 함께 코드리뷰를 하게 되어서 너무 좋습니다.. 이번주차 과제도 정말 수고 많으셨고 항상 좋은 리뷰들 남겨주셔서 감사합니다!! 선택이었던 ts 적용도 해주셔서 코드가 더 풍부해진거 같아요..! 코드 너무 완벽합니다.. |
|
|
||
| export const useTodoStore = () => { | ||
| // lazy initializer로 최초 1회만 로컬 스토리지에서 불러옴 | ||
| const [store, setStore] = useState<TodoStore>(loadStore); |
There was a problem hiding this comment.
초기 상태를 lazy initializer로 설정해서 불필요한 localstorage 접근을 줄이신 점이 좋은 거 같아요!
|
|
||
| // 특정 날짜에 새 할 일 추가 | ||
| const addTodo = useCallback((date: Date, text: string) => { | ||
| const key = dateToKey(date); |
There was a problem hiding this comment.
날짜를 key로 분리한 구조여서 데이터 접근과 확장이 용이해 보입니다! 근데 호출이 여러번 반복되는거 같아서 공통으로 빼시면 가독성이 아주 조금이지만 좋아질거 같아용..
| size?: Size; | ||
| } | ||
|
|
||
| const variantClass: Record<Variant, string> = { |
There was a problem hiding this comment.
variant 타입을 제한하고 Record로 매핑해서 색깔별로 스타일을 지정해줘서 유지보수하기 더 좋아진거 같아요!
| ); | ||
| }; | ||
|
|
||
| export default TodoSection; |
There was a problem hiding this comment.
todo 섹션도 세부적으로 나눠서 유지보수와 가독성 측면에서 너무 좋은것 같아요!
3 participants
배포 링크
🔗React Todo
느낀 점 및 배운 점
HTML, CSS, JS로 구성된 기존 화면을 React로 다시 구현하는 경험은 거의 처음이라 초반에는 생각보다 어렵게 느껴졌습니다. 단순히 결과 화면만 비슷하게 만드는 것이 아니라, 기존 구조를 먼저 이해한 뒤 이를 React 방식에 맞게 다시 구성해야 했기 때문에 고민할 부분이 많았습니다. 그래도 지난 과제에서 작성했던
index.html구조를 미리 정리해둔 덕분에 전체 흐름을 파악하기 훨씬 수월했고, 어떤 기준으로 컴포넌트를 분리하면 좋을지도 전보다 자연스럽게 판단할 수 있었습니다. 이번 과제를 통해 본격적으로 구현에 들어가기 전에 구조를 먼저 정리해보는 과정이 얼마나 중요한지 다시 한 번 체감했습니다.대부분 React로 프로젝트를 진행해오긴 했지만, 이번 과제에서는 기능만 구현하고 끝난 것이 아니라 구현 방식 자체를 계속 돌아보게 되었습니다. 특히 컴포넌트를 어떤 기준으로 나누는 게 좋은지, 하나의 컴포넌트가 너무 많은 역할을 맡고 있는 것은 아닌지, 지금 구조가 나중에도 유지보수하기 괜찮을지, 역할을 더 나눌 수 있는 부분은 없는지 등을 계속 고민하게 되었습니다. 또
memo가 실제로 성능 최적화에 도움이 되는지, 아니면 비교 비용 때문에 오히려 비효율적일 수도 있는지를 이전보다 더 현실적으로 생각해보게 되었습니다. 이번 과제는 단순히 동작하게 만드는 데서 끝나는 것이 아니라, 왜 이런 구조와 방식을 선택했는지까지 고민해볼 수 있었다는 점에서 더 의미 있게 느껴졌습니다.추가로 학습을 이어가면서 지연 초기화나 부수 효과처럼 이전에는 개념만 어렴풋하게 알고 있던 내용들도 이번 기회를 통해 조금 더 분명하게 이해할 수 있었습니다. 예전에는 용어만 알고 지나갔던 개념들이 실제로 코드를 작성하는 과정 속에서 어떤 상황에 필요한지 연결되어 보이기 시작한 것 같습니다. 덕분에 단순히 문법이나 사용법을 외우는 데 그치지 않고, React가 왜 이런 방식으로 동작하는지 조금 더 잘 이해하게 된 것 같습니다!
또 지난주 리뷰에서 남겨주신 내용도 반영하여
uuid를 직접 적용해보았습니다. 리뷰를 반영하는 과정에서 코드의 안정성뿐 아니라 전체 구조까지 함께 돌아볼 수 있었던 점도 의미 있었습니다. ㅎㅎ 이번 주도 편하게 리뷰 부탁드립니다!++) 아래는 제가 추가로 공부하며 참고한 자료들입니다.
Review Questions
1. Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?
Virtual-DOM(가상 돔)
이점
2. React.memo(), useMemo(), useCallback() 함수로 진행할 수 있는 리액트 렌더링 최적화에 대해 설명해주세요. 다른 방식이 있다면 이에 대한 소개도 좋습니다.
React.memo()
useMemo()
useCallback()
React.memo()와 함께 사용할 경우 자식 컴포넌트의 불필요한 재렌더링을 줄이는 데 도움이 됨그 외 렌더링 최적화 방법
key를 사용하면 React가 변경 사항을 더 효율적으로 추적할 수 있음3. React 컴포넌트 생명주기에 대해서 설명해주세요.
React 컴포넌트의 생명주기는 컴포넌트가 생성되고, 업데이트되고, 제거되는 전체 과정을 의미
마운트(Mount)
업데이트(Update)
언마운트(Unmount)
함수형 컴포넌트에서의 생명주기
useEffect()를 통해 관련 로직을 처리함useEffect()로 구현할 수 있음