import React from "react";

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

function Blog() {
  const dataToPost = (data) => (
    <div>
      <h3>{data.title}</h3>
      <p>{data.content}</p>
      </div>
  );

  const blogs = datas.map(dataToPost)
  return (
    <div className="post-wrapper">{blogs}</div>
  );
}
export default Blog;

[코드] map메소드 활용 

import React from "react";

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

function Blog() {
  // 하드코딩 되어있는 리스트를 map 함수를 이용하여 구현해봅시다.
  return (
    <div>
      <div>
        <h3>{datas[0].title}</h3>
        <p>{datas[0].content}</p>
      </div>
      <div>
        <h3>{datas[1].title}</h3>
        <p>{datas[1].content}</p>
      </div>
    </div>
  );
}
export default Blog;

[코드] map메소드 활용전

n.問題

最初の constdataToPost=(data)=>は矢印関数式のようで、普通の関数式でどうなるか知りたいです。 2番目 <div> <h3>{data.title}</h3> <p>{data.content}</p> </div> なぜここで<h 3>と<p>タグが使われているのか分かりません。 3番目 const blogs = datas.map(dataToPost) return ( <div className="post-wrapper">{blogs}</div> ); } export default Blog; <div className="post-wrapper">{blogs}</div> なぜかここで「post-wrapper」を指定してここで作ったのでしょうか? これはデータです。map(dataToPost)に値が割り当てられているからでしょうか?