[2주차] 오예린 미션 제출합니다. #7

YelynnOh · 2023-03-24T13:43:52Z

배포 링크: (https://react-todo-17th-real-final.vercel.app/)

안녕하세요, 오예린입니다!🤗
2주차 과제도 무사히(..?!) 끝내게 되었네요!

사실 리액트에 입문을 한지 얼마 되지 않았기에.. 뚱땅 뚱땅 코드를 짜긴 했지만 스스로 발전할 부분이 참 많다는 걸 느꼈던 과제였습니다. 그래도 지난주보다는 조금은 성장한 것 같기도 하네요😭 매주.. 공부를 하게 해주는 세오스 짱..

혹시 코드 보시다가 이 부분은 고쳤으면 좋겠다 라고 생각이 드시는 부분이 있다면 가감 없이 말씀해주세요! 너무 환영입니다🔥

아쉬운 점

기능적인 부분은 어느 정도 다 구현을 한 듯한데, 불필요한 코드들도 있는 것 같아 이 부분은 추후 또 살펴보려 합니다!
여러 컴포넌트들을 만들어 보았는데, 제가 컴포넌트를 효율적으로 잘 짜지 못했다는 느낌이 들었습니다.. 다른 분들은 어떤 식으로 코드를 짜셨을지 너무 궁금합니다!:)
git에 커밋을 기능별로 날리는 것을 연습하자..

추가한 점

저번에 코드 리뷰 해주신 부분들도 고쳐보려 했습니다. 특히 저번 과제에서는 할 일들을 추가할 때 리스트를 넘어가 버리는 문제가 있었는데, 이를 해결 했습니다:)

Key Questions

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

Virtual-DOM, 즉, 가상 돔이란 DOM을 가볍게 만든 Javascript 표현이라고 할 수 있으며, 실제 DOM에 접근하여 조작을 하는 대신 추상화한 자바스크립트 객체를 구성하여 사용한다.
실제 스크린에 렌더링하는 것이 아니기 때문에 DOM을 직접 업데이트하는 것보다 속도가 상대적으로 빠르다.
가상 DOM은 DOM의 상태를 메모리 위에 계속 올려두지만, DOM에 변경이 있을 경우 변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용만 반영한다. 즉, 바뀐 부분만 실제 DOM에 적용이 되는 것이다. 따라서 가상 돔을 활용하는 방식이 DOM을 활용하는 방식보다 속도 면에서 이점이 있다.

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

공통적으로 활용되는 내용은 컴포넌트로 만들어 _재사용_을 할 수 있었고, 그로 인해 _코드가 깔끔_해졌다는 점을 느꼈다.
이번 과제를 수행하면서 리액트의 여러 라이브러리도 활용을 해보았는데, 다양한 라이브러리가 제공이 되고 이를 쉽게 사용할 수 있다는 점도 좋았다.

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

리액트에서 상태 => 컴포넌트의 변경 가능한 데이터 저장소!
리액트 개발에서의 핵심은 상태값을 효율적으로 관리하는 것이며, 상태값에 따라 화면이 불필요하게 업데이트되지 않도록 관리하는 것이다.
각 컴포넌트 안에서 사용되는 값은 해당 컴포넌트 안에서 생성하고 갱신하며, 여러 컴포넌트에서 사용하는 값은 별도 공간에서 생성하고 갱신한다.
상태 관리로는 Redux나 context API가 활용이 된다.

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

지난 과제에서는 html, css, js 파일이 모두 따로 있었기만, styled-component를 활용하면서 하나의 파일에서 스타일까지 관리할 수 있다는 점이 편리했다. 특히, 컴포넌트 별로 스타일을 지정하는 방식이었기 때문에 수정에도 용이할 것 같다.
GlobalStyle도 적용을 해보았는데, 잘 활용하면 너무 편리한 기능일 것이라는 생각이 들었다👍

앞으로도 화이팅입니다🔥

moong23

안녕하세요 코드리뷰 파트너 김문기입니다 😃
코드가 너무 깔끔하고, 특히 함수 정의 부분이 이유가 명확한 callback함수와 적절한 useRef의 사용하신걸보고 많이 배웠습니다. 코드 리뷰 하면서도 새로운 지식을 많이 얻은 것 같아요 👍

