[2주차] 노수진 미션 제출합니다. #8

sujinRo · 2023-03-24T14:56:59Z

안녕하세요! 노수진입니다.

React로 Todo를 구현하면서 저번 미션에서 하지 못했던 localStorage를 이용하여 재 실행하여도 todo가 남아있도록 하였고, 저번에 받았던 피드백들을 모두 수정하기 위해 노력하였습니다.!
구현을 하면서 기능별로 git에 commit하는 것에 익숙하지 않아 commit양이 적은데 과제를 하면서 점점 익숙해 나가겠습니다,,ㅎ
이번 과제도 하면서 많이 배웠습니다:)

[Key Questions]

1. Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?
DOM은 트리구조로 이해하기는 쉽지만 구조때문에 거대한 DOM트리에서는 속도 문제가 발생하였고, 지속적인 DOM업데이트는 잦은 오류를 발생시켰습니다. 또한, DOM을 제대로 찾지 못한다면 코드를 분석하려고 다시 거대한 HTML을 들여다 봐야 하는 단점이 존재했습니다. 이러한 단점을 보완하기 위해 만든 것이 Virtual-DOM 입니다.

Virtual-DOM은 DOM을 추상화한 가상 객체로, 변화가 많은 View를 실제 DOM에서 직접 처리하는 방식이 아닌 Virtual Dom과 메모리에서 미리 처리하고 저장한 후 실제 DOM과 동기화 하는 프로그래밍 개념입니다. 실제 DOM보다 가볍고 빠른 rendering이 가능하기 때문에 DOM의 부담을 줄여줍니다. 또한 구조상으로 실제 DOM과 큰 차이가 없어 이해하기도 편리합니다!

2. 미션을 진행하면서 느낀, React를 사용함으로서 얻을 수 있는 장점은 무엇이었나요?
React Hook을 이용하여 계속해서 변화하는 값을 지정하는 것이 편리하다고 느껴졌습니다.

3. React에서 상태란 무엇이고 어떻게 관리할 수 있을까요?
React에서 상태(State)란 컴포넌트에 대한 데이터 또는 정보를 포함하는 데 쓰이는 React 내장 객체입니다. 컴포넌트 상태는 시간이 지남에 따라 변경될 수 있다. 변경될 때마다 컴포넌트가 다시 렌더링됩니다. state 변경은 사용자 작업 또는 시스템 생성 이벤트에 대한 응답으로 발생할 수 있으며 이 변경은 컴포넌트의 동작, 렌더링 방법을 결정합니다.

상태를 관리할 수 있는 라이브러리에는 Redux, MobX, Recoil 등이 있습니다.
참고: https://han-py.tistory.com/487

4. Styled-Components 사용 후기 (CSS와 비교)
같은 페이지에 있어 스타일을 지정할 때 페이지를 이동할 필요가 없고,
id나 class를 주지 않고, 컴포넌트 이름 쓰듯, 스타일을 지정해서 좀 더 보기 좋다는 점이 CSS보다 좋았습니다.

TodoList:
https://react-todo-17th-3ld7-kn5wybd5y-sujinro.vercel.app/

YooSeonHo

수진님 안녕하세요 프론트 운영진 유선호입니다!
코드 리뷰를 통해 받은 피드백들을 많이 받영해주시다니 감동입니당😭
코드가 깔끔해서 읽기 편했던 거 같아요!
수정 사항이라기 보단 저의 개인적인 의견들을 달아 두었으니 확인 부탁드려요!
한 주 동안 고생 많으셨고 스터디 때 봬요!!!

YooSeonHo · 2023-03-25T07:30:17Z

src/TodoList.js

+      <div className="done">
+        <p className="subTitle">📂done</p>
+        <p className="doneCount">items: {doneId}</p>
+        <ul type="none" id="doneList">
+          <TodoText
+            key={doneInfo.id}
+            id={doneInfo.id}
+            todo={doneInfo.todo}
+            isChecked={doneInfo.isChecked}
+            deleteTodo={deleteDone}
+            move={moveToTodo}
+            moveList={moveTodoList}
+          />
+        </ul>
+      </div>


