[리액트 ] useState

useState

버튼을 클릭할 때마다 count가 증가되는 코드를 만들어보겠습니다. 

버튼 클릭할 때마다  ui가 업데이트 되게 하려면 state를 씁니다.

state는 일반 변수 만드는 것처럼 만들지 않습니다.

1. import :  import React, {useState} from 'react';    를 import 해줍니다.

2. useState 생성 : const [count2, setCount2] = useState(0)

useState(0) 에서 0은 초기값입니다. useState(5)라고 하면 5가 초기값이 됩니다.

return부분에 state:{count2} 라고 쓰면 서버에 state:5라고 나타납니다.

 

useState라는 함수는 array를 반환합니다. array에는 아이템이 두가지 들어있습니다.

하나는 초기값을 담고있는 state변수 count2, 다른 하나는 state의 값을 업데이트 해주는 변수 setCount2 입니다.

그러나 이 상태에서는 증가 버튼을 눌러도 카운팅이 되지 않습니다.

위 코드와 같이 setCount2를 이용해 카운팅 할 수 있습니다.

이를 통해 state가 업데이트 되면 ui가 업데이트 된다는 것을 알 수 있습니다.

 

State의 속성

1. State는 한박자씩 늦는다

2. State 값이 업데이트 되면 변수의 값은 다시 초기화됩니다.

3. State의 값은 리액트에 저장이 되어 있습니다.

 

state의 속성을 확인하기 위해 console창을 변경해보겠습니다. 

아래 코드와 같이 console에 count2를 추가해봤습니다.

다음은 서버의 콘솔창입니다.

서버에서 증가 버튼을 클릭하면 콘솔창에 다음과 같이 뜨게됩니다. 

Q1. 왜 state의 값은 버튼에 숫자에 비해 한박자씩 늦을까?

-> state가 업데이트되면 소속되어 있는 App 함수가 끝나면 처리하게 됩니다. 다시말해, 비동기적입니다.

따라서 setCount를 바꿨다고 바로 밑에 있는 콘솔 로그에 바뀐 값이 찍히지 않게 됩니다.

함수가 끝나면 실행되고 ui를 그려주게 되기 때문입니다.

그래서 console 창에는 한박자 전의 값에 출력되게 됩니다.

Q2. count 값은 왜 계속 1일까?

state값을 업데이트 할 대마다 function App을 다시 실행시키게 됩니다. 이렇게 function을 다시 실행 시키니까

let count = 0 도 다시 실행되게 됩니다. 다시 말해, 실행할 때마다 count값이 0이 되게 됩니다.

0인 상태에서 count +1을 한들 1이 되고, 이것이 반복되어 count값이 계속 1이 되게 됩니다.

여기서 기억할 것은 변수는 기존의 값이 저장 되지 않으므로, state값이 업데이트가 되면  변수의 값은 다시 초기화가 된다는 사실입니다.