[errorLog] React : Cannot read properties of null (reading 'map') 에러

에러가 발생한 상황

json-server로 목업 api를 활용해 리액트로 투두리스트를 만들고 있었는데 갑자기 아래와 같은 에러가 나타나기 시작했다.

우선 내가 작성한 코드는 아래와 같은 형태이다. 

• const [todos, setTodos] = useState(null) 을 사용해 투두를 관리할 상태를 만들고 초기값은 null로 주었다. 
  왜냐하면 데이터를 목업 api로부터 받아와서 넣을 것이기 때문에, 일단은 빈값인 null을 넣어줘야겠다고 생각했다.
• useEffect에서 처음 렌더링 될때 한번만 axios로 데이터를 받아와 setTodos로 값을 넣어준다.
• todos.map()으로 가져온 데이터를 ul 내부에 뿌려준다.

// ...
const TodoContainer = () => {
  const [todos, setTodos] = useState(null);

  useEffect(() => {
    (async () => {
      const { data } = await axios.get("http://localhost:3001/todos");
      setTodos(data);
    })();
  }, []);

  return (
    <div>
      // ...
      <ul>
        {todos.map((todo) => {
          return (
            <Todo
              key={todo.id}
              todo={todo}
            />
          );
        })}
      </ul>
    </div>
  );
};

export default TodoContainer;

 

 

에러 발생 이유

처음에는 map을 읽을 수 없다고 하니 목업 api에서 데이터를 받아오는 부분에 문제가 있을거라고 생각했는데 아니었다. 

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

 

이 부분이 문제였다. 정확하게는 내가 map 메서드를 사용할 todos의 초기값을 null로 주었기때문에 나타나는 에러였다. 

useEffect는 React에서 side effect를 다루는 훅이다. 그리고 공식문서에서 useEffect관련 내용을 확인해 보니 아래와 같은 내용이 있었다.

 

useEffect가 하는 일은 무엇일까요?
 useEffect Hook을 이용하여 우리는 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말합니다. React는 우리가 넘긴 함수를 기억했다가(이 함수를 ‘effect’라고 부릅니다) DOM 업데이트를 수행한 이후에 불러낼 것입니다. 

 

즉, React는 컴포넌트가 렌더링 되고 난 이후에 useEffect를 실행한다. 따라서 비동기로 목업 api에서 데이터를 받아오기 전에 렌더링이 실행되고, 이때 todos.map이 실행되는데 현재 todos의 값은 null이다. 그래서 map을 실행할 수 없었고, 이러한 에러가 발생하는 것이었다. 

 

 

해결 방법

1. && 연산자 이용

자바스크립트에서 &&는 왼쪽에서 오른쪽으로 평가되고, 두 값이 모두 같아야만 true이다. 

true && expression일 경우 expression이 반환되고, false && expression일 경우에는 false를 반환한다. 

&&는 값들이 모두 true일때만 실행된다. 

{todos &&
    todos.map((todo) => {
    return (
      <Todo
        key={todo.id}
        todo={todo}
      />
    );
})}

 

2. 초기값 설정

결론적으로는 렌더링이 될때 값을 제대로 받아오지 못하기 때문에 생기는 문제이니 초기값을 따로 설정해주면 된다.

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

 

 

 

 

 

 

 

 

 

https://ko.reactjs.org/docs/hooks-effect.html

Using the Effect Hook – React

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Logical_AND

논리적 AND (&&) - JavaScript | MDN