TIL #25 스탠다드반 3rd 과제

하루 하나씩 작성하는 TIL #25

---

이번에 새롭게 발제된 3번 째 과제.

튜터님의 소스코드가 담긴 repository 를 fork 한 후에

깃헙 코드를 복사한 뒤 아래 명령어로 프로젝트를 시작한다.

mkdir 폴더명
cd 폴더명
git clone [GITHUB_URL] ./

---

ex1

export default 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" },
  ];

  // TODO: filter를 사용하여 18세 이상의 학생들만 선택하세요.
  const filteredStudents = students.filter(/* 여기에 코드 작성 */);

  return (
    <div>
      <h1>학생 목록</h1>
      <ul>
        {/* TODO: map을 사용해서 filteredStudents를 여기에 렌더링하세요. */}
        {/* TODO: 학생이름을 클릭하면 나이와 점수가 alert 돼야 해요.*/}
      </ul>
    </div>
  );
}

filter

map

수정 후

export default 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" },
  ];

  const filteredStudents = students.filter( student => student.age >= 18 ); 
  const click = (student) => { 
    alert (`${student.name}, ${student.age}, ${student.grade} `)
  };
  return (
    <div>
      <h1>학생 목록</h1>
      <ul>
        {filteredStudents.map(student => (
          <li key={student.name}>
            <button onClick={() => click(student)}>
              {student.name}
            </button>
          </li>
        )) }
        </ul>
    </div>
  );
};

작성 후,

git init
git add .
git commit -m "ex1"
git push origin ex1

해준 후

git checkout -b ex2 
git reset --hard origin/ex2 

해주면 ex2 풀 준비 완료

---

ex2

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 = ...;

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

export default App;

