생성한 newTodo 객체를 setTodos 를 이용해 추가하는 ... - 인프런

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

8.4) Create - 투두 추가하기

생성한 newTodo 객체를 setTodos 를 이용해 추가하는 부분에서 질문 있습니다

작성

  const onCreate = (content) => {
    const newTodo = {
      id: idRef.current++,
      isDone: false,
      content: content,
      date: new Date().getTime(),
    };

    setTodos([newTodo, ...todos]);
  };

지금처럼 이렇게 newTodo 를 todos 배열의 맨 앞에 붙이면 원래 기존의 todos 요소 전체의 인덱스가 변화해야해서 동작시간이 오래 걸린다고 앞의 수업에서 들었던 것 같아서 왜 이렇게 하는지 의문이 들었습니다.

이렇게 해야 나중에 등록한 newTodo 객체가 맨 위로 올라오게 되어서 그런건가요?

javascript react node.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

말씀하신대로 이렇게 작업해야 나중에 등록된 새로운 Todo 아이템(newTodo)가 배열의 맨 앞에 배치되어, UI상 가장 위에 배치되기 때문입니다.

동작 시간의 경우 todos 배열의 길이가 길어질수록 그에 비례해 길어진다는 단점이 있지만, 이는 향후 백엔드 서버에서 전체 데이터를 관리하고 프론트엔드에서는 현재 화면에 나타나는 일부 데이터만 관리하는 방식으로 전환하여 해결할 수 있습니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. XEMI님.

질문해주신 부분에 대해 설명드리겠습니다. 리액트에서 setTodos를 이용하여 배열의 맨 앞에 새로운 요소를 추가하는 패턴은 리스트를 위에서부터 아래로 시간순으로 또는 최근순으로 나열하기 위함입니다. 즉, 사용자 경험 측면에서 가장 최근에 추가한 할일이 리스트의 최상단에 위치하게 하려는 목적입니다.

이 방식을 사용하면 새로운 할일이 항상 앞쪽에 추가되어 사용자가 방금 추가한 할일을 쉽게 볼 수 있습니다. 그러나 질문에서 언급하신 것처럼, 배열의 모든 요소가 재배치되어야 하기 때문에 배열이 매우 클 경우 성능 이슈가 발생할 수 있습니다. 하지만 대체로 일반적인 할일 목록은 그리 큰 규모가 아니기 때문에 대부분의 경우 성능에 크게 영향을 미치지 않으며 사용자 경험이 더 중요할 수 있습니다.

다른 접근 방식으로는 기존의 todos 배열 끝에 추가하여 이전 할일이 위에 머물도록 할 수 있지만, 이 경우 사용자 입장에서 방금 추가한 할일을 보기는 어렵습니다.

관련된 기존의 답변을 살펴보면, 동일한 주제에 대해 설명된 링크들이 있습니다:

newItem부분에서 질문있습니다.:
- 설명: 리스트의 어떤 위치에 아이템을 추가할지, 그리고 객체의 id를 설정하는 방법에 대한 전체적인 논의가 있습니다.
투두 추가할 때 onChangeContent 작성 이유:
- 설명: 리액트의 state 변경과 관련된 방법론 및 사용에 대한 설명이 포함되어 있어 도움이 될 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

생성한 newTodo 객체를 setTodos 를 이용해 추가하는 부분에서 질문 있습니다