2024-05-21 [React] state로 렌더링 되는 데이터 필터링하기

import { useState } from "react";

function App() {
  const students = [
    { name: "Alice", age: 17, grade: "A" },
    { name: "Bob", age: 18, grade: "B" },
    { name: "Charlie", age: 16, grade: "C" },
    { name: "Diana", age: 19, grade: "D" },
    { name: "Elmo", age: 20, grade: "E" },
    { name: "Fiona", age: 21, grade: "F" },
    { name: "Gabe", age: 22, grade: "A" },
    { name: "Hannah", age: 23, grade: "B" },
    { name: "Irene", age: 24, grade: "C" },
    { name: "Jenny", age: 25, grade: "D" },
    { name: "Kevin", age: 26, grade: "E" },
    { name: "Linda", age: 27, grade: "F" },
  ];

  const [minAge, setMinAge] = useState(18);

  // TODO: filter를 사용하여 minAge 이상의 학생들만 선택하세요.
  // const filteredStudents = ...;
  const filteredStudents = students.filter((student) => student.age >= minAge );

  return (
    <div>
      <h1>학생 목록</h1>
      다음 나이 이상의 학생목록만 출력해요 :{" "}
      {/* TODO: input에 입력된 값(숫자) 이상의 나이를 가진 학생들만 출력하세요. */}
      <input type="number" value={minAge} onChange={(e)=>setMinAge(e.target.value)} /> 살 이상
      <ul>
        {/* TODO: map을 사용하여 필터링된 학생들의 정보를 표시하세요. 동명이인은 없다고 가정합니다. ex) 홍길동 - Age: 24, Grade: A */}
        {filteredStudents.map((student, index) => {
          return (
            <li key={index}>
              <h1>{student.name}</h1>
              <h3>age: {student.age}</h3>
              <h3>Grade: {student.grade}</h3>
            </li>
          )
        })}
      </ul>
    </div>
  );
}

export default App;

배운 점

리액트에서 map메서드를 통해 화면을 렌더링 할 때는 가장 최상위 태그에 key=값을 부여하여야 한다.

이 key에 Date.now()와 같은 유니크한 값을 넣으면 충돌이 발생함. 단 1%의 가능성이라도 겹치지 않는 id를 가장 쉽게 부여하는 방법은, 렌더링하려는 게 배열은 경우 index는 0번부터 시작해서 절대 겹치지 않기 때문에 map 메서드의 두번째 매개변수로 index를 주고 {index}를 key값으로 부여하면 됨.

input의 값을 state로 관리하려는 경우, 세트 메뉴로 따라오는 속성들

<input
    type="number"
    value={state변수명} {/* state와 연결 */}
    onChange={(e) => setState(e.target.value)} {/* 상태변경 함수와 연결 */}
>