양방향 바인딩

내가 이해한 양방향 바인딩이란 react에서 state의 변경으로만 데이터 바인딩이 되는것이 아닌
내가 입력한 값(ex:input)으로도 바인딩이 되는 것이라고 볼 수 있다.

예로는

Expenses.js

const Expenses = ({ expenses }) => {
  const [filteredYear, setFilteredYear] = useState("2020")

  const filterChangeHandler = (selectedYear) => {
    setFilteredYear(selectedYear)
  }
  return (
    <>
      <div>
        <Card className="expenses">
          <ExpensesFilter onChangeFilter={filterChangeHandler} selected={filteredYear} />
          <ExpenseItem
            title={expenses[0].title}
            amount={expenses[0].amount}
            date={expenses[0].date}
          />

ExpensesFilter.js

const ExpensesFilter = ({ onChangeFilter, selected }) => {
  const dropdownChangeHandler = (event) => {
    onChangeFilter(event.target.value)
  }
  return (
    <div className="expenses-filter">
      <div className="expenses-filter__control">
        <label>Filter by year</label>
        <select value={selected} onChange={dropdownChangeHandler}>
          <option value="2022">2022</option>
          <option value="2021">2021</option>
          <option value="2020">2020</option>
          <option value="2019">2019</option>
        </select>
      </div>
    </div>
  )
}

위의 코드(ExpensesFilter.js)를 보면 select를 이용하여 값을 변경할 경우 dropdownChangeHandler으로 인해 filterChangeHandler가selectedYear을 매개변수로 받아 filteredYear가 변경이 되는데

Expenses.js의 selected={filteredYear}로 selected를 ExpensesFilter.js에 전달해
value를 selected로 변경하고 있다.(그렇기 때문에 코드를 실행할경우 기본값이 2020으로 되어있다.)

이를 통해 react는 사용자의 입력값에 의해 state의 변화를 줘서 데이터 바인딩을 하기도 하고 state를 변경하여 값을 setState로 변화를 줘서 데이터 바인딩을 할 수 있다는 것을 알게 되었다.
이를 통해 react는 양방향 데이터 바인딩이 가능하다는 것을 알 수 있다.