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을 반환한다.