[React]State 사용해보기-1

니꼬쌤 강의를 본격적으로 정리하기 전에 state는 어떤식으로 작동하는지에 대해 알아보자.

앱이 state를 바꾸는 법

1. setCounter를 이용하여 원하는 값 넣어주기

-> 새 setCounter를 설정하여 새 값으로 변경

function App(){
	const [counter, setCounter] = React.useState(0)
    const onClick = () => {
    	setCounter(123)
    }
}

2. 이전 값을 이용하여 현재 값을 계산하기

function App(){
	const [counter, setCounter] = React.useState(0)
    const onClick = () => {
    	//setCounter(counter + 1)
		setCounter((current) => current + 1)
    }
}

• setCounter(couter + 1)
  counter state를 이용해 새로운 counter state를 계산하고있다.
  그러나 이 코드는 다른곳에서 update가 될 수 있기 때문에 좋은 방법은 아니다.

• setCounter((current) => current + 1)
  위처럼 예상치 못한 업데이트로 인한 혼동을 방지하기 위한 방법이다.
  리액트에서는 사용자가 원하는 값으로 계산할 수 있도록 current가 확실한 현재 값이라는 것을 보장하고 있기 때문에 더 안전한 코드라고 볼 수 있다.

다음 포스팅에서 사용자들의 input 얻는법, form을 만들었을때 state는 어떤식으로 작용하는지에 대해 알아보도록 하자.