[Javascript] Array.map 사용 후 값이 출력 되지 않았던 문제

Array.map을 사용 후 값이 출력 되지 않았아 당황했었다.
게다가 아무 에러 메시지도 나오지않았던 상황(...)

알아보니 map 사용 시 화살표함수 뒤 괄호에 ⇒ {} 중괄호를 쓰면 return을 생략할 수 없고, ⇒ () 소괄호로 쓰면 return 생략이 가능했다!

() => {} 이 익숙해진 상태로 리턴문 없이 작성해서 생긴 문제였다...

중괄호와 소괄호 모두 사용 가능한 부분이라서 Prettier 또는 ESLint가 잡아주지 않고, 브라우저 상에서 오류도 없이 공백으로 표시되니 유의해야겠다.

{lists.map((list, i) => ( // 소괄호 리턴 생략 가능
        <> 
          <div className="listing">
            <div>{list.id}</div>
            <div>{list.category}</div>
            <div>{list.title}</div>
            <div>{list.username}</div>
            <div>{list.date}</div>
            <div>{list.count}</div>
          </div>
        </>
      ))}

{lists.map((list, i) => { // 중괄호 리턴 생략 불가
        return (
          <>
            <div className="listing">
              <div>{list.id}</div>
              <div>{list.category}</div>
              <div>{list.title}</div>
              <div>{list.username}</div>
              <div>{list.date}</div>
              <div>{list.count}</div>
            </div>
        </>
       )
     })}