[2주차] 김선영 미션 제출합니다 by seondal · Pull Request #7 · CEOS-Developers/react-todo-16th

seondal · 2022-09-23T10:11:44Z

배포링크

http://react-todo-16th-87m9.vercel.app/

Key Questions

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

가상 돔 : 실제 돔에 접근해서 조작하는 대신 이를 추상화한 자바스크립트 객체를 구성하여 사용합니다
규모가 큰 웹 애플리케이션의 브라우저상에서 돔에 직접 접근하여 변화를 주면 브라우저가 css를 다시 연산하고, 레이아웃을 구성하고, 렌더링하며 허비되는 시간과 성능이슈를 해결할 수 있습니다.

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

공통적으로 사용하는 내용들을 컴포넌트로 만들 수 있기 때문에
재사용도 쉽고 코드도 훨씬 깔끔해져서 좋았습니다.

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

props 처럼 컴포넌트의 렌더링 결과에 영향을 주는 데이터를 갖고 있다
props와는 달리 매개변수처럼 컴포넌트에 전달되는것이 아닌,
함수 내에 선언된 변수처럼 컴포넌트 내부에서 관리된다.
보통 react hook들을 이요하여 state를 관리하고 dom을 업데이트한다
- useState
- useRef
- useEffect 등..

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

여러개의 css 파일을 만들지 않아도 되어 좋았고,
해당 컴포넌트를 사용한 파일에 스타일이 정의되어 있기 때문에 코드를 이해하거나 수정할때 훨씬 편했습니다

kongnayeon

안녕하세요 선영님! 이번 주 코드 리뷰 파트너 강나연입니다 😸

컴포넌트마다 파일을 나누어 작성해 주셔서 코드를 이해하기 편했습니다!
useCallback을 사용하셨던데 최적화에 대해 고민하며 코드를 짜셨다는 게 느껴져서 좋았어요!
몇 가지 코멘트를 남겨 뒀는데 확인해 보시면 좋을 것 같습니다 🙂

그럼 스터디 시간에 봬요! 🫶🏻

kongnayeon · 2022-09-24T11:05:56Z

+
+  // 추가
+  const nextId = useRef(3);
+  const onConcat = useCallback(


useCallback 엄청 잘 사용하시네요... 배워 갑니다 🥰

kongnayeon · 2022-09-24T11:12:44Z

+  );
+};
+
+export default DoneListBox;


DoneListBox 컴포넌트와 TodoListBox 컴포넌트는 하나로 합쳐도 좋을 것 같아요!! 제목과 완료 여부를 props으로 전달하면 되지 않을까 싶습니다...!

계속 고민하던 부분이였는데..! 시도해보겠습니다 감사합니다 !!

kongnayeon · 2022-09-24T11:19:54Z

+import React from "react";
+import styled from "styled-components";
+import { AiFillDelete } from "react-icons/ai";
+import { BsCircle, BsCheckCircleFill } from "react-icons/bs";


우와 저도 다음엔 라이브러리 사용해서 아이콘 써 봐야겠어요!! 🤩

fontAwesome.. 최고... 👍

jhj2713

안녕하세요, 프론트 파트장 주효정입니다👏

전반적으로 코드를 잘 작성해주신 것 같아서 따로 조언해드릴 부분이 많이 없었던 것 같아요. 메모이제이션도 잘 활용해서 리렌더링을 방지해주셨고, 깔끔하네요👍
다만 스타일 컴포넌트나 함수 네이밍이 조금은 추상적인 느낌이 강한 것 같아요. 지금은 기능이 많은 웹을 제작하는게 아니지만, 기능이 많아지는 경우 Box나 Item, List와 같은 네이밍은 해당 컴포넌트의 작업을 설명하지 못해 부적절할 것 같아요. 이 부분만 조금 신경써주신다면 좋을 것 같아요!

이번주 수고 많으셨고 스터디 시간에 봬요~

ch9eri · 2022-09-24T15:55:49Z

+        <input
+          type="text"
+          placeholder="할 일을 작성하세요"
+          required


선영님이 지난번 코드리뷰 때 알려주신 required 를 저도 적용해보았어요! 덕분에 많은 것을 배워갑니당🤩

ch9eri · 2022-09-24T16:01:50Z

@@ -10,16 +10,16 @@ function App() {
    { id: 2, text: "yayaya", checked: false },
  ]);


사용자의 입장에서 이렇게 미리 적용해두신게 기능을 더 빠르게 이해하기 좋았습니다!

ch9eri · 2022-09-24T16:05:25Z

+    css`
+      text-decoration: line-through;
+      color: gray;
+    `}


헙 이부분 구현 실패했는데 .. styled-components안에서 이렇게 적용할 수 있군요 ! 저도 한번 적용해봐야겠어요! 배워갑니당 🤩

seondal added 15 commits September 23, 2022 17:46

[Feat] create InputBox.js

0e3e188

[Style] create style.css

08d30c9

[Create] DoneListBox, TodoListBox

7cc234b

[Install] react-icons

7a120ca

[Feat] ListItem.js

029d02d

[style] ListItem.js

7dfff62

[Feat] App.js 로부터 todos 전달받아서 listItem에 반영하기

451277a

[Feat] 입력받아서 todo 추가하기 (onConcat)

831804e

[Fix] nextId가 고유하지 않는 현상 발생 -> useRef를 이용

6a63279

[Feat] todo 삭제하기 (onDelete)

0f762bf

[Feat] todo 완료체크하기 (onCheck)

1cd85e7

[Feat] 할일목록(doings) 과 완료목록(dones)로 분리해서 관리

0fb1618

[Feat] App.js로부터 dones 전달받아서 반영하기 (DoneListBox.js)

b15e7f6

[Refact] Styled-components

964f350

[Edit] todo.id !== id

dea5539

kongnayeon reviewed Sep 24, 2022

View reviewed changes

jhj2713 reviewed Sep 25, 2022

View reviewed changes

Comment thread src/App.js Outdated

Comment thread src/component/StyleComponent.js Outdated

ch9eri reviewed Sep 25, 2022

View reviewed changes

seondal added 3 commits September 28, 2022 12:37

[Style] GlobalStyle

06115f8

[Refact] DonListBox, TodoListBox 컴포넌트 하나로 합치기

aab6101

[Refact] 코드리뷰 반영

99e30a9

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[2주차] 김선영 미션 제출합니다#7

[2주차] 김선영 미션 제출합니다#7
seondal wants to merge 18 commits into
CEOS-Developers:masterfrom
seondal:master

seondal commented Sep 23, 2022 •

edited

Loading

Uh oh!

kongnayeon left a comment

Uh oh!

Uh oh!

kongnayeon Sep 24, 2022

Uh oh!

Uh oh!

kongnayeon Sep 24, 2022

Uh oh!

seondal Sep 28, 2022

Uh oh!

kongnayeon Sep 24, 2022

Uh oh!

seondal Sep 28, 2022

Uh oh!

jhj2713 left a comment

Uh oh!

Uh oh!

Uh oh!

ch9eri Sep 24, 2022

Uh oh!

ch9eri Sep 24, 2022

Uh oh!

ch9eri Sep 24, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		@@ -10,16 +10,16 @@ function App() {
		{ id: 2, text: "yayaya", checked: false },
		]);

Conversation

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

Uh oh!

배포링크

Key Questions

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

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

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

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

Uh oh!

kongnayeon left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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!

jhj2713 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

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

seondal commented Sep 23, 2022 •

edited

Loading