[2주차] 원채영 미션 제출합니다. by chaeyoungwon · Pull Request #5 · CEOS-Developers/react-todo-21th

chaeyoungwon · 2025-03-21T06:22:42Z

배포 링크

미션을 진행하면서

HTML, CSS, vanillaJS로만 만들던 걸 리액트로 옮겨보는 건 이번이 처음이었던 것 같습니다.
미션하면서 styled-components로 컴포넌트를 나누는 과정이 되게 반가웠고, 리액트의 편리함도 새삼 느꼈습니다..!

지난번엔 사이드바를 만들면서 "굳이 이 위치에 있어야 하나?" 싶은 버튼들까지 마구 넣었었는데,
이번엔 실제 투두리스트에 필요한 요소들만 골라서, 날짜 변경 같은 건 밖으로 빼고,
사이드바에는 주간 완료한 할 일만 딱 보여주도록 구성해봤습니다. 열리고 닫히는 애니메이션, 외부 overlay도 추가했습니다!

다크모드/라이트모드 전환 버튼도 많이들 사용하는 토글 스위치 느낌으로 바꿔봤는데, 디자인적으로 더 깔끔해진 것 같아서 뿌듯했습니다 ☺️

그리고 저번엔 key로 index를 쓰다가 문제가 생겼었는데, 이번엔 다시 코드를 짜다 보니 구조상 크게 문제 없어서
uuid 대신 index로 간단하게 사용해봤습니다 😥

프로젝트를 할 때 리액트를 주로 사용하긴 했지만, 최적화나 깔끔한 코드 작성은 여전히 어렵게 느껴지는 부분인 것 같습니다... 혹시 코드 보시면서 조언해주실 부분이 있다면 언제든지 알려주시면 감사하겠습니다!
그리고 url이 같은 상황에서 처음 상태로 돌아가고 싶을때,, window reload말고 다른 방식이 있는지 알고싶습니다,,,

Key Questions

1. Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?

리액트에서는 실제 DOM이 아닌 가상 DOM을 사용한다.
Virtual-DOM: 실제 DOM을 모방한 가상의 DOM을 구성해 원래 DOM과 비교하여 달라진 부분을 리렌더링

=> 사용하는 이유: 실제 DOM에는 브라우저가 화면을 그리는 데 필요한 모든 정보가 들어있어 무겁다.
따라서 부드러운 UX를 제공하고자 변경사항만 빠르게 파악하고 리렌더링하는 방식을 채택한다.

diffing 알고리즘 동작 방식이 이루어짐 (트리, 노드 비교)
가상 DOM의 재조정 과정 3단계
1: UI가 변경 감지 -> UI를 가상돔으로 렌더링 (여기서 렌더링은 가상렌더링을 의미)
2: 현재 가상돔과 이전 가상돔을 비교해 차이 계산
3: 변경 부분을 실제 DOM에 반영
가상 DOM의 장단점
장점: 성능/ 일관성/ 복잡한 UI 관리/ cross-platform 지원
단점: 추가 메모리 사용/ 복잡성 증가/ 특정상황에서의 불필요함

2. React.memo(), useMemo(), useCallback() 함수로 진행할 수 있는 리액트 렌더링 최적화에 대해 설명해주세요. 다른 방식이 있다면 이에 대한 소개도 좋습니다.

React: 컴포넌트 렌더링 후 -> 이전 렌더링 결과와 비교하여 DOM 업데이트를 결정

(1) React.memo():

HOC(higher-order components): 컴포넌트를 인자로 받아서, 새로운 컴포넌트 반환하는 함수

const MyComponent = React.memo((props) => { return (/*컴포넌트 렌더링 코드*/)} );
=> 똑같은 props를 넘겨받아 같은 결과 렌더링 x => 렌더링 과정 skip, 최근 결과 재사용
props의 변경여부만을 체크해서, useState같은 훅을 컴포넌트 내부에서 사용하고 있다면 상태 변경 시 리렌더링됨

(2) useMemo(): 값을 캐싱 => hook

이전 값을 기억하여 재활용할 수 있도록 함
인자로 함수와 dependencies를 넘겨받음 (2번째 인자 중 변경된 값이 존재하면 1번째 인자로 들어간 함수 재실행)

단, 모든 코드에 useMemo를 사용해도 리소스 낭비가 된다. 연산량이 많은 곳에 사용하자

