버튼 만들기 (2)

state는 useState라는 함수를 통해 만든다.

이 함수는 리액트에서 제공해준다.

 

state는 같은 이름의 변수로 재 할당 되는 것을 막기 위해 const사용

 

리액트에서 제공해주는 (필요한)유용한 함수들을 react hook이라 부른다.

react hook 중 하나가 useState이다.

 

 

클릭을 해도 반응이 없다.

0은 일반변수

일반변수라서 안바뀜

여기서 state를 사용해야 

 

useState(0)

매개변수: 초기값

 

배열을 반환

첫번째: 초기 값이 담긴 state

두번째: state값을 변경해주는 함수

 

state 값을 바꿀 때 변수 바꾸는 것처럼 바꿀 수 없다.

=(equal) X

함수 O

 

함수를 통해서만 바꾸기 가능

 

 

setCounter2()함수를 이용해서만 counter2값을 바꿀 수 있다.

 

 

 

 

UI에 보여줘야하는 값은 state로 만들어야 함.

counter는 계속 1이다. 아까는 1,2,3.... 잘 증가 했는데 왜 이젠 1이지?

한번 클릭했으니 counter는 1이지

왜 counter2는 0이지? UI에는 1인데?

-- react state를 다룰 때 제일 헷갈리는 부분!

state를 바꾸면(가 바뀌면) UI가 다시 렌더링된다.(다시 그려줌) -- 이 작업이 비싸다.(UI를 바꿔주는 것 모두)

setCounter2()할때 바로 바뀌는게 아니라... 바뀌는데에 시간이 걸린다.- 비동기적으로 동작!(한다.)

setCounter2()는 함수가 다 끝나야 실행이 된다. state를 바꾸는 함수들을 모아놨다가 함수가 끝나면 차근차근 실행(된다.)

따라서 counter2는 전의 값이다.(변하지 않은) - 왜냐하면 state를 바꾸는 함수는 비동기적으로 작동하기 때문에 

set 함수를 하고 바로 그 state를 이용하면 계속 그 전의 값이 나온다.

 

 

변수는 값을 바꾸면 바로  (확인할 수 있다) 적용이 되지만 - -변수는 동기적으로 작동 , 비용이 적

but, state 바꾸는 것은 조금 비싸다.

따라서 state를 바꾸는 함수가 바로 실행이 되는(바로 바꾸는)게 아니라 함수가 끝날 때까지 기다렸다가 state를 바꾸는 함수들을 모아서 한번에 실행!

---console.log를 해도 값이 바뀌지 않는다. 왜냐하면, 비동기적으로 작동하기 때문!

 

counter는 계속 1이네?

counter는 동기적으로 작동한다면서...counter는 항상 증가한다면서...

 

state를 바꾸는 순간 re 랜더링 =  컴포넌트를 다시 실행한다.(그려준다)

다시 (함수의)처음으로 가서 counter를 0으로 초기화 시킨다.

state값 (setCounter) 초기화가 안된다. 왜냐하면 리액트가 주시하고 있는 값

state같은 경우에는 그 전의 값을 기억해둔다.

 

변수는 주시하지 않는다. 따라서 component가 랜더링 되면(컴포넌트가 다시 그려지면) 변수의 값이 다시 초기화가 된다.

 

<알고리즘 과정>

1. 유저가 증가하기 버튼('클릭')을 클릭한다.

2. counter+1해서 1이 된다.

3. setState 함수를 호출한다.

4. console.log가 실행된다.

(5). 변수 값은 1로 보이고 state 값은 아직 안변했기 때문에 그 전의 값이 보인다.

6. 함수 끝!

7. 앱이 다시 re render가 된다.

8. let counter = 0 을 거치면서 counter 값은 다시 0으로 초기화가 된다.

9. 업데이트 된 state값이 보이고 다시 render를 한다. 그리고 완료가 된다.

 

변수는 re render 될 때마다 초기화가 된다.

state 값은 비 동기적으로 처리된다.

 

<알고있어야 한다>

대부분, 왠만한 거에는 다 state를 쓸거야

잠깐 기억해야하는, 담아 놓아야 하는 값만 변수를 쓸거야