[javascript] 화살표함수 (), {} return 문제

const Home = () => {
  const [blogs, setBlogs] = useState([
...
  ]);
  return (
    <div className="home">
      {blogs.map(blog => {
        <div className="blog-preview" key={blog.id}>
          <h2>{blog.title}</h2>
          <p>Written by {blog.author}</p>
        </div>;
      })}
    </div>
  );
};

위 코드는 리액트에서 Home컴포넌트에 있는 state인 blogs 를 배열에 초기화를 해놓고 (위 코드에서는 ... 으로 생략돼있으나 원래는 title,body,author,id 값을 갖는 객체들의 배열임) 그 초기화된(하드코딩된) 객체 배열들을 map함수로 돌면서 화면에 보여지게 하려는 의도였다.

하지만 위 코드처럼 실행을 했을 때는 map함수가 제대로 작동되지 않아서 화면에 map에서 반환해야할 JSX 템플릿이 아무것도 반환되지 않는 문제가 발생한다.

이는 js 에서 화살표 함수에서 주의해야 할 부분에서 기인한 문제이다.
화살표 함수에서 위 코드와 같이 map함수 구현부를 {} 로 감쌌을 때는 return 키워드가 없으면 반환을 하지 않는다. 그래서 {} 이 괄호를 사용하고 싶을 때는 return 을 꼭 써줘서 반환을 명시적으로 해줘야 한다.

...
  return (
    <div className="home">
      {blogs.map(blog => {
        return (
          <div className="blog-preview" key={blog.id}>
            <h2>{blog.title}</h2>
            <p>Written by {blog.author}</p>
          </div>
        );
      })}
    </div>
  );
...

이렇게 return 으로 감싸주고 템플릿을 반환해줘야 실제로 값이 반환돼서 화면에 출력이 된다.

하지만 이렇게 말고 다른 방법으로도 반환을 할 수 있는데 return 키워드 없이 map 구현부분을 () 괄호로 감싸주면 그 안에 있는 내용을 map함수가 반환하게 된다.

즉, 맨 처음 코드에서 {} 이 괄호를 () 이 괄호로만 바꿔주면 안에 있는 템플릿 코드를 map 함수가 return함으로써 의도한 결과를 볼 수 있다.

  return (
    <div className="home">
      {blogs.map(blog => (
        <div className="blog-preview" key={blog.id}>
          <h2>{blog.title}</h2>
          <p>Written by {blog.author}</p>
        </div>
      ))}
    </div>
  );

var func = (a, b, c) =>
  1;
var func = (a, b, c) => (
  1
);
var func = (a, b, c) => {
  return 1
};

위 세 개는 똑같이 1을 반환한다.

출처: (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions)