TIL Day-50
React
React 완벽 복습
리액트 State 및 이벤트 다루기
State
-
변경될 수 있는 데이터에 사용
-
데이터의 변경 사항이 사용자 인터페이스에 반영되어야 하는 경우
-
일반 변수로는 변경된 값을 설정할 수 없음
- React는 처음 한번만 랜딩되고
- state가 등록된 컴포넌트를 재검토
useState를 사용 하는 두 가지 방법
- 대상마다 각각의 state를 선택하여 상태 관리
const ExpenseForm = () => {
const [enteredTitle, setEnteredTitle] = useState('')
const [enteredAmount, setEnteredAmount] = useState('')
const [enteredDate, setEnteredDate] = useState('')
}
const titleChangeHandler = event => {
setEnteredTitle(event.target.value)
}
- 하나의 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는 상태 업데이트를 스케줄링하기 때문에
- 이전 상태에 의존하는 방식 대신 내부 함수에서 항상 가장 최신의 상태를 보장받는 가장 안전한 방법으로 사용
Author And Source
이 문제에 관하여(TIL Day-50), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@serim22/TIL-Day-50
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
State
변경될 수 있는 데이터에 사용
데이터의 변경 사항이 사용자 인터페이스에 반영되어야 하는 경우
일반 변수로는 변경된 값을 설정할 수 없음
- React는 처음 한번만 랜딩되고
- state가 등록된 컴포넌트를 재검토
useState를 사용 하는 두 가지 방법
const ExpenseForm = () => {
const [enteredTitle, setEnteredTitle] = useState('')
const [enteredAmount, setEnteredAmount] = useState('')
const [enteredDate, setEnteredDate] = useState('')
}
const titleChangeHandler = event => {
setEnteredTitle(event.target.value)
}
const [userInput, setUserUnput] = useState({
enteredTitle: '',
enteredAmount: '',
enteredDate: '',
})
const titleChangeHandler = event => {
setUserInput({
...userInput, // 현재 값들 복사
enteredTitle: event.target.vlaue // 제목만 업데이트
})
}
const titleChangeHandler = event => {
setUserInput((prevState) => {
return { ...prevState, enteredTitle: event.target.value }
})
}
Author And Source
이 문제에 관하여(TIL Day-50), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@serim22/TIL-Day-50저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)