React Component

import React 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" },
  ];

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

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

export default App;

여기 나온 예제를 통해 filter & map 메소드를 알아가며 리액트 컴포넌트 개념을 잡아 갔다.

처음 보아야 할 것은 App 컴포넌트의 return 부분이다
ul
un + ordered(unordered) list의 약자로, 순서가 필요 없는 목록
ol
ordered list의 약자로, 순서가 있는 목록

ul & ol 태그 안에는 li태그를 사용한다.

<ul>
<li>나는 </li>
<li>안에</li>
<li>들어와야 해</li>
</ul>

이부분을 채우기 위해 하드코딩으로 시작하는 방법을 사용했다.
하드 코딩으로 무엇을 구현하고싶은지 적어 놓고

함수로 만들어 가보자
배열안에 객체가 있다.
filter 메소드를 사용하여 나이가 18세이상인 React Compornent를 보여주기 위해, 예제의 괄호 안에 콜백함수를 사용해보자
return의 기초를 잡기위해 화살표 함수를 뒤로 하고 function 키워드를 사용해보고자 한다.
그안에는 인자를 넣어서
18보다 크거나 같게 비교연산자를 사용 하여 ture를 출력하도록 한다.
return을 사용하여 실행 함수임을 구별한다.

두번째로는 map 메소드를 사용 할건데 filter를 담아준 변수
filteredStudents.map으로 사용 하려고 한다.
채워야 할 배열안에 객체를 하드코딩으로 해봤다면 유지보수 및 코드정리를 가능케 구현했다.

마지막으로 alert을 띄워야 하는데

import React from "react";
function App() {
  const students = [
    { name: "Alice", age: 17, grade: "A" },
    { name: "Bob", age: 18, grade: "B" },
    { name: "Charlie", age: 16, item: "C" },
    { name: "Diana", age: 19, grade: "D" },
  ];
  // TODO: filter를 사용하여 18세 이상의 학생들만 선택하세요.
  const filteredStudents = students.filter(function (item) {
    return item.age >= 18;
  });
  // const filteredStudents = students.filter((item) => {return item.age >= 18});
  
  const 작명 = function (abc) {
    alert(`${abc.age} ${abc.grade}`);
  };
  return (
    <div>
      <h1>학생 목록</h1>
      <ul>
        {/* TODO: map을 사용해서 filteredStudents를 여기에 렌더링하세요. */}
        {filteredStudents.map(function (item) {
          // return <li onClick={() => 작명(item)}>{item.name}</li>;
          return (
            <li
              onClick={function () {
                작명(item);
              }}
            >
              {item.name}
            </li>
          );
        })}
      </ul>
    </div>
  );
}
export default App;

작명이라는 변수에 콜백함수로 인자를 넣고 이때는 return을 사용하지 않고
함수 선언문으로 이벤트가 발생할 때 실행할 수 있도록 하였다.
작명에 인자를 가져오기 위해
onClick={() => 작명(item)
인자를 넣어 주고 익명 화살표 함수를 만들어서 바로 실행이아니라 이벤트가 발생할 때 실행 될 수 있도록 하였다.