[React] useState (count하기, 비동기)

구현하고자 한것 

 

• useState를 선언합니다.
• 선언한 state는 숫자를 관리하는 state가 되어야 합니다.
• - 버튼을 누르면 숫자가 하나씩 줄어들도록 구현해주세요 (단, 숫자가 1일때는 더 이상 숫자가 내려가지 않게 구현해주세요)
• + 버튼을 누르면 숫자가 하나씩 늘어나도록 구현해주세요
• reset 버튼을 누르면 숫자가 1로 되도록 구현해주세요

 

 

 

 

 

 

함수실행 방법 2가지

 

 

1. ();  만 오는경우  자체가 함수 즉시실행

 

2. () => {}  무언가 인자값을 넘겨줘야 할때 콜백함수를 이용하며, 함수를 나중에 호출해 준다

 

 

 

예시)

 

차이 : 인자값을 넘겨줘야 할때 () => {} 콜백함수를 이용

.

 

 

 

 

 

 

state 가져올때 2가지 방법

 

 

1. setState(state - 1 );        -> 이전값이뭐든 상관없고 그냥 -1 해줘

2. 콜백 : setCount( ( prev) => prev - 1);  ->   이전값이 뭔지 확인하고 -1해줘

 

 

이 있는데, 

 

count 같은 state는 이전값에 따라 값이 바뀌기 때문에 이전값이 아주 중요하다!

 

이것을 '함수형 업데이트' 라고 하며,

 

 

거의..? 콜백함수를 이용하는 방법을 모두 선호하긴한다고한다!!!!!

 

 

나도이제 저거쓸꺼다!..!

 

 

 

prev 는 변수이기 때문에 어떤 이름이든 이용 가능!!  

 

 

 

 

 

state에 관해서 강의를 듣다가, useState의 setState는 존재자체로 비동기 성격을 가진다고 하셨다. 

 

 

 

 

비동기 : 시간이 걸린다.  

 

 

 

원래 위에서 부터 컴퓨터가  아래로 코드를 읽고 해석한다면 비동기 함수는 차례대로가 아닌 나중에 실행되는것.

 

 

이렇게 함수 안 과 밖 에 console.log 를 찍어서 확인해보면

 

함수안에서는  -1된 값이 바로 적용이 안된다. 

 

이유 :  setCount라는 값에 적용이 되기까지 시간이 걸려서 그렇다. set뒤에는 재 랜더링이됨. =다시그림을 그린다. 

 

 

컴퓨터가 다시 위에부터 읽어서 함수 밖에 있는 console.log(함수 밖) 이 

 

렌더링이 다시될때 함수 밖에 있는 것이 다시 호출되어 두번찍히게 된 것이다. 

 

 

handleMinus 라는 함수가 실행이 되었을때 그제서야 console.log('함수안') 이 실행되는것을 확인할 수 있었다.

 

 

얘는 그냥 처음부터 그냥 비동기적 성격을 띄는애다..

 

 

 

원하고자 하는 기능이 되게 만든 코드

 

 그러나 여기서 멈추지 않지..

 

 

 

 

여기서 쓰인 minusCount와 plusCount 두 함수를 가독성 을 위해 합쳐보았다..

 

 

 

일단 접근할 때, + 아니면 - 이렇게 두가지 조건이 나오는데,

 

 

이럴 때 많이 쓰이는 방법은 boolean (true, false) 이다.

 

 

나는 setCount가  ture 일때  count +1 이 될 수 있도록 삼항연산자를 사용하여 함수를 구현하였다. 

 

 

 

 const handleCount = (event) => {
    setCount((count) => (event ? count + 1 : count - 1));
  };

  return (
    <div className="count">
      <div className="countInput">
        <button onClick={() => handleCount(false)}>-</button>
        <div className="countInputText">{count}</div>
        <button onClick={() => handleCount(true)}>+</button>
      </div>
      <button className="resetBtn" onClick={resetCount}>
        reset
      </button>
    </div>
  );

 

 

 

 

 

* 수량이 1 이하로 내려가지 않도록 설정하고 싶을 때 

const minusCount = () => {

if(count > 1 ){

setCount((count)=> count-1)

}

}


count >1 && setCount((count)=>count-1);

 

 

 

 

* reset을 눌렀을때 다시 초기화 되도록하기 

const resetCount = () => {
    setCount(1);
  };

 

초기값으로 다시 되돌리기 :) !! 성공

 

 

state를 쓴 함수 식을 간결하게 쓸 수 있게되어 너무 보람찬 이번 보충수업 :) 짱짱