React로 option 값 넣고 변경하기

* '따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기' 강의 참고

* 서울 ~ 울산광역시가 포함된 option 기능 react로 만들기

 

 

* 결과물

- 확인 위에 부분만 참고할 것

 

 

 

해당 코드

 

import React, { useState } from "react";
import { Button, Form, Input } from "antd";

const { TextArea } = Input;


const Metropolitans = [
  { key: 1, value: "서울특별시" },
  { key: 2, value: "부산광역시" },
  { key: 3, value: "전주광역시" },
  { key: 4, value: "대구광역시" },
  { key: 5, value: "인천광역시" },
  { key: 6, value: "광주광역시" },
  { key: 7, value: "대전광역시" },
  { key: 8, value: "울산광역시" },
];

function TestPage() {
  const [Metropolitan, setMetropolitans] = useState(1);

  const metropolitanChangeHandler = (event) => {
    setMetropolitans(event.currentTarget.value);
  };


  return (
    <div>
          <select onChange={metropolitanChangeHandler} value={Metropolitan}>
            {Metropolitans.map((item) => (
              <option key={item.key} value={item.key}>
                {item.value}
              </option>
            ))}
          </select>
    </div>
  );
}

export default TestPage;

 

 

* map() :배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. 

* 출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

 

 

* react에서의 map() -> key값을 줄 수 있고, 변수 선언하여 넣을 수 있음

* 출처 : https://ko.reactjs.org/docs/lists-and-keys.html 

 

 

* event target과 currentTaget의 차이

* 출처 : (https://velog.io/@edie_ko/JavaScript-event-target%EA%B3%BC-currentTarget%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90)

JavaScript | event target과 currentTarget의 차이점