useState() 데이터 추가 성능 질문

Question

안녕하세요! React에서 useState()를 사용하여 배열과 같은 데이터 구조에서 자료를 추가하는 경우, 다른 언어같은 경우 원소 하나만 추가하는 시간복잡도가 O(1)으로 수행하는 함수가 있는데(C++의 append 혹은 push) React에서는 항상 [newItem,...data] 이런 식으로 원소 하나 추가할 때마다, 배열의 값을 모두 새로 만드는데, 데이터가 많아질 경우 시간복잡도가 O(n)으로 비효율적일 것 같습니다. 그래서 React에는 push()같은 방식으로 데이터를 추가하는 방법이 있나요? 없다면 없는 이유가 무엇인가요??

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴이에요. React의 useState()를 사용하여 배열에 데이터를 추가할 때, 원소를 하나씩 추가할 경우 항상 새로운 배열을 생성하는 방식을 사용합니다. 이 방식은 성능 면에서 비효율적일 수 있습니다. React에서는 push()와 같은 방식으로 원소를 직접 추가하는 메서드는 제공하지 않습니다. 이는 React의 Virtual DOM 개념 때문입니다. Virtual DOM은 원래 DOM 트리와 동기화하기 위해 상태 변경을 추적하고, 변경된 부분만 업데이트합니다. 만약 push()와 같은 메서드가 제공된다면, 기존 배열을 직접 수정하는 방식으로 동작하기 때문에 원래의 배열을 변경해야 하는데, 이는 React의 추적 기능을 방해할 수 있고 예기치 않은 결과를 초래할 수 있습니다. React에서 배열에 데이터를 추가하는 가장 일반적인 방식은, spread 연산자를 사용하여 새로운 배열을 만들고, 그 안에 이전 데이터와 추가할 데이터를 모두 포함시키는 것입니다. 이렇게 하면 새로운 배열을 생성하지만, 변경된 부분의 업데이트는 효율적으로 이루어집니다. 시간복잡도 측면에서는 원소를 하나씩 추가할 때마다 배열을 매번 새롭게 생성하기 때문에 O(n)의 비효율성이 발생할 수 있습니다. 하지만 일반적인 경우에는 데이터의 크기가 크지 않아서 큰 문제가 되지 않습니다. 만약 데이터의 크기가 많이 커진다면 다른 데이터 구조를 고려하는 것도 한 가지 방법일 수 있습니다. 결론적으로, React에서는 push()와 같은 직접적인 데이터 추가 방식은 제공하지 않습니다. 이는 React의 효율적인 업데이트 및 추적 기능을 위한 결정으로 이해할 수 있습니다. 더 궁금하신 사항이 있으시면 언제든지 물어보세요. 좋은 하루 되세요!