기본 콘텐츠로 건너뛰기

React list.filter

EmpFile.js
import emps from "./emps.json";

function EmpFile() {
  const filtered = emps.list.filter(emp => emp.dept == 20);
  console.log(filtered);
  return (
    <>
      <h1>테이블에 데이터 표시하기</h1>
      <table>
        <thead>
          <tr><th>번호</th><th>이름</th><th>전화</th></tr>
        </thead>
        <tbody>
          {
            filtered.map(emp =>
              <tr key={emp.num}>
                <td>{emp.num}</td><td>{emp.name}</td><td>{emp.phone}</td>
              </tr>
            )
          }
        </tbody>
      </table>
    </>
  );
}

export default EmpFile;

emps.json
{
  "list": [
    { "id": 11, "num": 11, "name": "Smith", "phone": "010-2149-3214", "dept": 20 },
    { "id": 12, "num": 12, "name": "Lora", "phone": "010-2547-5498", "dept": 20 },
    { "id": 13, "num": 13, "name": "Jone", "phone": "010-2193-2594", "dept": 30 },
    { "id": 14, "num": 14, "name": "Scott", "phone": "010-2368-95474", "dept": 40 }
  ]
}

이 블로그의 인기 게시물