생성한 newTodo 객체를 setTodos 를 이용해 추가하는 부분에서 질문 있습니다
70
投稿した質問数 3
const onCreate = (content) => {
const newTodo = {
id: idRef.current++,
isDone: false,
content: content,
date: new Date().getTime(),
};
setTodos([newTodo, ...todos]);
};지금처럼 이렇게 newTodo 를 todos 배열의 맨 앞에 붙이면 원래 기존의 todos 요소 전체의 인덱스가 변화해야해서 동작시간이 오래 걸린다고 앞의 수업에서 들었던 것 같아서 왜 이렇게 하는지 의문이 들었습니다.
이렇게 해야 나중에 등록한 newTodo 객체가 맨 위로 올라오게 되어서 그런건가요?
回答 3
1
안녕하세요 이정환입니다.
말씀하신대로 이렇게 작업해야 나중에 등록된 새로운 Todo 아이템(newTodo)가 배열의 맨 앞에 배치되어, UI상 가장 위에 배치되기 때문입니다.
동작 시간의 경우 todos 배열의 길이가 길어질수록 그에 비례해 길어진다는 단점이 있지만, 이는 향후 백엔드 서버에서 전체 데이터를 관리하고 프론트엔드에서는 현재 화면에 나타나는 일부 데이터만 관리하는 방식으로 전환하여 해결할 수 있습니다.
0
저도 같은 문제가 있어서 확인해보니 63강에서 useState([]) 로 진행하다가 배열 껍데기 삭제하고 mockData가 들어가야 하는데 배열이 그대로 남아 있어서 새로운 배열에 추가되는걸 발견했습니다.. 결국 오타네요 ㅎ;;;
0
안녕하세요, 인프런 AI 인턴입니다. XEMI님.
질문해주신 부분에 대해 설명드리겠습니다. 리액트에서 setTodos를 이용하여 배열의 맨 앞에 새로운 요소를 추가하는 패턴은 리스트를 위에서부터 아래로 시간순으로 또는 최근순으로 나열하기 위함입니다. 즉, 사용자 경험 측면에서 가장 최근에 추가한 할일이 리스트의 최상단에 위치하게 하려는 목적입니다.
이 방식을 사용하면 새로운 할일이 항상 앞쪽에 추가되어 사용자가 방금 추가한 할일을 쉽게 볼 수 있습니다. 그러나 질문에서 언급하신 것처럼, 배열의 모든 요소가 재배치되어야 하기 때문에 배열이 매우 클 경우 성능 이슈가 발생할 수 있습니다. 하지만 대체로 일반적인 할일 목록은 그리 큰 규모가 아니기 때문에 대부분의 경우 성능에 크게 영향을 미치지 않으며 사용자 경험이 더 중요할 수 있습니다.
다른 접근 방식으로는 기존의 todos 배열 끝에 추가하여 이전 할일이 위에 머물도록 할 수 있지만, 이 경우 사용자 입장에서 방금 추가한 할일을 보기는 어렵습니다.
관련된 기존의 답변을 살펴보면, 동일한 주제에 대해 설명된 링크들이 있습니다:
-
- 설명: 리스트의 어떤 위치에 아이템을 추가할지, 그리고 객체의 id를 설정하는 방법에 대한 전체적인 논의가 있습니다.
- 설명: 리스트의 어떤 위치에 아이템을 추가할지, 그리고 객체의 id를 설정하는 방법에 대한 전체적인 논의가 있습니다.
투두 추가할 때 onChangeContent 작성 이유:
- 설명: 리액트의
state변경과 관련된 방법론 및 사용에 대한 설명이 포함되어 있어 도움이 될 수 있습니다.
- 설명: 리액트의
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
useEffect와 lifecycle문의
0
27
2
프론트엔드 학습 수준 문의
0
39
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
48
2
데이터 로딩중 화면만 계속 나와요!!
0
55
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
79
2
이후의 커리큘럼 문의
0
102
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
50
2
최적화 관련 질문있습니다 (useMemo 등)
0
84
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
82
3
Date 객체에 관련하여 질문드립니다.
0
85
2
리액트 개정판 교재 질문
0
60
2
예제코드가 안나와요!
0
78
2
select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com
0
108
2
onMouseEnter 관련 문의 드립니다
0
92
3
배열의 렌더링 관련 질문 드립니다.
0
73
2
2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.
0
113
2
TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?
0
136
2
useCallback 적용한 onCreate, onUpdate, onDelete 함수..
0
69
1
vs code 자동완성관련 문의
0
113
2
91강 useEffect내에서 상태변화함수 호출시 발생하는 에러
1
179
2
87강 필터 함수 질문
0
69
2
useRef, useState count 비교
0
67
2
안된다고했던 이유가 무엇이었는지 모르겠습니다
0
90
2
85강에서 객체를 왜 클래스로 만들어서 new 하지 않는건지 궁금합니다.
0
75
2