리액트 오류 : Uncaught TypeError: Cannot read properties of null (reading 'map') / 옵셔널체이닝으로 해결 가능

[App.jsx] 

import { useEffect, useState } from 'react';

import './App.css';

import axios from 'axios';

function App() {

    const [todos, setTodos] = useState(null);

    const fetchTodos = async () => {

        const { data } = await axios.get('http://localhost:4002/todos');

        setTodos(data);

    };

    useEffect(() => {

        fetchTodos();

    }, []);

    return (

        <div>

            {todos.map((item) => {

                return (

                    <div key={item.id}>

                        {item.id} : {item.title}

                    </div>

                );

            })}

        </div>

    );

}

export default App;

[원인]

데이터를 async + await로 가져오는 상황에서,

 

(1) 비동기함수가 실행되기 전에 return 아래 부분이 먼저 호출이 됨.

(2) 랜더링되고나서 비동기함수가 더 늦게 발생함.

(3) todos는 현재 데이터가 없어서 null일 수 있음.

 

[해결]

null값일 경우를 생각해서 map 메서드를 사용하는 구간에 옵셔널 체이닝 '?." 넣어주기

return (

        <div>

            {todos?.map((item) => {

                return (

                    <div key={item.id}>

                        {item.id} : {item.title}

                    </div>

                );

            })}

        </div>

    );

▶ 옵셔널 체이닝 ?.

: ?. 앞의 평가대상이 null / undefined인 경우 평가를 멈추고 undefined를 반환

(1) 존재하지 않아도 괜찮은 대상에만 적용해야함 (에러 피하기 위해서 남용하다가 디버깅이 어려워질 수 있음)

(2) 옵셔널 체이닝 앞에 오는 변수는 선언되어있어야함.