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메소드 활용전

질문

• 첫번째
  const dataToPost = (data) => 화살표 함수 표현식인거 같은데 , 일반적인 함수 표현식으로 하면 어떻게 되는건지 궁금하다.

• 두번째

<div>
      <h3>{data.title}</h3>
      <p>{data.content}</p>
      </div>     

여기서 왜 <h3> 과 <p> 태그를 사용한건지 모르겠다.

• 세번째

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

<div className="post-wrapper">{blogs}</div> 
여기서 왜 "post-wrapper"을 지정해준건지 모르겠다 그냥 여기서 만들어 준건가? 
{blogs}이건 datas.map(dataToPost) 이 값을 할당해줘서 그런건가