Frontend Dev + Structures de données et algorithmes : comment DSA peut alimenter votre application React ⚡

Les entretiens axés sur le frontend ne se soucient souvent pas du tout du DSA.

Et pour ceux d'entre nous qui se souviennent d'avoir étudié le DSA à l'école/au collège, tous les exemples semblaient purement algorithmiques (pour cause), mais il n'y avait pratiquement aucun exemple ou guide sur la façon dont les produits que nous utilisons quotidiennement exploitent ce concept.

« Aurai-je un jour besoin de ça ? »
Vous avez souvent posé cette question, n'est-ce pas ? ?

Voici quelques structures de données que vous pouvez exploiter dans votre application React dès aujourd'hui ! ?

Table des matières

1. Présentation
2. Tableaux : votre référence en matière de gestion d'état
3. Objets et cartes de hachage : magasin de données normalisé pour plus d'efficacité
4. Listes doublement liées : navigation avec contexte
5. Stacks : fonctionnalité d'annulation/rétablissement avec un comportement immuable
6. Files d'attente : gestion des appels d'API séquentiels
7. Arbres : rendu des composants récursifs
8. Graphiques : création de relations de données complexes et de navigation
9. Conclusion

Lecture connexe :

Passer du SDE1 au SDE2, et au-delà ! ? Ce qu'il faut réellement.

Jayant Bhawal pour Middleware ・ 10 juin

#carrière #promotion #webdev #débutants

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]} />
      ))}
    </div>
  );
}

function Post({ post }) {
  return (
    <div>
      <h2>{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={currentNode.prev.value.src} alt={currentNode.prev.value.alt} className="prev-image" />
      )}
      <img src={currentNode.value.src} alt={currentNode.value.alt} className="main-image" />
      {currentNode.next && (
        <img src={currentNode.next.value.src} 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: '20px' }} key={child.id}>
          <Comment comment={child} />
        </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!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!