React와 자료구조 (배열, 리스트, 트리, 해시 테이블) - React, 알고 쓰자 8일차

React & Data Structures (Arrays, Lists, Trees, Hash Tables) - React Explained Day 8

import React from 'react';
 
interface Todo {
  id: number;
  text: string;
  completed: boolean;
}
 
const initialTodos: Todo[] = [
  { id: 1, text: 'React 공부하기', completed: true },
  { id: 2, text: '자료구조 복습하기', completed: false },
  { id: 3, text: '블로그 글쓰기', completed: false },
];
 
function TodoList() {
  const [todos, setTodos] = React.useState<Todo[]>(initialTodos);
 
  return (
    <ul>
      {/* 배열의 map 함수를 사용하여 li 요소 배열 생성 */}
      {todos.map(todo => (
        // 각 항목에 고유한 key prop 전달이 필수!
        <li key={todo.id} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

// ❌ 잘못된 예시: 원본 배열 직접 수정
newTodos.push({ id: 4, text: '새 할일', completed: false });
setTodos(newTodos); // React가 변화 감지 못할 수 있음
 
// ✅ 올바른 예시: 스프레드 연산자로 새 배열 생성
setTodos([...todos, { id: 4, text: '새 할일', completed: false }]);
 
// ✅ 올바른 예시: filter로 항목 삭제
setTodos(todos.filter(todo => todo.id !== idToRemove));
 
// ✅ 올바른 예시: map으로 특정 항목 업데이트
setTodos(todos.map(todo =>
  todo.id === idToToggle ? { ...todo, completed: !todo.completed } : todo
));

• 각 함수형 컴포넌트에 해당하는 Fiber 노드는 자신이 사용하는 훅들의 정보를
  Hook 객체
  의 연결 리스트 형태로 가지고 있습니다 (memoizedState 포인터).
• 컴포넌트가 렌더링될 때 React는 이 연결 리스트를 순서대로 따라가면서 각 훅의 상태를 찾고 반환합니다.
• 이것이 바로 훅의 호출 순서가 매 렌더링마다 동일해야 하는 이유입니다. 순서가 바뀌면 잘못된 Hook 객체를 참조하게 됩니다.

Hook 객체 연결 리스트

• 각 Update 객체는 업데이트할 내용(payload), 우선순위, 다음 Update 객체를 가리키는 포인터(next) 등을 포함할 수 있습니다.
• React는 다음 렌더링 단계에서 이 연결 리스트를 순회하면서 업데이트들을 처리하고 최종 상태를 계산합니다.
• 연결 리스트 구조는 업데이트를 순서대로 처리하고, 중간에 새로운 업데이트를 효율적으로 추가(연결)하는 데 유리합니다.

Q: "React Hooks는 내부적으로 상태를 어떻게 관리하나요?" or "useState의 업데이트는 어떻게 처리되나요?"

A: Fiber 노드의 Hook 연결 리스트나 Update Queue 연결 리스트 구조를 언급하며 답변.

• 모듈 의존성
  웹팩(Webpack), Vite와 같은 모듈 번들러는 프로젝트 내의 파일(모듈)들이 서로 어떻게 의존하고 있는지(import/export 관계) 파악하기 위해 내부적으로
  의존성 그래프
  를 생성합니다.
  이 그래프를 분석하여 필요한 코드만 효율적으로 묶고 최적화합니다.
• Hook 의존성
  useEffect, useMemo, useCallback 훅의 의존성 배열은 해당 훅이 어떤 값(상태, props)에 의존하는지를 명시합니다.
  React는 이 의존성 정보를 바탕으로 값이 변경되었을 때만 훅의 콜백 함수를 다시 실행하거나 값을 다시 계산합니다.
  이를 개념적으로 의존성 관계로 볼 수 있습니다.

src/
├── App.js  - Header, Footer, Home 참조
├── components/
│   ├── Header.js - Nav 참조
│   ├── Footer.js - Button 참조
│   ├── Nav.js
│   └── Button.js
├── pages/
└   └── Home.js - Button 참조

        App.js
     /     |      \
Header  Footer  pages
  |        |      |
 Nav    Button - Home   

• 각 API 요청에 대한 고유한
  쿼리 키(Query Key)
  를 해시 키처럼 사용하여, 해당 요청의 데이터를 저장합니다.
• 동일한 쿼리 키로 다시 요청이 들어오면, 네트워크 요청 대신 캐시 저장소에서 데이터를 빠르게(평균 O(1)) 찾아 반환합니다.

• React.memo, useMemo, useCallback은 props나 의존성 배열의 값들을 키(key) 삼아 이전에 계산된 결과(컴포넌트, 값, 함수)를 저장해 둡니다.
• 다음 렌더링 시 입력(props, 의존성)이 동일하다면, 저장된 결과를 빠르게 찾아 반환하여 불필요한 계산이나 렌더링을 건너뜁니다.
• 이 '저장소' 역할을 하는 내부 구조가 해시 테이블 또는 Map과 유사하게 동작하여 빠른 검색을 가능하게 합니다.

• 배열
  은 리스트 렌더링의 기본이며, 불변성 유지가 중요합니다. key prop은 diff 효율성을 높입니다.
• 연결 리스트
  는 React 내부의 Hooks 상태 관리와 Update Queue 처리 방식의 기반이 됩니다.
• 트리
  는 컴포넌트 구조, DOM, Virtual DOM을 표현하는 핵심 개념이며, 재조정 알고리즘과 관련 깊습니다.
• 그래프
  는 모듈 의존성이나 코드 청크 관계 등 복잡한 연결성을 표현하는 데 사용됩니다.
• 해시 테이블/Map
  은 빠른 검색 속도를 바탕으로 캐싱과 메모이제이션 구현에 활용됩니다.

다음 시간에는 좋은 React

컴포넌트를 설계하는 원칙과 패턴

에 대해 알아보겠습니다.

단순히 동작하는 코드를 넘어, 재사용 가능하고 테스트하기 쉬우며 유지보수하기 좋은 컴포넌트를 만드는 방법에 대해 함께 고민해보는 시간을 갖겠습니다.

• (자료구조 학습 자료는 특정 사이트 추천보다 일반적인 키워드를 제공하는 것이 좋을 수 있습니다.)
• JavaScript 자료구조 및 알고리즘 관련 온라인 강의 또는 서적 (예: "자바스크립트로 배우는 자료구조와 알고리즘")
• React 공식 문서 (내부 동작 관련 섹션들)