프런트엔드 개발 + 데이터 구조 및 알고리즘: DSA가 React 앱을 강화하는 방법 ⚡

프런트엔드에 초점을 맞춘 인터뷰에서는 DSA에 전혀 관심이 없는 경우가 많습니다.

그리고 학교/대학에서 DSA를 공부한 것을 기억하는 사람들에게는 모든 예가 순전히 알고리즘적인 것처럼 느껴졌지만(타당한 이유가 있음) 우리가 매일 사용하는 제품이 이 개념을 어떻게 활용하는지에 대한 예나 지침은 거의 없었습니다.

“이게 필요할까요?”
이것저것 많이 물어보셨죠? ?

오늘 React 앱에서 활용할 수 있는 몇 가지 데이터 구조는 다음과 같습니다! ?

목차

1. 소개
2. 어레이: 상태 관리의 핵심
3. 객체 및 해시 맵: 효율성을 위한 정규화된 데이터 저장소
4. 이중 연결 목록: 컨텍스트를 통한 탐색
5. 스택: 불변 동작을 갖춘 실행 취소/다시 실행 기능
6. 대기열: 순차 API 호출 관리
7. 나무: 재귀 구성요소 렌더링
8. 그래프: 복잡한 데이터 관계 구축 및 탐색
9. 결론

관련 자료:

SDE1에서 SDE2, 그리고 그 이상으로 나아가세요! ? 실제로 필요한 것

미들웨어용 Jayant Bhawal ・ 6월 10일

#직업 #홍보 #웹개발 #초보자

1. 배열?: 상태 관리의 핵심

배열은 React의 모든 곳에 있습니다. .map() 또는 .filter() 작동 방식을 이해하는 데 도움이 필요하다면 아마도 이 게시물을 너무 빨리 보게 될 것입니다! 하지만 걱정하지 마십시오. 이러한 배열 방법에 익숙해지고 나면 목록 렌더링, 구성 요소 상태 관리 및 데이터 변환에 이 방법이 얼마나 중요한지 알게 될 것입니다.

2. 객체 및 해시 맵 ?️: 효율성을 위한 정규화된 데이터 저장소

React 앱에서 사용자나 게시물과 같은 대규모 개체 모음을 처리할 때 데이터를 개체(해시 맵)로 정규화하면 훨씬 더 효율적으로 읽고 업데이트할 수 있습니다. 깊게 중첩된 구조로 작업하는 대신 ID를 기준으로 항목을 매핑합니다.

예: ID를 사용하여 정규화된 상점에서 읽기

const postsById = {
  1: { id: 1, title: 'First Post', content: 'Content of first post' },
  2: { id: 2, title: 'Second Post', content: 'Content of second post' }
};

const postIds = [1, 2];

function PostList() {
  return (
    <div>
      {postIds.map(id => (
        <post key="{id}" post="{postsById[id]}"></post>
      ))}
    </div>
  );
}

function Post({ post }) {
  return (
    <div>
      <h2 id="post-title">{post.title}</h2>
      <p>{post.content}</p>
    </div>
  );
}

이 패턴을 사용하면 특히 전체 컬렉션을 다시 렌더링하지 않고 업데이트나 읽기를 빠르게 수행해야 하는 대규모 데이터 세트의 경우 효율적인 데이터 액세스가 가능합니다.

3. 이중 연결 목록?: 컨텍스트를 사용한 탐색

이중 연결 목록은 이전 요소와 다음 요소 모두에서 컨텍스트가 필요할 때 유용합니다. 각 이미지가 참조용으로 인접한 이미지를 표시하는 사진 갤러리를 탐색하는 것을 생각해 보세요. 인덱스를 사용하는 대신 현재 노드를 컴포넌트 상태에 직접 저장하겠습니다.

예: 컨텍스트가 있는 요소 간 탐색을 위한 이중 연결 목록

class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
    this.prev = null;
  }
}

class DoublyLinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
  }

  add(value) {
    const newNode = new Node(value);
    if (!this.head) {
      this.head = newNode;
      this.tail = newNode;
    } else {
      this.tail.next = newNode;
      newNode.prev = this.tail;
      this.tail = newNode;
    }
  }
}

const imageList = new DoublyLinkedList();
imageList.add({ id: 1, src: 'image1.jpg', alt: 'First Image' });
imageList.add({ id: 2, src: 'image2.jpg', alt: 'Second Image' });
imageList.add({ id: 3, src: 'image3.jpg', alt: 'Third Image' });

function Gallery() {
  const [currentNode, setCurrentNode] = useState(imageList.head);

  return (
    <div>
      {currentNode.prev && (
        <img src="%7BcurrentNode.prev.value.src%7D" alt="{currentNode.prev.value.alt}" classname="prev-image">
      )}
      <img src="%7BcurrentNode.value.src%7D" alt="{currentNode.value.alt}" classname="main-image">
      {currentNode.next && (
        <img src="%7BcurrentNode.next.value.src%7D" alt="{currentNode.next.value.alt}" classname="next-image">
      )}
      <div>
        <button onclick="{()"> setCurrentNode(currentNode.prev)} disabled={!currentNode.prev}>
          Previous
        </button>
        <button onclick="{()"> setCurrentNode(currentNode.next)} disabled={!currentNode.next}>
          Next
        </button>
      </div>
    </div>
  );
}

이 React 구성 요소에서는:

• 현재 노드가 상태에 저장되고, 이전 노드가 있는지 다음 노드가 있는지에 따라 UI가 업데이트됩니다.
• 버튼을 사용하면 목록을 앞뒤로 탐색할 수 있으며 더 이상 이동할 노드가 없으면 비활성화할 수 있습니다.
• 이 구조는 캐러셀, 미디어 갤러리, 재생 목록과 같은 UI 구성 요소에 일반적으로 사용되는 주변 요소의 컨텍스트를 사용하여 실시간 탐색을 시뮬레이션합니다.

4. 스택 ?: 불변 동작을 통한 실행 취소/다시 실행 기능

스택을 사용하면 후입선출(LIFO) 논리를 사용하여 실행 취소/재실행 작업을 효율적으로 관리할 수 있습니다. 변경할 수 없는 작업(concat, Slice)을 사용하면 상태가 변경되지 않은 상태로 유지되도록 할 수 있습니다.

예: 불변 푸시 및 팝을 사용한 실행 취소/다시 실행

const [undoStack, setUndoStack] = useState([]);
const [redoStack, setRedoStack] = useState([]);
const [formState, setFormState] = useState({ name: '', email: '' });

const updateForm = (newState) => {
  setUndoStack(prev => prev.concat([formState]));  // Immutable push
  setRedoStack([]);  // Clear redo stack
  setFormState(newState);
};

const undo = () => {
  if (undoStack.length > 0) {
    const lastState = undoStack.at(-1);
    setUndoStack(prev => prev.slice(0, -1));  // Immutable pop
    setRedoStack(prev => prev.concat([formState]));  // Move current state to redo
    setFormState(lastState);
  }
};

const redo = () => {
  if (redoStack.length > 0) {
    const lastRedo = redoStack.at(-1);
    setRedoStack(prev => prev.slice(0, -1));  // Immutable pop
    setUndoStack(prev => prev.concat([formState]));  // Push current state to undo
    setFormState(lastRedo);
  }
};

5. 대기열?: 순차적 API 호출 관리

큐는 선입선출(FIFO) 방식으로 작동하며 API 호출이나 알림과 같은 작업이 올바른 순서로 처리되도록 하는 데 유용합니다.

예: API 호출 대기열

const [apiQueue, setApiQueue] = useState([]);

const enqueueApiCall = (apiCall) => {
  setApiQueue(prevQueue => prevQueue.concat([apiCall]));  // Immutable push
};

const processQueue = () => {
  if (apiQueue.length > 0) {
    const [nextCall, ...restQueue] = apiQueue;
    nextCall().finally(() => setApiQueue(restQueue));  // Immutable pop
  }
};

6. 나무?: 재귀 구성 요소 렌더링

트리는 댓글 스레드, 폴더 구조 또는 메뉴

와 같은 중첩된 구성 요소를 처리할 때 React에서 일반적으로 사용됩니다.

예: 재귀적으로 주석 트리 렌더링

const commentTree = {
  id: 1,
  text: "First comment",
  children: [
    { id: 2, text: "Reply to first comment", children: [] },
    { id: 3, text: "Another reply", children: [{ id: 4, text: "Nested reply" }] }
  ]
};

function Comment({ comment }) {
  return (
    <div>
      <p>{comment.text}</p>
      {comment.children?.map(child => (
        <div style="{{" paddingleft: key="{child.id}">
          <comment comment="{child}"></comment>
        </div>
      ))}
    </div>
  );
}

귀하와 관련이 있을 수 있는 또 다른 인기 게시물:

적게 작성하고 수정하지 않음: 신뢰성이 높은 코드의 예술

미들웨어를 위한 Dhruv Agarwal ・ 6월 17일

#개발자 #생산력 #프로그램 작성 #직업

7. Graphs ?: Building Complex Data Relationships and Navigation

Example 1: Routing between multiple views
You can represent routes between pages as a graph, ensuring flexible navigation paths in an SPA.

const routesGraph = {
  home: ['about', 'contact'],
  about: ['home', 'team'],
  contact: ['home'],
};

function navigate(currentRoute, targetRoute) {
  if (routesGraph[currentRoute].includes(targetRoute)) {
    console.log(`Navigating from ${currentRoute} to ${targetRoute}`);
  } else {
    console.log(`Invalid route from ${currentRoute} to ${targetRoute}`);
  }
}

Example 2: User relationship modeling
Graphs are perfect for modeling social connections or any kind of relationship where multiple entities are interconnected.

const usersGraph = {
  user1: ['user2', 'user3'],
  user2: ['user1', 'user4'],
  user3: ['user1'],
  user4: ['user2']
};

function findConnections(userId) {
  return usersGraph[userId] || [];
}

console.log(findConnections('user1'));  // Outputs: ['user2', 'user3']

Note: We use graphs to show reviewer dependencies in Middleware.

TL;DR — Those School Lessons Pay Off

Those DSA classes might have felt abstract back in the day, but data structures are powering the world around you in React.

Objects, stacks, queues, linked lists, trees, and graphs are more than just theory — they’re the backbone of the clean, efficient, and scalable apps you build every day.

So the next time you manage state in a queue or handle complex UI logic, remember: you’ve been training for this since school. ?

Let me know which data structures you’ve been using the most!

위 내용은 프런트엔드 개발 + 데이터 구조 및 알고리즘: DSA가 React 앱을 강화하는 방법 ⚡의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!