상태 변경에 대한 작업을 호출하는 2가지 간단한 방법

대본

선택한 국가에 따라 사용 가능한 주 목록을 새로 고치고 싶습니다.

1. 사용 효과

이 함수의 매개변수 중 하나는 리스너로 작동하는 값의 배열입니다.

useEffect(() => {
  // if there is no country selected
  if (!selectedCountry) {
    // just reset the state options
    return setStates([])
  }

  // fetch available states
  fetchStatesByCountry(selectedCountry)
}, [selectedCountry])

useEffect는 첫 번째 렌더링과 selectedCountry의 값이 변경될 때만 수행됩니다.

이 시나리오에 좋은 장소입니다. 많이 사용하지 않고 요청에 대한 통제력을 상실하지 않도록 주의해야 합니다. 네트워크 탭을 확인하면 요청을 여러 번 호출하지 않는지 확인할 수 있습니다.

2. 단순히 함수를 호출하기

누가 행동을 촉발하는지 정확히 알기 때문에 이 간단한 접근 방식을 사용하는 것이 편합니다.

const onCountryChange = e => {
  const selectedCountry = event.target.value

  // if there is no country selected
  if (!selectedCountry) {
    // just reset the state options
    return setStates([])
  }

  // fetch available states
  fetchStatesByCountry(selectedCountry)
}

return (
  <select onChange={onCountryChange}>
    <option value="AU">Australia</option>
    <option value="...">...</option>
  </select>
)

어느 것을 더 선호 해?