TIL Day-50

React

React 완벽 복습



리액트 State 및 이벤트 다루기


State

  • 변경될 수 있는 데이터에 사용

  • 데이터의 변경 사항이 사용자 인터페이스에 반영되어야 하는 경우

  • 일반 변수로는 변경된 값을 설정할 수 없음

    • React는 처음 한번만 랜딩되고
    • state가 등록된 컴포넌트를 재검토


useState를 사용 하는 두 가지 방법

  1. 대상마다 각각의 state를 선택하여 상태 관리

const ExpenseForm = () => {
  const [enteredTitle, setEnteredTitle] = useState('')
  const [enteredAmount, setEnteredAmount] = useState('')
  const [enteredDate, setEnteredDate] = useState('')
}

const titleChangeHandler = event => {
  setEnteredTitle(event.target.value)
}


  1. 하나의 state 접근 방식을 선택해서 상태 관리

const [userInput, setUserUnput] = useState({
  enteredTitle: '',
  enteredAmount: '',
  enteredDate: '',
})

const titleChangeHandler = event => {
  setUserInput({
    ...userInput, //  현재 값들 복사
    enteredTitle: event.target.vlaue // 제목만 업데이트
  })
}
  • 이 방식에서는 사용되지 않는 다른 데이터(enteredAmount, enteredDate)의 손실이 없도록 수동으로 복사하여 사용
  • 기술적으로 작동은 되겠지만 간혹 작동이 안되는 경우가 있어 좋은 방식이라고는 할 수 없다.
  • 상태를 업데이트 할 때 이전 상태에 의존하는 방식은 좋지 않다.

const titleChangeHandler = event => {
  setUserInput((prevState) => {
    return { ...prevState, enteredTitle: event.target.value }
  })
}
  • React는 상태 업데이트를 스케줄링하기 때문에
  • 이전 상태에 의존하는 방식 대신 내부 함수에서 항상 가장 최신의 상태를 보장받는 가장 안전한 방법으로 사용

좋은 웹페이지 즐겨찾기