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)
}

2. 하나의 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는 상태 업데이트를 스케줄링하기 때문에
• 이전 상태에 의존하는 방식 대신 내부 함수에서 항상 가장 최신의 상태를 보장받는 가장 안전한 방법으로 사용