과제하느라 고생 많으셨구 내일 스터디때 뵙겠습니다 🙇

moong23 · 2023-03-25T06:22:06Z

src/component/TodoItem.js

+  display: flex;
+  flex-direction: row;
+  padding: 5px;
+  height: 30vh;


요 30vh부분이 너무 커서 아이템이 카드 전체 영역을 차지하도록 렌더링 되는 것 같아요!

Suggested change

height: 30vh;

height: 3vh;

정도로 해주는게 좋아보입니다!

헛 그렇군요! 이 부분 수정하면 좋을 것 같아요 알려주셔서 감사합니다!😄

moong23 · 2023-03-25T06:24:33Z

src/component/TodoItem.js

+      <Button onClick={() => onCheck(id)}>
+        {checked ? <BsPatchCheckFill /> : <BsPatchCheck/>}
+      </Button>
+      <div className="text">{text}</div>
+      <Button onClick={() => onDelete(id)}>
+        <BsEraserFill/>
+      </Button>


이부분은 개인 취향차이가 조금 있을 것 같은데, 코드만 봐서는 어떤 버튼인지 잘 알기 힘든점이 있을 수도 있어서
<Button>태그에 어떤 버튼인지 유추할 수 있는 props를 넘겨주거나, 주석을 통해 어떤 버튼인지 적어주시면 협업을 할 때 서로에게 도움이 될 수 있을 것 같아요!

Button 태그를 만들어서 재사용성을 높인 부분이 좋은것 같습니다!!

moong23 · 2023-03-25T06:25:13Z

src/component/TodoItem.js

+  return (
+    <Item>
+      <Button onClick={() => onCheck(id)}>
+        {checked ? <BsPatchCheckFill /> : <BsPatchCheck/>}


react-icons 저도 자주 쓰곤 하는데 간단하게 사용할 수 있는 좋은 라이브러리인것같아요!

이번에 처음 써보았는데 정말 쉽게 쓸 수 있더라구요!:) 간단해서 좋았던 것 같습니다 ㅎㅎ

참고글

moong23 · 2023-03-25T06:30:18Z

src/component/InsertBox.js

@@ -0,0 +1,50 @@
+import React, { useCallback, useState } from "react";


React 17 부터는 import React from 'react';를 더이상 적지 않아도 된다고 하더라구요! 참고링크 그 전에 습관이 들어서 저도 무의식적으로 적었었는데, 오히려 적지 않는 것이 더 도움이 된다고 해서 저도 요즘에는 빼고 적으려고 노력하구있어요!

Suggested change

import React, { useCallback, useState } from "react";

import { useCallback, useState } from "react";

헉 저도 이건 몰랐네요!!! 좋은 정보 감사합니당👏🏻👏🏻

아하 그렇군요!! 다음부터는 그렇게 해보아야겠어요! 꿀팁 정말 감사합니다 문기님👍👍

moong23 · 2023-03-25T06:30:59Z

src/component/InsertBox.js

+const Form = styled.form`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`;


form형식으로 받아서 submit control을 잘 하신것 같습니다!

moong23 · 2023-03-25T06:32:27Z

src/component/InsertBox.js

+    const onChange = useCallback((e) => {
+        setValue(e.target.value);
+    }, []);


제가 아직 useCallback에 익숙하지 않아서 사용하지 않았는데, 엄청 자연스럽게 잘 사용하시는 것 같아 부럽습니다 ㅠㅜ 멋져요 👍

moong23 · 2023-03-25T06:33:46Z

src/component/ListBox.js

+  ${({ type }) =>
+    type == "done" &&
+    css`
+      text-decoration: line-through;
+    `}


이부분은 아래와 같이 바꾸면 좀 더 깔끔할 것 같아요

Suggested change

${({ type }) =>

type == "done" &&

css`

text-decoration: line-through;

`}

