[React] React에서 map 함수 쓸 때 주의점

React를 공부하던 중 실수를 통해 발견한 것

필자는 React를 혼자 독학하던 중, 알 수 없는 오류를 만나 고민한 부분을 같이 공유하고자 한다.
내가 실수한 코드는 다음과 같다

문제가 되는 부분

혹시 위에서 잘못한 부분을 찾을 수 있겠는가? 아는 사람에겐 쉽지만 리액트나 JS문법이 완벽하지 않다면 헷갈릴 수 있는 문제이다. 위 코드에서 잘못된 부분은 바로 14 ~ 16번째 줄이다.
이 때 바로 알겠다! 라고 하는 사람은 그냥 가볍게 읽으면 좋을 것이고, 아직도 모르겠다면 관련된 내용을 좀 더 찾아보거나 공부를 해야 할 필요성이 있다. 간단히 얘기하자면 문제는 다음과 같다.
DUMMY_TODO.map함수 내에서 콜백함수에 중괄호를 사용하는데, 이 때 return값이 없어서 undefined가 반환되고, 리액트는 배열 안에 ‘undefined’를 랜더링하려고 시도하므로 오류가 발생하는 것이다. 이를 해결하기 위한 방법은 두 가지가 있다.

해결방법1) return 사용

해결방법2) 중괄호를 없애고 소괄호 사용

결론

오늘은 React를 공부하던 중 예상치 못한 오류를 만나고 이를 해결하는 과정을 간단히 담아보았다. 아직은 React와 JS의 문법에 대해 온전히 숙지하지 못해 발생한 문제였던것 같다. 개인적으로 첫 번째 방법보다는 두 번째 방법이 더 대중적인 방법인것 같다. Mistakes & Errors 태그의 첫 번째 게시물인데, 앞으로도 오류들을 만나면 나중에 다시 볼 수 있도록 오류 내용과 해결 과정을 포스팅 하도록 해봐야겠다.