todolist와 donelist 로 분리하여 컴포넌트 별로 관리해주시면 더 좋을 거 같아요!

YooSeonHo · 2023-03-25T07:34:44Z

src/TodoList.js

  return (
    <div className="container">
      <h1 className="title">Things to do</h1>
-      <AddForm />
+      <AddForm addTodo={addTodo} />


이벤트 핸들러의 이름은 보통 handle + 대상 + 동작의 형식으로 짓는다고 해요.

참고자료 한 번 읽어보시면 좋을 거 같아요!

YooSeonHo · 2023-03-25T08:13:10Z

src/AddForm.js

+const FormInput = styled.form`
+  display: flex;
+  height: 8vh;
+  align-items: center; /*교차축 정렬*/
+  justify-content: center; /*주축 정렬*/
+`;
+
+const InputText = styled.input`
+  border-radius: 0.8vw;
+  border: none;
+  width: 75%;
+  height: 2vw;
+  background-color: rgb(255, 225, 170);
+  font-size: 1vw;
+  outline: none;
+  &::placeholder {
+    color: rgb(255, 236, 200);
+  }
+`;
+


오... 마지막에 바꾸셨군요!

YooSeonHo · 2023-03-25T08:13:33Z

src/TodoList.js


-const All = styled.body`
+const All = styled.div`
  font-family: Arial, Helvetica, sans-serif;


폰트 예뻐요 😁

YooSeonHo · 2023-03-25T08:15:03Z

src/TodoList.js

@@ -2,8 +2,9 @@ import React, { useCallback, useEffect, useState, useRef } from 'react';
 import AddForm from './AddForm';
 import TodoText from './TodoText';
 import styled from 'styled-components';
+import { v4 as uuidv4 } from 'uuid';


key 값을 위해 uuid를 사용하셨네요! 좋아용~~ Date.now() 같은 방법도 추천 드릴게요!

oyatplum · 2023-03-26T01:29:36Z

src/AddForm.js

@@ -0,0 +1,65 @@
+import React, { useEffect, useState, useRef } from 'react';


저도 이렇게 사용했었는데 React를 적어주지 않아도 되는 걸 이번 코드 리뷰 하면서 처음 알게 됐어요!!
예린님 과제에서 문기님이 코드 리뷰 해주신 부분 참고하시면 도움 되실 것 같아요!!! 코드 리뷰

oyatplum · 2023-03-26T01:32:13Z

src/TodoList.js

+  &::-webkit-scrollbar {
+    background: transparent;
+    width: 0;
+  }
+`;


오오~ 스크롤 바를 아예 안 보이게 해주는 것도 깔끔하고 보기 좋은 것 같아요!!!👏🏻👏🏻👏🏻

oyatplum · 2023-03-26T01:40:36Z

src/TodoList.js

+function TodoList() {
+  const [todoList, setTodoList] = useState([]);
+  const [todoId, setTodoId] = useState(0);
+  const [doneList, setDoneList] = useState([]);
+  const [doneId, setDoneId] = useState(0);
+  const isMount = useRef(true);


수진님께서 작성하신 addTodo 함수에 있는 isChecked 상태를 활용하셔서 list를 todo와 done으로 따로 만들지 않고 한 번에 관리하시면 전반적으로 중복되는 코드들을 줄일 수 있을 것 같아요~!! 개인적인 생각입니다ㅎㅎ!!💪🏻

hyosin-Jang

수진님 안녕하세요~~
전체적으로 ref랑 useCallback을 잘 활용하시는거 같아요
수진님 코드 보면서 많이 배웠습니다!
이번 주도 과제하느라 고생하셨고 스터디 때 뵐게요! ☺️

hyosin-Jang · 2023-03-25T21:32:01Z

src/TodoList.js

+  overflow: auto;
+  &::-webkit-scrollbar {
+    background: transparent;
+    width: 0;


스크롤바 안나타나게 한거 좋아요~~ 깔끔하네요 👍

hyosin-Jang · 2023-03-25T21:33:08Z

src/AddForm.js

+  border: none;
+  width: 75%;
+  height: 2vw;
+  background-color: rgb(255, 225, 170);


vw랑 vh를 잘 사용하시는거 같아요! 👍

hyosin-Jang · 2023-03-26T02:33:39Z

src/AddForm.js

+
+  useEffect(() => {
+    input.current.focus();
+    setValue('');


input에 ref 달아서 초기화할 때 focus 준거 좋은 방법인거 같아요! 👍

hyosin-Jang · 2023-03-26T02:35:52Z

src/TodoList.js

+  cursor: pointer;
+`;
+
+const SectionCount = styled.p`


시멘틱 태그를 적절히 잘 쓰시는거 같아요!

hyosin-Jang · 2023-03-26T02:48:33Z

src/TodoList.js

+  const isMount = useRef(true);
+
+  useEffect(() => {
+    if (!isMount.current) {


ref를 state처럼 사용하신게 인상 깊었어요 리렌더링이 필요하지 않을 때는 ref를 사용하는게 좋은 방법인거 같네요!!

hyosin-Jang · 2023-03-26T03:02:04Z

src/TodoList.js

+    (id) => {
+      const index = doneList.findIndex((doneInfo) => doneInfo.id === id);
+      const newTodoList = [...todoList];
+      newTodoList.push(doneList[index]);


const newTodoList = [...todoList, doneList[index]] 처럼 한번에 적어줄 수 있을거 같아요!

hyosin-Jang · 2023-03-26T03:03:53Z

src/TodoList.js

+      const newDoneList = doneList.filter((doneInfo) => doneInfo.id !== id);
+      setDoneList(newDoneList);
+      setDoneId((newDoneId) => newDoneId - 1);
+    },


state를 업데이트하실 때 이전 상태를 참조해서 잘하신거 같아요!

westofsky

대체로 react를 잘 활용하는게 느껴지는 코드였어요 .. 저는 useCallback을 잘 사용하지 않았던 것 같은데 잘 사용하신 것 같아 배워갑니다.. 약간의 참고할만한 것들 적어보았어요 과제 수고했습니다~~~

westofsky · 2023-03-26T06:07:43Z

src/TodoList.js

+const List = styled.ul`
+  font-size: 1vw;
+  cursor: pointer;
+`;


한글은 아무리 길어도 줄바꿈되는데 영어나 숫자는 줄바꿈이 안되어서 저는 이부분
word-break : break-all; 로 처리했는데 한번 참고만 하셔요!

westofsky · 2023-03-26T06:12:55Z

src/TodoList.js

+  const deleteTodo = useCallback(
+    (id) => () => {
+      const newTodoList = todoList.filter((todoInfo) => todoInfo.id !== id);
+      setTodoList(newTodoList);
+      setTodoId((newTodoId) => newTodoId - 1);
+    },
+    [todoList]
+  );
+
+  const deleteDone = useCallback(
+    (id) => () => {
+      const newDoneList = doneList.filter((doneInfo) => doneInfo.id !== id);
+      setDoneList(newDoneList);
+      setDoneId((newDoneId) => newDoneId - 1);
+    },
+    [doneList]
+  );


todoId랑 doneId가 중복이 될 때 삭제를 하면

와 같은 상황에 'ㅁㅁ'을 제거하기 위해 누르면 같은 id(0)값을 가진 4번index('ㅁㅁㅁㅇㄹㄴ')가 삭제되는 것 같아요
id값을 한번 Date.now()와 같이 중복되지 않도록 설정해두시는 건 어떨까요 ?

westofsky · 2023-03-26T06:14:53Z

src/TodoList.js

+    <All>
+      <Container>
+        <Title>Things to do</Title>
+        <AddForm addTodo={addTodo} />
+        <SectionLine />
+        <SectionName>
+          <SubTitle>📒to do</SubTitle>
+          <SectionCount>items: {todoId}</SectionCount>
+          <List type="none">
+            {todoList.map((todoInfo) => {
+              return (
+                <TodoText
+                  key={uuidv4()}
+                  id={todoInfo.id}
+                  todo={todoInfo.todo}
+                  isChecked={todoInfo.isChecked}
+                  deleteTodo={deleteTodo}
+                  move={moveToDone}
+                  moveList={moveDoneList}
+                />
+              );
+            })}
+          </List>
+        </SectionName>
+        <SectionLine />
+        <SectionName>
+          <SubTitle>📂done</SubTitle>
+          <SectionCount>items: {doneId}</SectionCount>
+          <List type="none">
+            {doneList.map((doneInfo) => {
+              return (
+                <TodoText
+                  key={uuidv4()}
+                  id={doneInfo.id}
+                  todo={doneInfo.todo}
+                  isChecked={doneInfo.isChecked}
+                  deleteTodo={deleteDone}
+                  move={moveToTodo}
+                  moveList={moveTodoList}
+                />
+              );
+            })}
+          </List>
+        </SectionName>
+      </Container>
+    </All>


Tag명들을 보고 이해하기 쉽게 잘 사용하신 것 같아요

westofsky · 2023-03-26T06:30:21Z

src/TodoList.js

+      newDoneList[index].isChecked = newDoneList[index].isChecked
+        ? false
+        : true;


이부분은 newDoneList[index].isChecked = !newDoneList[index.isChecked; 혹은 가독성이 그렇게 좋진 않지만 .. newDoneList[index].isChecked ^= true; 도 쓸 수 있을 것 같아요

sujinRo added 8 commits March 24, 2023 22:27

add page TodoList, TodoText, AddForm

2f47b91

localStorage

b79b92d

addTodo

7976724

deleteTodo&deleteDone

e3ab8c6

moveToTodo&moveToDone

38ab711

for vercel

0357e01

css -> styled-components

afe1df4

key값 변경

75f986b

YooSeonHo reviewed Mar 25, 2023

View reviewed changes

oyatplum reviewed Mar 26, 2023

View reviewed changes

hyosin-Jang reviewed Mar 26, 2023

View reviewed changes

westofsky reviewed Mar 26, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[2주차] 노수진 미션 제출합니다. #8

[2주차] 노수진 미션 제출합니다. #8

sujinRo commented Mar 24, 2023 •

edited

Loading

YooSeonHo left a comment

YooSeonHo Mar 25, 2023

YooSeonHo Mar 25, 2023

YooSeonHo Mar 25, 2023

YooSeonHo Mar 25, 2023

YooSeonHo Mar 25, 2023 •

edited

Loading

oyatplum Mar 26, 2023

oyatplum Mar 26, 2023

oyatplum Mar 26, 2023

hyosin-Jang left a comment

hyosin-Jang Mar 25, 2023

hyosin-Jang Mar 25, 2023

hyosin-Jang Mar 26, 2023

hyosin-Jang Mar 26, 2023

hyosin-Jang Mar 26, 2023

hyosin-Jang Mar 26, 2023

hyosin-Jang Mar 26, 2023

westofsky left a comment

westofsky Mar 26, 2023

westofsky Mar 26, 2023

westofsky Mar 26, 2023

westofsky Mar 26, 2023

		@@ -0,0 +1,65 @@
		import React, { useEffect, useState, useRef } from 'react';

[2주차] 노수진 미션 제출합니다. #8

Are you sure you want to change the base?

[2주차] 노수진 미션 제출합니다. #8

Conversation

sujinRo commented Mar 24, 2023 • edited Loading

[Key Questions]

YooSeonHo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

YooSeonHo Mar 25, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hyosin-Jang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

westofsky left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sujinRo commented Mar 24, 2023 •

edited

Loading

YooSeonHo Mar 25, 2023 •

edited

Loading