[2주차] 이한비 미션 제출합니다 by AlmondBreez3 · Pull Request #3 · CEOS-Developers/react-todo-16th

AlmondBreez3 · 2022-09-23T04:14:02Z

안녕하세요! 이번에는 조금 일찍 제출해서 만약에 피드백을 받는다면 바로바로 고쳐보고 싶습니다!
저번 자바스크립트로 투두리스트 구현할때는 기능 부분에서 야매로?진행 시켰던 부분이 있었는데 리엑트를 사용하니까 야매 구현은 확실히 줄어든것 같습니다. 그럼에도 불구하고 아쉽고 어려웠던 점들이 존재합니다.

[바뀐 부분]
css부분에서 크게 바뀐건 아닌데 텍스트 통일성에 신경을 썻습니다!
저번에 추가되지 못한 marker을 추가할 수 있어서 좋았습니다.
기능 구현에서 조금 차이가 생겼는데 이번에 배열을 이용해서 총 할일 목록과 끝난일 목록의 개수를 따로 설정해주지 않고 그냥 배열.length를 이용해서 구현했습니다.
done목록으로 이동할때 줄긋기 효과가 없어졌습니다!
favicon과 웹사이트 이름을 바꿔보았습니다!

[어렵고 아쉬웠던 부분들]
1.중복값을 받지 않게 코드 짜는 법이 계속 막혔습니다 ㅜㅜid값을 고유 아이디로 주는 Date.now()를 써보았는데 어느 부분에서 input값 입력을 막아야하는지와 어떻게 막아야하는지를 아직까지 계속 고민하고 있습니다.
2.조건 스타일링을 이용해서, done list로 할일들이 옮겨질때 줄긋기 효과를 넣을 수 있는지가 궁금합니다..!제가 함수를 하나만 설정해서 그 함수로 done,할일 리스트 둘다 했는데 styling은 통일되다보니까 toggle값이 true, false일때마다 다르게 효과를 줄 수 있는지가 궁금합니다.

베포링크:https://react-todo-16th-uxwi.vercel.app/

key Questions:

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

가상돔은 돔이 생성되기 전, 이전 상태 값과 수정사항을 비교하여 달라진 부분만 돔에게 한번에 전달하여 전체 렌더링을 딱 한번만 진행합니다. DOM에 직접 접근하는 것보다 가상돔을 이용하면 사소한 변경사항에도 전체가 재렌더링 되지 않을 수 있어서 좋습니다.

2.미션을 진행하면서 느낀, React를 사용함으로서 얻을수 있는 장점은 무엇이었나요?

html과 js에서는 제가 짯던 코드가 길게 길게 느껴졌는데 react로 코딩하는 것은 체계를 갖춘코드를 작성하는 느낌이 들었습니다.

React에서 상태란 무엇이고 어떻게 관리할 수 있을까요?

상태는 컴포넌트 안에서 관리 되고 시간이 지나면서 바뀌는 동적인 데이터입니다.

props로 데이터를 전달하는것은 지역상태이고 다른 저장소에서 데이터를 불러오는 것은 전역상태입니다. 일반적인 경우에는 지역상태로 데이터를 관리하는 것이 권장된다고 합니다.

서버에서 가져오는 전역 상태 관리시에는 데이터와 ui상태를 나타내는 데이터를 분리하여 다룹니다. 보통 contextAPI,Redux,React Query등 툴을 이용해서 관리합니다.

4.Styled-Components 사용 후기 (CSS와 비교)

기능 구현할때 블록 단위로 나눠서 재활용성을 높이면 코드가 더 깔끔해지던데, 기존 css사용할때보다 styled-components는 블록 단위로 필요한 것만 전체적으로 디자인 적용 할 수 있어서 훨씬 더 쉬웠습니다. 이해하기도 쉬웠고 적용도 더 쉬웠습니다.

jhj2713

안녕하세요 한비님, 프론트 파트장 주효정입니다🙌

favicon과 사이트 이름 변경하는 센스 최고네요. 너무 귀엽고 예쁜 페이지가 만들어진 것 같아요👍

그리고 어렵고 아쉬웠던 부분에 대해 상세하게 적어주셔서 저도 생각해볼 수 있는 기회가 됐던 것 같아요. 어렵고 아쉬웠던 부분에 대해 조금씩 제 의견을 적어볼게요ㅎㅎ

