2024.05.21 Today Yoonsung Learned

TIL

React Standard 3rd 과제

EX1 문제

• filter를 사용하여 18세 이상의 학생들만 선택하세요.

const filteredStudents = students.filter((student) => student.age >= 18);

• map을 사용해서 filteredStudents를 여기에 렌더링하세요.
• 학생이름을 클릭하면 나이와 점수가 alert 돼야 해요.

	<ul>
        {filteredStudents.map((student) => (
          <li
            key={student.name}
            onClick={() =>
              alert(`나이: ${student.age}, 점수: ${student.grade}`)
            }
          >
            {student.name}
          </li>
        ))}
	</ul>

EX2 문제

• filter를 사용하여 minAge 이상의 학생들만 선택하세요.

const filteredStudents = students.filter((student) => student.age >= minAge);

• input에 입력된 값(숫자) 이상의 나이를 가진 학생들만 출력하세요.

<input
	type="number"
	value={minAge}
	onChange={(e) => setMinAge(Number(e.target.value))}
/>{" "}
살 이상

• map을 사용하여 필터링된 학생들의 정보를 표시하세요. 동명이인은 없다고 가정합니다.

{filteredStudents.map((student) => (
	<li key={student.name}>
		{student.name} - Age: {student.age}, Grade: {student.grade}
	</li>
))}

EX3 문제

• filterByAge 함수를 작성하세요. 이 함수는 최소 나이를 매개변수로 받아 해당 나이 이상인 학생들로 필터링해야 합니다.

const filterByAge = (minAge) => {
	const filtered = students.filter((student) => student.age >= minAge);
	setFilteredStudents(filtered);
};

• filterByGrade 함수를 작성하세요. 이 함수는 특정 학점을 매개변수로 받아 해당 학점의 학생들로 필터링해야 합니다.

const filterByGrade = (grade) => {
	const filtered = students.filter((student) => student.grade === grade);
    setFilteredStudents(filtered);
};

• resetFilter 함수를 작성하세요. 이 함수는 필터를 초기화하여 모든 학생들을 표시해야 합니다.

const resetFilter = () => {
    setFilteredStudents(students);
};