#자료구조(Data structure)

데이터에 편리하게 접근하고 변경하기 위해 데이터를 저장하거나 조직하는 방법.

( + 알고리즘은 그 저장된 데이터를 처리하는 과정이다.)

#프론트엔드에서 자료구조

기본적으로 자바스크립트에서 많은 자료구조를 지원하지 않기도 하고, 보통 프론트엔드 데이터셋은 고급 자료구조를 사용하여 이득이 될 만큼 크지 않다. 그럼에도 불구하고,

• 코드를 엉망으로 만드는 대부분의 경우는 잘못된 자료구조를 선택한 경우이다.
• 자료구조를 선택하는 것은 코드 품질의 성패를 결정할 수 있다. 자료구조는 렌더링 로직의 구조나 데이터 업데이트 방법을 결정한다. 따라서 어떤 자료구조를 선택할지 몇 가지 옵션을 아는 것이 많은 도움이 될 수 있다.

1. Map

   • 맵, 해시맵, 해시 테이블 혹은 딕셔너리로 불림
   • 키-값 형태로, 자바스크립트에서 자주 볼 수 있는 자료구조

   {
     key1: "value 1",
     key2: "value 2",
     key3: "value 3",
   }
   

   • 장점

     Fast Search : 배열은 전체를 순회하며 값을 찾아야 하는 반면, 해쉬 테이블은 key를 통해 바로 찾고자 하는 값에 접근이 가능하다.

     Fast Insertion and Deletion : 해쉬 테이블은 데이터가 정렬되어 있지 않기 때문에, 바로 값을 추가하고 지울 수 있다.

     Fast lookup : 배열과 객체 모두 index 또는 key를 알고 있으면 되므로 lookup도 빠르다.

   • 단점 : 무작위 주소 할당으로 인한 문제.

2. Set

   • 키를 갖는 집합
   • map 객체와 유사, set은 배열과 유사
   • 모든 값이 고유하다(중복 원소 자동 제거)
   • 배열 인덱스로 구현하는 것 보다 set을 활용하는 것도 자주 고려해보자
   • 용례) checkbox와 같이 선택한 항목 추적

3. Stack

   • 후입선출: LIFO - push, pop
     • stack의 상위에 요소를 추가할 수 있다.
     • stack의 상위에서부터 요소를 제거할 수 있다.
   • 용례) 이전동작취소

     • 컨셉) 사용자가 요소를 삭제할 때마다 stack에 추가하기. 만약 사용자가 삭제를 취소하고 싶다면 stack에서 가장 최근에 추가된 요소를 정보를 가져와 추가한다.

       리액트에서는 데이터가 불변해야 하므로 Array.push()와 Array.pop()은 사용할 수 없다. 대신 새로운 배열을 반환하는 Array.concat()와 Array.slice()를 사용한다.

     • 예시코드 (상태 업데이트)

4. Queue

   • 선입선출: FIFO - push, shitft
   • 용례) 알림
     • 실무에서 계속해서 위에 쌓이는 알림을 표시할 때 queue를 사용할 수 있다. 화면 하단에 알림창이 나타났다가 일정 시간이 흐른 후에 사라지는 그런 알림.
     • 알림트리거버튼을 클릭하면 notifications 배열(우리가 만든 queue)에 메세지가 추가된다. 또한 queue에서 알림을 삭제하는 timeout이 설정되어 있다
     • 예시코드

5. Tree

   • 중첩된 자료구조. 자식은 자식을 또 가질 수 있다.
   • 종종 재귀함수와 함께 이야기 된다.
   • tree를 정의하는 방법은 다양함.
     • tree 구조 예시1
     • tree 구조 예시2 - flat array
   • 용례) 중첩된 메뉴, 댓글
     • 예시1의 tree 구조
       • 코드예시
       • 위의 중첩된 트리 구조는 사람이 읽기에 비교적 쉽고 렌더링도 간단하다. 하지만 데이터를 업데이트해야 할 경우 문제가 발생한다. 특히 데이터를 불변으로 변경해야 할 때(리액트 상태와 마찬가지로) 특히 그렇다.
     • 예시2의 tree 구조 - flat 배열
       • 예시1의 좋은 대안은 flat 배열을 사용하는 것. ID 참조를 해결해야 하기 때문에 프런트엔드 로직으로선 조금 더 무거우나 백엔드와 상호 작용하기가 매우 쉽고 처리하기도 쉽다.
       • 코드예시
   • 재귀 함수는 매우 깊게 중첩된 트리의 경우 자바스크립트 엔진의 호출 스택 크기를 초과할 수 있다.

읽은자료