[React] Select option마다 원하는 컴포넌트 실행하기

function Home() {
  const [index, setIndex] = useState("0");
  // select element의 value를 state화여, default value는 "0"(Sort by...)으로 함
  const onSelect = (event) => {
      setIndex(event.target.value);
  };
  // select element에 추가한 change이벤트를 받는 함수로 onSelect 생성하여 select에서 value의 변화를 감지하고 받아옴
  
  return (
    <select value={index} onChange={onSelect}>
      <option value="0">Sort by...</option>
      <option value="1">Rating 🔽</option>
      <option value="2">Year 🔽</option>
    </select>
    {index === "1" ? <RatingList /> : null}
    {index === "2" ? <YearList /> : null}
  );
// Select의 각각의 option에 value를 준다.
// 삼항연산자 이용하여 option 별로 각각의 Component를 실행하도록 함
// index(option value)가 "1"일때, RatingList 컴포넌트를 렌더링
// index가 "2"일땐, YearList 컴포넌트를 렌더링