[React] 실습 / 리스트 조회(rendering)

개요

부모 태그에서 전달받은 데이터를 리스트 형태로 출력 해보자.

 

 

App.js(부모 태그)

import "./App.css";
import ReportList from "./ReportList";

const App = () => {
  const dummyList = [
    {
      id: 1,
      author: "espania",
      content: "하이",
      grade: 1
    },
    {
      id: 2,
      author: "권영욱",
      content: "하이2",
      grade: 2
    },
    {
      id: 3,
      author: "권기웅",
      content: "하이3",
      grade: 3
    }
  ];
  return (
    <div className="App">
      <ReportList reportList={dummyList} />
    </div>
  );
};
export default App;

 

dummyList 배열 변수를 ReportList Component에 전달한다.

 

 

ReportList(자식 태그)

const ReportList = ({ reportList }) => {
  return (
    <div>
      <h2>보고 리스트</h2>
      <div>
        {reportList.map((it) => {
          return (
            <div key={it.id}>
              <div>
                <span>작성자 : {it.author}</span>
              </div>
              <div>
                <span>내용 : {it.content}</span>
              </div>
              <div>
                <span>보고 : {it.grade}</span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default ReportList;​

 

배열의 map 함수를 활용하여 dummyList 배열을 리스트 형태로 출력 할 수 있다.

​

참고

https://espania.tistory.com/354

[React] 실습 / 사용자 입력 처리

https://espania.tistory.com/355

[React] 실습 / DOM 조작 / useRef

https://codesandbox.io/s/icy-rain-hidu02?file=/src/App.js 

icy-rain-hidu02 - CodeSandbox

​