중복값이 같은 입력값 말하는거 맞겠죠..? todo에서 입력값을 처리하는 방법으로는 크게 두 가지 방법이 있을 것 같아요. 일단 한 가지 방법은 그냥 중복 입력값을 허용한 뒤 toggle에서 id로 필터링을 해주는 방법일 것 같아요. 두 번째 방법은 한비님 말씀대로 todo 중복값을 허용하고 싶지 않은 경우가 될 것 같은데요, 입력값을 받고 onCreate가 될 때 현재 todoList, doneList에 있는 모든 item들의 데이터들을 비교해서 확인하는 방식이 있을 것 같아요!
조건 스타일링을 적용하는 방법도 여러가지 있을 수 있을 것 같은데, 지금 딱 생각나는 방식은 속성을 지정해주는 방식이에요!
```
const Item = styled.div`
  color: ${({toggle}) => toggle ? "black" : "red"};
`

...

<Item toggle>TODO</Item>
```
컴포넌트에 속성을 지정해준 후 styled-components 내에서 해당 속성값에 따라 다른 스타일을 부여할 수 있습니다. 토글될 때마다 toggle을 변경해주면 조건 스타일링이 가능할 것 같네요~ 다른 좋은 방법도 생각해보시면 좋을 것 같아요!

이번 한 주도 너무 수고많으셨고 스터디 시간에 봬요~!!~👏

jhj2713 · 2022-09-23T16:18:46Z

+import styled from 'styled-components';
+
+//인풋 박스 함수
+function AddList({ input, onChange, onCreate }) {


destructuring 좋네요!

옛날에는 구조분해에 대해서 잘 모르고 썻는데 이번 기회를 통해 코드를 알고 쓰게 된 것 같아요!

jhj2713 · 2022-09-23T16:22:15Z

+        <StyledImg
+          src="https://cdn-icons-png.flaticon.com/512/5259/5259457.png"
+          className="imghrt"
+          alt="*"


alt 속성은 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시하는 역할로 웹 접근성을 위해서 해당 이미지의 정확한 의미를 적어주는게 좋을 것 같아요~!

앗 네 바로 바꾸겠습니다 ㅎㅎ

jhj2713 · 2022-09-23T16:23:06Z

+      toggle: true,
+    };
+
+    if (input.trim() === '') {


!input.trim()으로 더 간단하게 표현할 수 있을 것 같아요!

오!..바로 고쳤습니당

jhj2713 · 2022-09-23T16:30:46Z

+  const onToggle = useCallback(
+    (input) => {
+      const lis = list.find((todo) => todo.input === input);
+
+      if (lis.toggle !== false) {
+        setList(
+          list.map((todo) =>
+            todo.input === input ? { ...todo, toggle: !todo.toggle } : todo
+          )
+        );
+
+        const moveI = list.find((todo) => todo.input === input);
+
+        setDlist(dlist.concat(moveI));
+        setList(list.filter((todo) => todo.input !== input));
+      }
+    },
+    [list, dlist]
+  );


useCallback으로 불필요한 리렌더링을 방지하고자 하신 것 같은데, 현재 모든 컴포넌트가 리렌더링되고 있는 것 같아요.
현재 일어나는 이벤트(submit, toggle 등)는 모두 list나 dlist 중 하나를 변경시키는 이벤트입니다. 그런데 두 개의 Toggle 함수는 모두 useCallback의 의존성에 의해서 list, dlist가 변경되면 다시 생성되게됩니다. 결국 어떠한 이벤트가 발생하더라도 해당 함수가 다시 생성되고 있어서 현재 코드에서는 useCallback이 의미없는 처리인 것 같아요.

메모이제이션이 어떤 상황에 적절한지에 대해 생각해보고 적절한 상황에 잘 활용해보면 좋을 것 같아요~!!

헉 바로 고쳤습니다!...뭔가 데이터 처리는 반드시 useCallback을 사용해야 하는 줄 알았는데 이번 기회를 통해 리렌더링이 되는지 아닌지를 좀 봐야할 것 같습니다!감사합니다 ㅜㅜ

jhj2713 · 2022-09-23T16:42:51Z

+  };
+
+  //nextId 1부터 사용
+  const nextId = useRef(1);


nextId는 어디에 사용하는 것인가요,,??

제가 계속 토글관련해서 id값을 기준으로 했을때 필요했던 부분인데 안지운걸 지금 발견했네요..!!

jhj2713 · 2022-09-23T17:01:13Z

+  margin-top: 10%;
+  margin-bottom: 10%;
+  margin-left: 38%;


margin-top, margin-bottom, margin-left는 margin 속성 하나로 축약형을 써도 좋을 것 같아요~!

yjoonjang