text-decoration: ${(props) => props.type === 'done' ?? 'line-through' : 'none';

오오.. 이 부분은 다른 레퍼런스를 참고해서 작성했던 코드였는데, 더 깔끔하게 써볼 수는 없을까 많이 고민했던 부분이었습니다! 문기님 말씀대로 수정을 한다면 너무 깔끔해지겠네요 이렇게 수정해봐야겠어요! 감사합니다:D

문기님 코드에서도 봤지만 props 너무 깔끔하게 잘 쓰시네요 최고입니다😄

moong23 · 2023-03-25T06:41:10Z

src/App.js

+  const nextId = useRef(3);
+  const onInsert = useCallback(
+    (text) => {
+      const todo = {
+        id: nextId.current,
+        text,
+        checked: false,
+      };
+      setToDos(toDos.concat(todo)); //toDos에 todo 추가!
+      nextId.current++; //nextId 1씩 더하기
+     },
+    [toDos]
+  );


useRef를 활용하여 Insert함수를 작성하신 부분이 인상적이네요. 한번도 작성해본적 없는 형식의 코드인데 이 방법 되게 좋은것같아요!

concat함수의 연산속도가 push나 ...(spread) 연산자에 비해 많은 속도 차이가 난다고 알고 있어요. 이 부분은 아래와 같이 바꾸면 좀 더 좋을 것 같아요! 참고자료

Suggested change

const nextId = useRef(3);

const onInsert = useCallback(

(text) => {

const todo = {

id: nextId.current,

text,

checked: false,

};

setToDos(toDos.concat(todo)); //toDos에 todo 추가!

nextId.current++; //nextId 1씩 더하기

},

[toDos]

);

const nextId = useRef(3);

const onInsert = useCallback(

(text) => {

const todo = {

id: nextId.current,

text,

checked: false,

};

setToDos([...toDos, todo])

nextId.current++; //nextId 1씩 더하기

},

[toDos]

);

오오 참고자료까지 너무 감사합니다!👍 속도 면에서 차이가 나는 줄은 몰랐네요!

moong23 · 2023-03-25T06:42:49Z

src/App.js

+      setToDos(
+        toDos && toDos.map((todo) =>
+          todo.id === id ? { ...todo, checked: !todo.checked } : todo


조건부 삼항 연산자를 사용해서 onFinish함수를 매우 깔끔하게 작성하신것 같아 인상깊었습니다...!

YelynnOh added 3 commits March 24, 2023 06:29

style: GlobalStyle 생성

40b5285

feat: add InsertBox component

8c62c97

feat: added ListBox, TodoItem component

8d30179

moong23 reviewed Mar 25, 2023

View reviewed changes

This was referenced Mar 26, 2023

[2주차] 김서연 미션 제출합니다! #6

Open

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

Open

[2주차] 최민주 미션 제출합니다. #9

Open

[2주차] 신유진 미션 제출합니다. #10

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[2주차] 오예린 미션 제출합니다. #7

[2주차] 오예린 미션 제출합니다. #7

YelynnOh commented Mar 24, 2023 •

edited

Loading

moong23 left a comment

moong23 Mar 25, 2023

YelynnOh Mar 26, 2023

moong23 Mar 25, 2023

moong23 Mar 25, 2023

YelynnOh Mar 26, 2023 •

edited

Loading

moong23 Mar 25, 2023

oyatplum Mar 26, 2023

YelynnOh Mar 26, 2023

moong23 Mar 25, 2023

moong23 Mar 25, 2023

moong23 Mar 25, 2023

YelynnOh Mar 26, 2023

moong23 Mar 25, 2023

YelynnOh Mar 26, 2023

moong23 Mar 25, 2023

		@@ -0,0 +1,50 @@
		import React, { useCallback, useState } from "react";

	import React, { useCallback, useState } from "react";
	import { useCallback, useState } from "react";

[2주차] 오예린 미션 제출합니다. #7

Are you sure you want to change the base?

[2주차] 오예린 미션 제출합니다. #7

Conversation

YelynnOh commented Mar 24, 2023 • edited Loading

Key Questions

moong23 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

YelynnOh Mar 26, 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

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

YelynnOh commented Mar 24, 2023 •

edited

Loading

YelynnOh Mar 26, 2023 •

edited

Loading