우주먼지 개발 log
[TIL] 23/11/06 React 입문: 개인과제 TodoList 본문
TIL / 한 일
잔잔바리 이슈가 너무 많았고 아직 명확히 이해하지 못한 부분이 많다는 걸 깨달았다.
1. state 부분의 이해 (그려지는 data와 원본 data의 혼란, 순수함수? 근데 원본은 어디가? 죽나 - 아직 정리 안됨)
2. 불변성!! (언젠가 정리..)
3. 컴포넌트 임포트 시 {} 없어야한다.
ㅋㅋㅋ 습관적인 괄호 지양..
import { useState } from "react";
import './App.css'
import TodoBox from "./components/TodoBox.jsx" //컴포넌트
4. 중복 키 방지
- 키값을 length로 단순히 넣었다가는 하나 삭제 후 하나 생성 시 key값이 곂친다구.
- 나는 todoList의 마지막 원소의 id +1 로 넣어줬다. (앞에 값들을 삭제해도 곂칠 일 없음)
- 동료 분은 id를 Date.now(), 현재 날짜시간을 밀리초로 표현한 걸 넣어주셨다. 개발자스러운 좋은 코드라고 생각한다.
(Date.now() 메소드 : UTC 기준으로 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리초)
- 정답 해설에서는 uuid() 를 사용했다. npm 모듈 설치와 import가 필요하긴 하다.
(설치 npm install react-uuid 혹은 yarn add react-uuid /모듈 임포트 import uuid from 'react-uuid' /사용 id: uuid() )
const newTodo = {
id: todoList[todoList.length - 1].id + 1,
title: title,
body: contents,
isDone: false
};
과제를 다 하고 과제와 함께 제출 하는 질문답변을 작성하다가,
불변성 강의를 들었는데 과제를 다 하기 전에 들을 걸 그랬다.
저 혼란을 다 겪고 강의를 들으니 해답이 많이 있었다.
그리고 순수함수로 구현하지 못한 부분 수정하였다.
원본 data를 수정하고싶어서 수정한 것이 아니라 문법을 어찌 써야할지 몰랐는데 ㅠ.ㅠ
객체에 key: value 를 다시 써주면 뒤에껄로 오버라이딩 되는 좋은 방법을 -_-
강의에서 알려줬더라~~
5. 순수 함수로 구현하기 위한 객체의 요소 수정
[before]
원본배열의 isDone을 직접 수정
const handleDone = (id) => {
const newTodoList = todoList.map((item) => {
if (item.id === id) {
if (item.isDone) {
item.isDone = false; // 원본 수정 : 좋지않은 코드!
} else {
item.isDone = true;
}
}
return item;
});
setTodoList(newTodoList);
}
[after]
스프레드 오퍼레이터를 이용하여 객체를 펼쳐주고, isDone: true 와 같이 키,밸류 값을 하나 다시 넣어준다.
다시 전체를 {} 로 감싸서 맵함수의 리턴을 주면 newTodoList 로 객체의 배열이 저장됨.
const handleDone = (id) => {
const newTodoList = todoList.map((item) => {
if (item.id === id) {
return { ...item, isDone: (item.isDone) ? false : true }; // 객체 복사 후 isDone 만 재정의
}
return item;
});
setTodoList(newTodoList);
}
뒤늦게나마 좋은 강의를 들어서 다행이당~!!! 류제천 튜터님 강의 대박 이해 잘됨요.
과제와 함께 제출한 질의응답..
(4번문제를 쓰다 제대로 구현 안했구나 깨닫고 수정함ㅋㅋㅋ 좋은 질문이었다. )
나머지 좀 성의없게 쓰긴했다. 반성.
1. **JSX 문법**이란 무엇일까요?
javascript의 확장 문법으로 javascript 코드를 모두 사용 할 수 있고 <html>과 유사한 react 엘리먼트를 통해 UI를 구성하는 문법...
2. 사용자가 입력하는 값, 또는 이미 입력된 값, 투두의 타이들과 같은 **애플리케이션의 상태를 관리하기 위해 리액트의 어떤 기능을 사용하셨나요**?
- useState 훅 사용
3. 애플리케이션의 **상태 값들을 컴포넌트 간 어떤 방식으로 공유하셨나요**?
- props를 사용하여 사용하는 객체를 통으로 전달하였다.
4. 기능 구현을 위해 **불변성 유지가** 필요한 부분이 있었다면 하나만 설명해 주세요.
todo 객체 안의 변수인 isDone을 변경할 때
기존 todoList 배열을 setTodoList로 다시 그리려고해도,
변수의 메모리값 변경없이 내용만 수정되었기 때문에
변경점이 없다고 생각해서 화면 업데이트가 되지 않았고
새 객체를 생성해서 복사하여 만들어 주었다.
5. 반복되는 컴포넌트를 파악하고 재사용할 수 있는 **컴포넌트로 분리해 보셨나요?** 그렇다면 **어떠한 이점이 있었나요?**
중복되는 코드가 없어서 코드가 간결해지고, 수정사항이 생겨도 여러번 작업해 줄 필요가 없었다.
할 일 / 부족한 점
읽어보면 좋을 것~ 과제하느라 찾아보고 퀵하게 확인만 하고 넘어갔던 것들 자세히 읽어보기.
https://react.dev/learn
React 에서 돔을 직접수정하지마라
https://sylagape1231.tistory.com/59
주니어 개발자들의 실수
https://brunch.co.kr/@jowlee/109
'TIL(Today I Learned) > 스파르타 내배캠' 카테고리의 다른 글
| [TIL] 23/11/08 React 숙련: useState 함수전달 (0) | 2023.11.08 |
|---|---|
| [TIL] 23/11/07 React 입문: 이벤트 핸들러( feat. 매개변수) (0) | 2023.11.08 |
| [TIL] 23/11/03 React 입문: jsx문법, inline style 적용 (0) | 2023.11.03 |
| [TIL] 23/11/02 React 입문: 갑분 면접에 대한 고찰.. (0) | 2023.11.02 |
| [TIL] 23/11/01 React 입문 : Create React App (0) | 2023.11.02 |
