TIL(리액트, map 메서드 관련 이슈)

오늘 문제의 JSX 코드는 아래의 코드 였다.

< 문제의 이슈 코드 >

<div className="todos-container">
        {todos.map((todo) => {
          <div className="todo" key={todo.id}>
            {todo.title}
          </div>;
        })}
      </div>
      

나는 위 코드에서 문제가 있을 것이라고는 생각도 못했다.
저장했을때, 터미널에서는 에러가 있다고 띄어주지 않았기 때문이다.
참고 코드와 비교했을때도 도저히 어디가 다른지 찾을 수가 없었다. input태그와 h1태그는 잘 나오는데 왜 map 메서드 부분은 전혀 나오지 않는 것인가... 를 더 고민했어야 했다.

< 이슈 해결한 코드 >

 <div className="todos-container">
        {todos.map((todo) => (
          <div className="todo" key={todo.id}>
            {todo.title}
          </div>
        ))}
      </div>

여러분은 보이는가? 무엇이 다른지?
나도 눈을 뻘겋게 하고 찾아봐도 1시간동안 이것 저것 고쳐보고 다시 수정하고 다시 돌려보고를 반복했고 찾을 수 없었다.

결국... 구세주 "diffchecker"를 쓰는 수 밖에 없었다.
근데 왠걸? 화살표함수 뒤에 '=> ('

화살표함수 쓸때 함수 내용부분은 당연히 중괄호{} 인줄 알았으나 참고 코드는 소괄호() 였다!!
OMG~!!!

구글링해보니 반환값이 객체(object)이면 소괄호( )를 씌어줘야 한다고 한다!!!
or 중괄호{}를 쓰고 싶으면, { return 반환값or반환할 객체 } 이런식으로 return을 넣던지... 하라고 한다....

"=> { return (...반환할 객체)}" 이렇게 말이다.

화살표함수 당연히 {}인줄 알았는데, 오늘도 디테일한게 코딩에서 중요하다는 것을 몸소 깨닫는다. ㅠㅠ