(React) React에서 map으로 여러개의 엘리먼트 표시하기

React에서 브라우저에 여러개의 태그 엘리먼트를 표시를 할 때 map함수를 사용한다. 아래와 같은 posts 배열이 있고 post를 변수로 받아서 브라우저에 표시해주는 것이다. 방법은 return 안에 map을 사용하는 방법가 아닌 방법이 있다.

 

return 문 안에서 map 메소드를 사용할 수는 없을까요? 사용할 수 있습니다. JSX를 사용하면 중괄호 안에 모든 표현식을 포함할 수 있기 때문에 map 메소드의 결과를 return문 안에 인라인으로 처리할 수 있습니다. 코드 가독성을 위해 변수로 추출할지 아니면 인라인에 넣을지는 개발자가 판단해야 할 몫입니다.

 

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React" },
  { id: 2, title: "Installation", content: "You can install React from npm" }
];

 

1. 변수 posts를 배열 요소를 바로 

export default function App() {
  const postToJSX = (obj) => (
    <div key={obj.id}>
      <div>{obj.title}</div>
      <div>{obj.content}</div>
    </div>
  );

  return posts.map((post) => (
    <div>{postToJSX(post)}</div>
  )); 
  
}

 

2. 변수 posts를 react의 변수로 mapping한 함수를 선언해주는 방법 

export default function App() {
  const postToJSX = (obj) => (
    <div key={obj.id}>
      <div>{obj.title}</div>
      <div>{obj.content}</div>
    </div>
  );

  const post = posts.map(postToJSX);

  return <div>{post}</div>;
}