(3) useCallback(): 함수를 캐싱 => hook

컴포넌트 렌더링 시 내부 함수가 새롭게 생성될 경우, 자식에 prop으로 새로 생성된 함수가 넘겨지면 불필요한 리렌더링 발생 가능

import React, {useSatate} from 'react';
import {saveToServer} from './api';
import UserEdit from './UserEdit';
function Profile(){
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  return (
    <div>
      <p>{`name is ${name}`}</p>
      <p>{`age is ${age}`}</p>
      <UserEdit 
        onSave={() => saveToServer(name, age)}
        setName={setName}
        setAge={setAge}
      />
    </div>
  );
}

이 경우에서는, profile 컴포넌트가 렌더링 될때마다 userEdit의 onsave로 새로운 함수가 전달된다.
그러나 onsave의 속성값은 name, age의 변경이 없으면 같아야 함 ! => 따라서 useCallback 필요
const onSave = useCallback(() => saveToServer(name, age), [name, age]);

3. React 컴포넌트 생명주기에 대해서 설명해주세요. (3단계)
1단계: 마운팅 단계 -> 2단계: 업데이트 단계 -> 3단계: 언마운팅 단계

각 단계마다 특정 이벤트가 발생하여 사용되는 메서드가 따로 존재
클래스형 컴포넌트에서만 사용 가능, 함수형 컴포넌트에서는 훅으로 유사 기능 사용 가능

마운트 단계: 처음 DOM이 생명된 후 웹 브라우저 상에 나타나는 단계
constructor, getDerivedStateFromProps, render, componentDidMount

업데이트 단계: React 컴포넌트에 변화가 있을 때
getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componentDidUpdate

props가 바뀔 때 (부모 컴포넌트에서 넘겨주는 props가 바뀔 때)
state가 바뀔 바뀔 때 (setState 함수를 통해 state가 업데이트될 때)
부모 컴포넌트가 리렌더링될 때 (자신에게 할당된 props 또는 state가 바뀌지 않아도 리렌더링)
this.forceUpdate로 강제로 렌더링을 트리거할 때

언마운트 단계: 마운트의 반대 과정으로, 컴포넌트를 DOM에서 제거
componentWillUnmount

seoyeon5117

다크모드 구경하려고 왔는데 잘 보고 갑니다👀 2주차 과제도 수고 많으셨습니다!!

seoyeon5117 · 2025-03-24T05:55:59Z

+        <S.ItemContainer>
+          {todos.map((todo, index) => (
+            <TodoItem
+              key={index}


key에 index값을 넣는 것은 권장되지 않습니다. 아래 문서 참고하시면 좋을 것 같아요!

key에 index를 넣으면 안되는 이유

seoyeon5117 · 2025-03-24T05:57:42Z

+
+  return (
+    <BrowserRouter>
+      <ThemeProvider theme={{ ...theme }}>


저도 이번에 다크모드 구현하면서 이 부분 어떻게 구현하셨는지 궁금해서 놀러왔습니다. 저도 훅으로 만들었으면 더 좋을 것 같네요!

seoyeon5117 · 2025-03-24T05:59:31Z

+  margin: 1.5rem 0;
+`;
+
+export const CloseButton = styled.span`


button과 같은 시맨틱 태그를 활용하면 웹사이트의 구조를 파악하기 쉽고 스크린 리더를 사용하는 사용자에게도 더 좋을 것 같습니다!

seoyeon5117 · 2025-03-24T06:02:06Z

+  gap: 10px;
+  height: 100%;
+  max-height: 500px;
+  overflow-y: scroll;


overflow-y: auto로 바꾸면 투두리스트가 길지 않을 때는 저 하얀 스크롤바가 사라지고, 투두리스트가 길어졌을 때 다시 나타나서 더 깔끔할 것 같습니다!

아 그리고 overflow-w도 숨겨주시면 더 예쁠 것 같아요!

seoyeon5117 · 2025-03-24T06:03:47Z

+export const WeekButton = styled.button`
+  font-size: 1rem;
+  cursor: pointer;
+  background: none;
+  border: none;
+  color: ${({ theme }) => theme.colors.text};
+  padding: 5px 10px;
+`;


rem과 px을 번갈아 쓰시는 이유가 있나요? 어떤 부분은 padding에 rem이 들어가있고 이 부분에는 px이 들어가 있어서 어떤 때 px을 사용하시고 어떤 경우 rem을 사용하시는지 궁금합니다!

디자인을 만들면서 개발하다 보니 스타일을 고정하고 싶을 경우에는 px로 사용하고, 그 경우가 아니라면 rem을 썼습니다 ,,, ㅎㅎㅎ

seoyeon5117 · 2025-03-24T06:06:24Z

+    :root  {
+        --vh: 100%;
+    }


이 부분 정의하시고 따로 사용하시지는 않은 것 같아요!

앗,, 그렇네요 ㅜㅜ

seoyeon5117 · 2025-03-24T06:08:29Z

@@ -0,0 +1,53 @@
+import { createGlobalStyle } from 'styled-components';
+import reset from 'styled-reset';


새로운 라이브러리 알아갑니다~

seoyeon5117 · 2025-03-24T06:12:10Z

+  },
+};
+
+export { lightTheme, darkTheme };


export 방식이 통일 되면 좋을 것 같습니다!

seoyeon5117 · 2025-03-24T06:18:16Z

+  return date.toLocaleDateString('ko-KR', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });


저도 바닐라 js로 투두리스트 만들때 코드리뷰 받았던 부분인데 OPTION을 따로 상수로 빼면 코드를 자세히 보지 않아도 추후 쉽게 유지보수할 수 있어 상수로 빼는 방식도 고려해보시면 좋을 것 같네요!

2025314242

배울 것도 많고 너무 좋은 코드였습니다!

2025314242 · 2025-03-24T07:29:03Z

+  const newDate = new Date(currentDate);
+  newDate.setDate(currentDate.getDate() + days);
+  setCurrentDate(newDate);
+};


이렇게 todo 핸들링 관련 함수들 아예 utils로 따로 빼 놓으신 게 너무 좋은 것 같스빈다! 한 눈에 보기 편리하네요

2025314242 · 2025-03-24T07:31:23Z

+    month: 'long',
+    day: 'numeric',
+  });
+};


확실히 이렇게 parameter로 format 전달하게 되면 너무 좋을 것 같습니다! 다만 한 가지 의견을 드리자면, date.toLocaleDateString 에서 'ko-KR' 대신 format으로 설정하시는 건 어떠신가요? 이렇게 하면 추후 유지보수에 더 편리할 것 같습니다!

2025314242 · 2025-03-24T07:32:27Z

+  },
+};
+
+export { lightTheme, darkTheme };


colors 파일 따로 분리하신 것도 그렇고, light/dark 모드 1주차 때 리뷰하실 때도 너무 인상깊게 봤습니다. 저도 기회가 되면 이렇게 모드 분리해서 만들어보고 싶네요!

2025314242 · 2025-03-24T07:34:02Z

+    }
+`;
+
+export default GlobalStyles;


저는 meyer's reset을 따로 복붙해서 사용하였는데, 아예 이렇게 패키지로 사용할 수도 있군요?? 너무 좋은 것 같습니다!

2025314242 · 2025-03-24T07:39:14Z

+  const theme: DefaultTheme = themeMode === 'light' ? lightTheme : darkTheme;
+
+  return { theme, themeMode, toggleTheme };
+};


저도 추후 light/dark 모드 적용해볼 때 이렇게 custom hook 만들어서 사용하면 정말 좋을 거 같네요, 좋은 코드 감사합니다!

2025314242 · 2025-03-24T08:15:12Z

+  );
+};
+
+export default ToggleButton;


이건 그냥 제 개인적인 바램인데, 혹시 기회가 되신다면 토글 버튼 옆에 낮/밤 이모지도 간단하게 추가해주실 수 있으실까요? 1주차 때 있으셨던 거로 기억하는데 너무 좋게 봤어서 그렇습니다!!

2025314242 · 2025-03-24T08:15:51Z

+  );
+};
+
+export default Header;


혹시 헤더를 위쪽 상단에 고정하시는 방안에 대해서는 어떻게 생각하시나요? 지금은 스크롤 내리면 헤더가 가려지더라고요 ㅜㅜ

2025314242 · 2025-03-24T08:17:22Z

+    return () => window.removeEventListener('storage', updateCompletedTodos);
+  }, [updateCompletedTodos]);
+
+  return { completedTodos, maxDays };


위에 커밋에서도 언급하였는데, 지금 방법도 너무 좋지만 혹시 max day를 단순 count가 아닌 비율로 설정하시는 방법은 어떠신가요??

2025314242 · 2025-03-24T08:18:25Z

@@ -0,0 +1,79 @@
+import { useState, useRef } from 'react';
+import * as S from './TodoInput.Styled';
+import { FaCalendarAlt } from 'react-icons/fa';


react에서 자체적으로 아이콘 제공을 해주는군요?? 대박이네요

2025314242 · 2025-03-24T08:24:01Z

+  const [isComposing, setIsComposing] = useState(false);
+  const [selectedDate, setSelectedDate] = useState('');
+  const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
+  const dateInputRef = useRef<HTMLInputElement>(null);


제가 구현하지는 않았지만, 추후에 input type=date 사용할 때 useRef 사용하면 많은 도움이 될 것 같네요 감사합니다!

lemoncurdyogurt

다크모드랑 화이트모드로 모드 전환하는거에서 굉장히 신선함을 느꼈는데, 토글로 전환해서 디벨롭 한게 너무 인상깊었어요! 화면 스타일면에서도 많은 고민을 한게 느껴졌고, 코드에서도 많은걸 배울 수 있었어요!

lemoncurdyogurt · 2025-03-24T08:07:21Z

+        &::-webkit-scrollbar {
+            display: none; /* 웹 브라우저에서 스크롤 바 숨기기 */
+        }


웹 브라우저에 스크롤바 없애는거에 대해서 생각 해본적 없는데 되게 좋은 기술인거 같아요!

lemoncurdyogurt · 2025-03-24T08:18:28Z

+          <S.WeekText>Weekly Progress 📅</S.WeekText>
+          {Object.entries(completedTodos).map(([day, count]) => (
+            <S.DayStat key={day} $isMax={maxDays.includes(day)}>
+              {day === todayDay ? `Today (${day})` : day} | {count}개 완료
+            </S.DayStat>


사소한거긴 한데, 요일 별 할일을 보고 -> 해당 날짜로 이동하는 과정이 조금 불편한거 같아서 요일을 클릭했을 때 해당 날짜로 이동시킬 수 있는 navigate가 있으면 좋을 거 같아요!

lemoncurdyogurt · 2025-03-24T08:28:22Z

+    if (e.key === 'Enter' && !isComposing) {
+      e.preventDefault();
+      handleAddTodo();
+    }


e.key === 'Enter' && !isComposing로 한글 조합 중에 엔터키 막은거 같은데
이렇게 등록이 돼요!

lemoncurdyogurt · 2025-03-24T10:02:16Z

+  <StrictMode>
+    <GlobalStyles />
+    <App />
+  </StrictMode>,


StrictMode를 사용한 이유가 있을까요?

chaeyoungwon added 18 commits March 20, 2025 15:27

Environment: 초기 환경 세팅

8f4646b

Feat: 홈화면 UI 초기 구현

4370b73

Feat: 등록 및 삭제 로직 구현

f6e35a4

Feat: 다크모드 로직 구현 및 스타일 수정

afce987

Feat: 할 일 completed 속성 추가

55a654d

Feat: 사이드바 weekly progress 추가 구현

a8c17f7

Refactor: 주간완료 할일 계산함수 분리

6904b68

Refactor: 주석 추가 및 코드 분리

201d543

Fix: 삭제 시 빈 배열을 남기지 않도록 수정

63315e0

Feat: 캘린더 아이콘 및 datepicker 추가

38b9eca

Feat: 사이드바 애니메이션 추가

b58443f

Fix: fadein 속성 제거

7904dc4

Chore: 배포

9566700

Chore: 배포 설정 수정

5109a3e

Chore: 배포

5cc53e5

Fix: tsconfig.json 수정

fd84360

Fix: 확장자 제거

3b53d73

Fix: 포인터속성 제거

c4160d0

seoyeon5117 reviewed Mar 24, 2025

View reviewed changes

2025314242 reviewed Mar 24, 2025

View reviewed changes

lemoncurdyogurt reviewed Mar 24, 2025

View reviewed changes

		@@ -0,0 +1,53 @@
		import { createGlobalStyle } from 'styled-components';
		import reset from 'styled-reset';

Conversation

chaeyoungwon commented Mar 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

배포 링크

미션을 진행하면서

Key Questions

Uh oh!

seoyeon5117 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

2025314242 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lemoncurdyogurt left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

chaeyoungwon commented Mar 21, 2025 •

edited

Loading