[React] State와 Select Tag Binding.

 

안녕하세요 펭귄 교수입니다.

 

React 프로젝트 진행 중 메모 할 것이 생겨 포스팅합니다.

---

React State

리액트에서 데이터 관리 방식에는 여러 가지가 있습니다.

컴포넌트 출력에 필요한 데이터들은 대개 State 혹은 Redux 등의 방식으로 관리됩니다.

 

그 중 State와 HTML Tag 인 Select의 Binding 방식에 관해 작성해보고자 합니다.

 

// 기본적인 State 사용법
import React, { useState } from 'react';

const App = () => {
    const [data, setData] = useState("");
    
    return (
    	<>
            <input value={data} onChange={(e) => { setData(e.target.value); }} />
            <p>{data}</p>
        </>
    );
}

페이지 출력

 

<!-- select 태그의 사용법 -->
<select>
    <option value="C">C</option>
    <option value="C++">C++</option>
    <option value="C#">C#</option>
    <option value="JAVA">JAVA</option>
</select>

Select

 

Binding

그러면 Select 태그에서 옵션의 값을 바꾸었을 때, state 값을 변경하고,

setState를 통해 state가 변경되었을 때 Select 태그의 value 값을 변경하는 법에 대해 이야기 하겠습니다.

 

import React, {useState} from "react";

const App = () => {
  // options들의 리스트
  const selectList = ["C", "C++", "C#", "JAVA"];
  // 현재 선택되고 있는 option의 인덱스
  const [selectIdx, setSelectIdx] = useState(0);
  // 현재 선택되고 있는 option value
  const [selected, setSelected] = useState("C");
  
  // select의 값이 변경될 때 해당 함수 호출
  const onChange = (e) => {
    setSelected(e.target.value);
  }
  
  // Change 버튼 클릭 이벤트
  // selectIdx를 1 증가, 최대 인덱스인 3을 초과할 때 나머지 연산을 통해 0으로 변경
  const onClick = (e) => {
    setSelectIdx((selectIdx+1) % 4);
    setSelected(selectList[selectIdx]);
  }

  return (
    <>
      {/* 버튼을 누르면 아래 value가 변경 */}
      <button type="button" onClick={onClick}>Change</button>
      {/* value 값에 state를 연결, 바뀔 때마다 실행하는 이벤트 onChange를 통해 state랑 연결 */}
      <select value={selected} onChange={onChange}>
        <option value="C">C</option>
        <option value="C++">C++</option>
        <option value="C#">C#</option>
        <option value="JAVA">JAVA</option>
      </select>
    </>
  );
}

 

처음 단계

change 버튼 클릭 시