프런트엔드에 초점을 맞춘 인터뷰에서는 DSA에 전혀 관심이 없는 경우가 많습니다.
그리고 학교/대학에서 DSA를 공부한 것을 기억하는 사람들에게는 모든 예가 순전히 알고리즘적인 것처럼 느껴졌지만(타당한 이유가 있음) 우리가 매일 사용하는 제품이 이 개념을 어떻게 활용하는지에 대한 예나 지침은 거의 없었습니다.
“이게 필요할까요?”
이것저것 많이 물어보셨죠? ?
오늘 React 앱에서 활용할 수 있는 몇 가지 데이터 구조는 다음과 같습니다! ?
관련 자료:
배열은 React의 모든 곳에 있습니다. .map() 또는 .filter() 작동 방식을 이해하는 데 도움이 필요하다면 아마도 이 게시물을 너무 빨리 보게 될 것입니다! 하지만 걱정하지 마십시오. 이러한 배열 방법에 익숙해지고 나면 목록 렌더링, 구성 요소 상태 관리 및 데이터 변환에 이 방법이 얼마나 중요한지 알게 될 것입니다.
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>
);
}
이 패턴을 사용하면 특히 전체 컬렉션을 다시 렌더링하지 않고 업데이트나 읽기를 빠르게 수행해야 하는 대규모 데이터 세트의 경우 효율적인 데이터 액세스가 가능합니다.
이중 연결 목록은 이전 요소와 다음 요소 모두에서 컨텍스트가 필요할 때 유용합니다. 각 이미지가 참조용으로 인접한 이미지를 표시하는 사진 갤러리를 탐색하는 것을 생각해 보세요. 인덱스를 사용하는 대신 현재 노드를 컴포넌트 상태에 직접 저장하겠습니다.
예: 컨텍스트가 있는 요소 간 탐색을 위한 이중 연결 목록
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 구성 요소에서는:
스택을 사용하면 후입선출(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);
}
};
큐는 선입선출(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
}
};
트리는 댓글 스레드, 폴더 구조 또는 메뉴
와 같은 중첩된 구성 요소를 처리할 때 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>
);
}
귀하와 관련이 있을 수 있는 또 다른 인기 게시물:
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.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
