react.useState()는 데이터를 업데이트하는데 이용함!!

데이터가 바뀔 때마다 render() 함수를 호출하는 것은 귀찮음

counter 값을 증가시킬 때마다 리렌더링

초기 컴포넌트가 초기 데이터로 렌더링,

버튼을 클릭하면 리렌더링하려면 useState()를 사용한다.

 

const data = react.useState();

console.log(data) 하면

[undefined, f]가 표시된다.

undefined와 function을 주는데

undefined가 초기 값이고, function이 상태 지정 함수이다.

 

구조분해 할당을 통해

const [counter, setCounter ] = React.useState(0)로 표시한다. 

 

클릭하면 버튼이 업데이트되도록 버튼에 이벤트 리스너를 추가한후

<button onClick = {onClick}>Click me</button>

 

함수를 만들어주는데, 위에서 상태지정함수인 setCounter를 이용해준다.

const onClick = () => {

setCounter(counter+1);

}

 

데이터가 바뀔 때마다 컴포넌트를 리렌더링하고 UI를 refresh함!!

state가 바뀔때마다!!

 

참고로

 

const onClick = () => {

   setCounter(counter+1)}이라고 해도 되지만

 

const onClick = () => {

   setCounter((current) => current+1)}이라고 하는게 더 안전함!

 

현재 state를 바탕으로 다음 state를 사용하고 싶으면 함수를 사용해야 함.

바로 특정 값으로 하려면 setCounter(5)라고 하면 됨.