[react 리액트] 초간단 양방향 바인딩 하는법

 

1. 양방향 바인딩이 왜 필요함?

어떠한 '결과 값'이 있으면 그걸 input -> output 방향에서만 바꿀 수 있는 게 아닌 (단방향 바인딩)
다른 방향(부모<->자식 간에도)에서도 값을 바꿀 수 있고 그 값은 모든 방향에서 하나로 이어져있도록 함.

예를 들면, input 창들이 있는데 제출 버튼을 누르면 input에 작성 내용이 모두 clear 됨.

 

 

 

 

2. 초간단 사용법

1) useState로 state 생성

2) 이벤트 핸들러 함수로 setter 함수에 event.target.value 벨류 값 넣어줌 (이벤트 발생하면 state가 변경)

3) 이벤트가 발생하는 태그의 value (value가 아닌 경우도 있음) 속성에 state를 넣음 (setter 함수에 의해 변경되면 원래 value도 바뀌도록)

 

 

 

 

3. 예제

1) 드랍다운을 선택하면 해당 값을 가져온다.

2) gogo 버튼을 누르면 드랍다운의 값이 4로 바뀐다.

 

*여기서 <select value={selectOption} onChange={handleChange}> value를 지정하지 않으면 gogo 버튼을 눌러도 값이 변경되지 않음 (양방향 바인딩이 되지 않았기 때문에)

 

export default function Selected(){

  const [selectOption, setSelectOption] = useState("");

  const handleChange = (event) => {

    setSelectOption(event.target.value)

  }

  console.log(selectOption)

  const handleClick = () => {

    setSelectOption("4")

  }

  return <div>

  <select value={selectOption} onChange={handleChange}> // 이부분

    <option value="1">1</option>

    <option value="2">2</option>

    <option value="3">3</option>

    <option value="4">4</option>

  </select>

  <button onClick={handleClick}>gogo</button>

  </div>

}