수정 후

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);


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


  const ageChange = (e) => {
    setMinAge((e.target.value));
  };

  return (
    <div>
      <h1>학생 목록</h1>
      <p>다음 나이 이상의 학생목록만 출력해요: {minAge}살 이상</p>
      <input type="number" value={minAge} onChange={ageChange} /> 살 이상
      <ul>
        {filteredStudents.map(student => (
          <li key={student.name}>
            {student.name} {student.age} {student.grade}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

---

ex3

import { useState } from "react";

function App() {
  const [students, setStudents] = useState([
    { 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 [filteredStudents, setFilteredStudents] = useState(students);

  // TODO: filterByAge 함수를 작성하세요. 이 함수는 최소 나이를 매개변수로 받아 해당 나이 이상인 학생들로 필터링해야 합니다.
  const filterByAge = (minAge) => {
    // 여기에 코드를 작성하세요.
  };

  // TODO: filterByGrade 함수를 작성하세요. 이 함수는 특정 학점을 매개변수로 받아 해당 학점의 학생들로 필터링해야 합니다.
  const filterByGrade = (grade) => {
    // 여기에 코드를 작성하세요.
  };

  // TODO: resetFilter 함수를 작성하세요. 이 함수는 필터를 초기화하여 모든 학생들을 표시해야 합니다.
  const resetFilter = () => {
    // 여기에 코드를 작성하세요.
  };

  return (
    <div>
      <h1>학생 목록</h1>
      <button onClick={() => filterByAge(24)}>24세 이상</button>
      <button onClick={() => filterByGrade("A")}>A등급</button>
      <button onClick={resetFilter}>필터 초기화</button>
      <ul>
        {filteredStudents.map((student, index) => (
          <li key={index}>
            {student.name} - Age: {student.age}, Grade: {student.grade}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

수정 후

import { useState } from "react";

function App() {
  const [students, setStudents] = useState([
    { 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 [filteredStudents, setFilteredStudents] = useState(students);

  // TODO: filterByAge 함수를 작성하세요. 이 함수는 최소 나이를 매개변수로 받아 해당 나이 이상인 학생들로 필터링해야 합니다.
  const filterByAge = (minAge) => {
    const filtered = students.filter( student => student.age >= minAge ); 
    setFilteredStudents(filtered);
  };

  // TODO: filterByGrade 함수를 작성하세요. 이 함수는 특정 학점을 매개변수로 받아 해당 학점의 학생들로 필터링해야 합니다.
  const filterByGrade = (grade) => {
    const filtered = students.filter( student => student.grade === grade ); 
    setFilteredStudents(filtered);
  };

  // TODO: resetFilter 함수를 작성하세요. 이 함수는 필터를 초기화하여 모든 학생들을 표시해야 합니다.
  const resetFilter = () => {
    setFilteredStudents(students);
  };

  return (
    <div>
      <h1>학생 목록</h1>
      <button onClick={() => filterByAge(24)}>24세 이상</button>
      <button onClick={() => filterByGrade("A")}>A등급</button>
      <button onClick={resetFilter}>필터 초기화</button>
      <ul>
        {filteredStudents.map((student, index) => (
          <li key={index}>
            {student.name} - Age: {student.age}, Grade: {student.grade}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

---

ex4

App.jsx

import { useState } from "react";
import FilterButtons from "./components/FilterButtons";
import StudentList from "./components/StudentList";

function App() {
  const initialStudents = [
    { name: "Alice", age: 17, grade: "A" },
    { name: "Bob", age: 18, grade: "B" },
    { name: "Charlie", age: 16, grade: "C" },
    { name: "Diana", age: 19, grade: "D" },
  ];

  const [filteredStudents, setFilteredStudents] = useState(initialStudents);

  return (
    <div>
      <h1>학생 목록</h1>
      {/* TODO: FilterButtons 컴포넌트를 작성하고 필요한 props를 전달하세요. */}
      <FilterButtons
      /* 필요한 props를 여기에 전달하세요. */
      />

      {/* TODO: StudentList 컴포넌트를 작성하고 필요한 props를 전달하세요. */}
      <StudentList
      /* 필요한 props를 여기에 전달하세요. */
      />
    </div>
  );
}

export default App;

수정 후

import { useState } from "react";
import FilterButtons from "./components/FilterButtons";
import StudentList from "./components/StudentList";


function App() {
  const initialStudents = [
    { name: "Alice", age: 17, grade: "A" },
    { name: "Bob", age: 18, grade: "B" },
    { name: "Charlie", age: 16, grade: "C" },
    { name: "Diana", age: 19, grade: "D" },
  ];

  const [filteredStudents, setFilteredStudents] = useState(initialStudents);

  // 최소 나이 필터링
  const filterByAge = (minAge) => {
    const filtered = initialStudents.filter(student => student.age >= minAge);
    setFilteredStudents(filtered);
  };

  // 학점 필터링
  const filterByGrade = (grade) => {
    const filtered = initialStudents.filter(student => student.grade === grade);
    setFilteredStudents(filtered);
  };

  // 필터 초기화
  const resetFilter = () => {
    setFilteredStudents(initialStudents);
  };

  return (
    <div>
      <h1>학생 목록</h1>
      {/* FilterButtons 컴포넌트에 필요한 함수들을 props로 전달. */}
      <FilterButtons
        filterByAge={filterByAge}
        filterByGrade={filterByGrade}
        resetFilter={resetFilter}
      />

      {/* StudentList 컴포넌트에 필요한 props를 전달. */}
      <StudentList students={filteredStudents} />
    </div>
  );
}

export default App;

---

FilterButton.jsx

// TODO: FilterButtons 컴포넌트를 작성하세요. 필터링 옵션을 선택하는 버튼들을 포함해야 합니다.
function FilterButtons(/* 필요한 props를 여기에 전달하세요 */ {}) {
  const filterByAge = (minAge) => {};
  const filterByGrade = (grade) => {};
  const resetFilter = () => {};

  return (
    <div>
      {/* 여기에 필터링 버튼들을 완성하세요. */}
      <button>18세 이상</button>
      <button>A등급</button>
      <button>필터 초기화</button>
    </div>
  );
}

export default FilterButtons;

수정 후

// TODO: FilterButtons 컴포넌트를 작성하세요. 필터링 옵션을 선택하는 버튼들을 포함해야 합니다.
function FilterButtons({ filterByAge, filterByGrade, resetFilter }) {
  return (
    <div>
      {/* 여기에 필터링 버튼들을 완성하세요. */}
      <button onClick={() => filterByAge(18)}>18세 이상</button>
      <button onClick={() => filterByGrade("A")}>A등급</button>
      <button onClick={resetFilter}>필터 초기화</button>
    </div>
  );
}

export default FilterButtons;

---

StudentList.jsx

// TODO: StudentList 컴포넌트를 작성하세요. props로 학생 목록을 받아와서 표시해야 합니다.
function StudentList(/* 필요한 props를 여기에 전달하세요 */ {}) {
  return (
    <ul>
      {/* 여기에 학생 목록을 표시하는 로직을 작성하세요. */}
      {/* ex: 홍길동 (20세) - A등급 */}
    </ul>
  );
}

export default StudentList;

수정 후

// TODO: StudentList 컴포넌트를 작성하세요. props로 학생 목록을 받아와서 표시해야 합니다.
// eslint-disable-next-line react/prop-types
function StudentList({ students }) {
  return (
    <ul>
      {/* 학생 목록을 순회하면서 각 학생의 정보를 출력합니다. */}
      {students.map((student, index) => (
        <li key={index}>
          {student.name} ({student.age}세) - {student.grade}등급
        </li>
      ))}
    </ul>
  );
}

export default StudentList;

---

ex4에선 prop-typtes error가 떠서 저 코드를 추가해주었다.