안녕하세요 한비님, 16기 프론트 장영준입니다🙌

어려웠고 아쉬웠던 부분을 잘 적어주셔서 저도 함께 생각해보고 답변드릴 수 있게 된 것 같습니다 !

저는 중복값 관련해서 for문을 통해 해결했는데요, 대략적인 코드는 다음과 같습니다 !
for (int i = 0; i < list.length; i++) { if (e.target.value === list[i]) { window.alert('중복된 값입니다!); e.target.value ' ' } }
저는 done List의 원소들에만 className 을 부여해서 줄 긋는 효과를 주었는데요, 다음 자료를 참고해주시면 좋을 것 같습니다 !

과제 너무 수고하셨고, 스터디 시간에 뵈어요 !!!

yjoonjang · 2022-09-25T07:23:37Z

+
+  const onDremove = (id) => {
+    setDlist(dlist.filter((todo) => todo.id !== id));
+  };


이런 onRemove와 onDremove는 그냥 onRemove라는 하나의 함수로도 만들 수 있을 것 같아요 !

yjoonjang · 2022-09-25T07:25:54Z

+      setDlist(dlist.filter((todo) => todo.id !== id));
+    }
+  };
+


요것도요..!
ex.

const onToggle = (id, type) => { if (type === 'list') {~} else {~} }

yjoonjang · 2022-09-25T07:27:29Z

+      toggle: true,
+    };
+
+    if (!input.trim()) {


앗 저는 이거 깜빡했는데 넣어주신거 완전 센스있는거 같습니당~~

ch9eri · 2022-09-24T15:39:58Z

+      input: '',
+      toggle: true,
+    });
+    nextId.current += 1;


.current 에 대해 정확히 몰랐는데 한비님 코드 보며 공부하다가 알게 되었네요! 다음엔 저도 한번 사용해봐야겠어요!

저 근데 결국에 current를 쓴 이유가 없어졌어요 ㅜㅜ저 코드 지웠어야 했는데 안지운걸 발견했네요!

ch9eri · 2022-09-24T15:42:50Z

+          )
+        );
+
+        const moveI = dlist.find((todo) => todo.input === input);


filter만 쓸 생각밖에 못 했는데 이 경우에는 find를 써도 되겠네요!! 배워갑니다!!

둘다 써보니까 find쓰는것은 코드 낭비가 조금 심한거같아요! 그냥 filter써서 깔끔하게 지워주면 될 것 같아요

ch9eri · 2022-09-24T15:45:41Z

+      <StyledBody>
+        <AllTemp>
+          <AddList input={input} onChange={onChange} onCreate={onCreate} />
+          <FontCol> 할 일(중복 입력X) {list.length}</FontCol>


중복입력X가 todo에 중복된 값을 저장 못 한다는 기능을 구현하려고 쓰신거겠죠????! 이 생각은 못 했네요! 저도 중복 입력을 막는 기능도 구현해봐야겠어요 🤩

저 그렇게 하려고 했는데 결국 구현을 못했어요 ㅠㅠ 그냥 중복 입력도 받을 수 있는 것으로 고쳤어요!

ch9eri · 2022-09-24T15:50:47Z

+const StyledButton = styled.button`
+  margin-left: 5px;
+  background: none;
+  border-radius: 60%;


border-radius를 %로 적용할 수 있는지는 몰랐네요! 찾아보니 %를 사용하면 원을 만들기 쉽군요 ... 싱기한 css의 세상 🤩

저는 vanila js 할때 처음 알았어요!!

AlmondBreez3 added 6 commits September 22, 2022 02:39

:feat:기능 구현만 완료

7558c19

:feat:css적용

eff7e7f

:feat:자잘자잘한 것 고치고 지우기

224145c

:feat:console.log지우고 필요 없는 부분 삭제

624d3b4

:feat:favicon변경

5e29fe2

:feat:favicon제대로 추가

2f28f37

AlmondBreez3 changed the title ~~2주차 이한비 미션 제출합니다~~ [2주차] 이한비 미션 제출합니다 Sep 23, 2022

jhj2713 reviewed Sep 23, 2022

View reviewed changes

:feat:중복입력 해결

f52e2a9

yjoonjang reviewed Sep 25, 2022

View reviewed changes

ch9eri reviewed Sep 25, 2022

View reviewed changes

Conversation

AlmondBreez3 commented Sep 23, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jhj2713 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

yjoonjang 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

AlmondBreez3 commented Sep 23, 2022 •

edited

Loading

jhj2713 left a comment •

edited

Loading