37. React 코드 오류 정리2

Mission: React 코드 오류 정리 및 해결 방법

에러:
useNavigate is not a function

원인:
'useNavigate'가 react-router-dom의 이전 버전에서는 존재하지 않았을 수 있으며, react-router-dom의 버전 충돌 또는 잘못된 import 문제로 인해 발생할 수 있다.

해결방안:

• react-router-dom 패키지 업데이트: react-router-dom을 최신 버전으로 업데이트하여 'useNavigate'를 사용할 수 있도록 한다.

npm install react-router-dom@latest

• 올바른 import 확인: 'useNavigate'를 올바른 방식으로 import 했는지 확인한다.

import { useNavigate } from "react-router-dom";

에러:
setPosts is not a function

원인:
'setPosts' 함수를 해당 컴포넌트로 전달받지 못하여 발생하는 문제이다. 'setPosts' 함수를 전달하지 않았거나 전달된 값이 올바르지 않은 경우에 발생한다.

해결방안:

• 'setPosts' 함수를 해당 컴포넌트로 전달하여 데이터를 업데이트하도록 수정한다.

// App.js에서 setPosts 함수를 생성하고, 해당 값을 하위 컴포넌트로 전달
import React, { useState } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Main from "./Main";
import Detail from "./Detail";
import Edit from "./Edit";
function App() {
  const [posts, setPosts] = useState([]);
  return (
    <Router>
      <Route
        exact
        path="/"
        component={() => <Main posts={posts} setPosts={setPosts} />} // setPosts 함수를 Main 컴포넌트로 전달
      />
      <Route
        path="/detail/:id"
        component={Detail}
      />
      <Route
        path="/edit/:id"
        component={() => <Edit posts={posts} setPosts={setPosts} />} // setPosts 함수를 Edit 컴포넌트로 전달
      />
    </Router>
  );
}
export default App;

에러:
Cannot read property 'someProperty' of undefined

원인:
'객체나 배열 내의 프로퍼티에 접근하려고 할 때, 객체나 배열 자체가 정의되지 않은(undefined) 상태에서 발생한다.

해결방안:

• 해당 객체나 배열이 정의되어 있는지 확인하고, 정의된 경우에만 프로퍼티에 접근하도록 처리한다.

// 오류 발생 예시
const data = undefined;
const value = data.someProperty; // TypeError: Cannot read property 'someProperty' of undefined
// 오류 수정 예시
if (data) {
  const value = data.someProperty;
  // 또는
  const value = data?.someProperty; // Optional chaining 사용 (ES11)
}

에러:
Maximum update depth exceeded

원인:
'해당 오류는 컴포넌트 내에서 무한 루프에 빠지거나, 렌더링이 계속해서 발생하여 스택이 너무 깊어지는 경우에 발생한다.

해결방안:

• 무한 루프를 방지하고 렌더링 횟수를 줄이기 위해 조건문이나 Memoization 기법을 활용한다.

// 오류 발생 예시 (무한 루프)
function InfiniteLoopComponent() {
  return <InfiniteLoopComponent />;
}
// 오류 수정 예시 (조건문 활용)
function ConditionalRenderingComponent({ showComponent }) {
  return showComponent ? <SomeComponent /> : null;
}
// 오류 수정 예시 (Memoization)
import { useMemo } from "react";
function MemoizedComponent({ data }) {
  // data가 변할 때만 expensiveFunction 호출
  const memoizedData = useMemo(() => expensiveFunction(data), [data]);
  return <div>{memoizedData}</div>;
}

• 올바른 import 확인: 'useNavigate'를 올바른 방식으로 import 했는지 확인한다.

import { useNavigate } from "react-router-dom";

에러:
TypeError: Cannot read property 'map' of null

원인:
'해당 오류는 배열이나 객체가 null인 상태에서 map 함수와 같은 배열 관련 메서드를 사용하려고 할 때 발생한다.

해결방안:

• 배열이나 객체가 null인지 확인한 후, 사용하기 전에 초기값으로 빈 배열 또는 빈 객체를 할당한다.

// 오류 발생 예시
const data = null;
const result = data.map(item => item); // TypeError: Cannot read property 'map' of null
// 오류 수정 예시
const data = null;
const result = (data || []).map(item => item); // 빈 배열로 초기화

에러:
Uncaught Error: Too many re-renders.

원인:
해당 오류는 렌더링이 계속해서 발생하여 무한 루프에 빠지는 경우에 발생한다. 대부분 상태 업데이트 시 무한 재렌더링이 발생하는 경우가 많다.

해결방안:

• 상태 업데이트 시 무한 재렌더링을 방지하기 위해 useEffect나 조건문 등을 사용하여 상태 업데이트를 제어한다.

// 오류 발생 예시 (무한 루프)
function InfiniteRerenderComponent() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(count + 1); // 무한 루프로 인해 오류 발생
  }, []);
  return <div>{count}</div>;
}
// 오류 수정 예시 (useEffect 사용)
function CorrectedComponent() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(count + 1); // 의존성 배열([])을 제공하여 한 번만 실행되도록 설정
  }, []);
  return <div>{count}</div>;
}

개념:
useParams 사용 원리

설명:
'useParams'는 react-router-dom의 Hook으로, 동적인 URL 파라미터 값을 가져올 때 사용한다. 예를 들어, 동적으로 변하는 게시물 ID나 사용자 이름 등의 값을 URL에서 추출할 때 유용하다.

예시:

import { useParams } from "react-router-dom";
function Detail() {
  const { id } = useParams(); // 동적 파라미터 값(id)를 변수로 받아옴
  return (
    <div>
      <h1>게시물 ID: {id}</h1>
    </div>
  );
}