React에서 제공하는 useState 리액트 훅이 있다.
useState는 data와 함수(f)를 반환해준다.
그래서 useState를 사용할때는 배열을 사용하여 [데이터, 함수],
즉 예시를 보자면..
let [counter, setCounter] = useState(초기값); 의 형식으로 사용한다.
setCounter 함수는 데이터(값)을 업데이트하고 리랜더링(reRendering)을 일으킨다.
이 코드를 보면 setCounter 함수는 data인 counter를 +1 증가시키고 업데이트 된 값을 리랜더링 (다시 Randering)하여 UI에도 data들을 Update를 시켜준다.
button을 클릭 할때마다(onClick) countUp 함수가 호출되고, 그 함수 안에 있는 setCounter함수도 호출됨으로써 component의 state인 counter가 +1 증가하게 된다.
정리를 하자면,
setCounter 함수를 가지고 state를 변경할 때 Component가 재생성 됀다.이때 새로운 값(update된 값)을 가지고 리랜더링된다.
즉, 데이터가 바뀔때마다 Component를 리랜더링하고 UI를 reflesh한다.
이것이 React가 가지고 있는 큰 장점이다.
**
setCounter함수를 통해 ,state를 세팅하는 데는 2가지 방법이 있다.
1) 직접 할당 :setState(state +1)
2) 함수를 할당:setState(state => state +1)
(state변수명은 아무거나 해도 상관 없음)
(함수의 첫번째 인자는 현재 state 이다)
이전 state값을 기준으로 state값을 설정해야 한다면
2번째 방법(함수를 할당)이 안전함
예제 코드에서는
함수를 할당하는 방법으로 수정할수 있다. (변수명은 상관 X)
