length undefined 에러 해결하기

에러 문구

Uncaught TypeError: Cannot read properties of undefined (reading 'length')

수정 전 코드

// 수정 전
// Router.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { useState } from 'react';

import MainPage from './pages/MainPage';
import SettingPage from './pages/SettingPage';
import PickPage from './pages/PickPage';
import LoadingPage from './pages/LoadingPage';
import WinnerPage from './pages/WinnerPage';

export enum RoutePath {
  Root = '/',
  Setting = '/setting',
  Pick = '/pick',
  Loading = '/loading',
  Winner = '/winner',
}

const RouteProvider = () => {
  const [participants, setParticipants] = useState<string[]>([]);

  return (
    <BrowserRouter>
      <Routes>
        <Route path={RoutePath.Root} element={<MainPage participants={participants} />} />
        <Route path={RoutePath.Setting} element={<SettingPage setParticipants={setParticipants} />} />
        <Route path={RoutePath.Pick} element={<PickPage participants={participants} />} />
        <Route path={RoutePath.Loading} element={<LoadingPage />} />
        <Route path={RoutePath.Winner} element={<WinnerPage participants={participants} setParticipants={setParticipants} />} />
      </Routes>
    </BrowserRouter>
  );
};

export default RouteProvider;
TypeScript
복사

수정 후 코드

// 수정 후
// Router.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { useState } from 'react';

import MainPage from './pages/MainPage';
import SettingPage from './pages/SettingPage';
import PickPage from './pages/PickPage';
import LoadingPage from './pages/LoadingPage';
import WinnerPage from './pages/WinnerPage';

export enum RoutePath {
  Root = '/',
  Setting = '/setting',
  Pick = '/pick',
  Loading = '/loading',
  Winner = '/winner',
}

const RouteProvider = () => {
  const [participants, setParticipants] = useState<string[]>([]);

  return (
    <BrowserRouter>
      <Routes>
        <Route path={RoutePath.Root} element={<MainPage participants={participants} />} />
        <Route path={RoutePath.Setting} element={<SettingPage setParticipants={setParticipants} participants={participants}/>} />
        <Route path={RoutePath.Pick} element={<PickPage participants={participants} />} />
        <Route path={RoutePath.Loading} element={<LoadingPage />} />
        <Route path={RoutePath.Winner} element={<WinnerPage participants={participants} setParticipants={setParticipants} />} />
      </Routes>
    </BrowserRouter>
  );
};

export default RouteProvider;
TypeScript
복사

문제 해결 후 배운 점

"Cannot read properties of undefined (reading 'length')"라는 오류 메시지가 나타난다면, 이는 participants 배열이 undefined로 전달되었을 가능성이 있다. Router.tsx에서 SettingPage 컴포넌트에 participants 배열을 props로 전달하는 코드를 다시 확인해야 한다. SettingPage 컴포넌트에 participants 배열이 올바르게 전달되고 있는지 확인해야 한다.

위 예시에서 SettingPage 컴포넌트에 participants 배열을 props로 전달하고 있다. 만약 Router.tsx에서 이렇게 participants를 전달하고 있지 않다면, SettingPage 컴포넌트에서 participants를 사용할 때 undefined가 될 수 있으므로, 그 부분을 수정해야 한다.

추가적으로, SettingPage 컴포넌트 내에서 participants 배열을 사용하기 전에 undefined 여부를 체크하는 방어 코드를 추가할 수도 있다. 예를 들어, ListContainer 내부에서 participants && participants.map(...)를 사용하고 있는데, 이는 participants 배열이 정의되어 있을 때만 map 함수를 호출하도록 한다. 오류 메시지가 여전히 나타난다면, participants가 undefined로 남아 있는 경우가 있을 수 있다.