react state

useState
리액트 훅이다.
컴포넌트가 다시 호출되는 곳에서 변경된 값을 반영하기 위해 한다.

값이 변동되는 컴포넌트

const [title, setTitle] = useState(props.title)

useState안에 초기값을 넣는다

title은 초기값
setTitle은 함수가 나온다
setTitle('hi!')
이렇게 사용하며 값을 업데이트하고 컴포넌트를 재실행하게 하여 화면을 업데이트한다.

같은 컴포넌트를 사용해서 여러 개를 만들었다고 해도 각 독립된 state를 가진다.

한 컴포넌트 안에서도 여러 state를 가질 수 있다.

const [enteredTitle, setEnteredTitle] = useState('')
const [enteredAmount, setEnteredAmount] = useState('')
const [enteredDate, setEnteredDate] = useState('')

이런 여러개의 state를

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

이렇게 한번에 관리 가능하게 할 수 있다.
이렇게 관리하면 이전 state에 의존적이게 된다.

setUserInput({
            ...userInput,
            enteredTitle: event.target.value
        })

이렇게 수정 가능한데

setUserInput((prevState) => {
            return { ...prevState, enteredTitle: event.target.value }
        })

이게 옳게된 방식이다.
최신 state를 안전하게 유지하는 방법이다.
이전 상태에 의존하는 state를 짤때는 이런 형식으로 짜보자

양방향 바인딩

const [enteredTitle, setEnteredTitle] = useState('')

<input type='text' value={enteredTitle} onChange={titleChangeHandler} />

이렇게 value에 초깃값을 넣어놓고

form이 제출될 때

setEnteredTitle('')

이렇게 값을 넣어주면 form을 다시 깨끗하게 할 수 있다.