[노마드/ReactJS 영화 웹 만들기] - Ch03 | 4. State Functions

State Functions

state를 세팅하는 데는 2가지 방법

1. 직접 할당 :setState(state +1)
2. 함수를 할당:setState(state => state +1) (함수의 첫번째 인자는 현재 state 이다)
   • 현재 state랑 관련이 없는 값을 새로운 state로 하고싶은 경우 - 첫번째 방법 사용
   • 현재 state에 조금의 변화를 주어서 새로운 state를 주고 싶은 경우 - 두번째 방법 사용

function App() {
    let [counter, setCounter] = React.useState(0);
    const countUp = () => {
        // setCounter((counter += 1));  //현재 값을 가지고 계산 해야한다면 이 방법보다 함수를 사용하는게 좋음
        setCount((current) => courrent + 1); //현재 state를 바탕으로 계산하고 싶다면 이 방법! 예상치 못한 업데이트 방지
    };
    return (
        <div>
            <h3 id="main-title">클릭 횟수:{counter}</h3>
            <button id="new-btn" onClick={countUp}>
                카운트 올리기
            </button>
        </div>
    );
}

함수로 넣을지 값으로 넣을지?

setCounter()에 값으로 넣을지 함수로 넣어줄지가 헷갈린다면 onClick 함수안에 여러번 넣어서 테스트해보는 것이 이해가 빠르다.

1. 값으로 여러번

function onClick() {
setCounter(counter + 1);
setCounter(counter + 1);
setCounter(counter + 1);
setCounter(counter + 1);
setCounter(counter + 1);
}

2. 함수로 여러번

function onClick() {
setCounter(current => current+ 1);
setCounter(current => current+ 1);
setCounter(current => current+ 1);
setCounter(current => current+ 1);
setCounter(current => current+ 1);
}

1번으로 돌렸을 경우 - setCounter를 몇번을 호출해도 한 번만 실행된다. (counter가 1만 증가)
2번으로 돌렸을 경우 - setCounter가 호출된 만큼 counter가 증가된다.

 

setState 함수에 current라고 해도 작동 되는 이유

setState의 인자값이 객체인지 함수인지 판별하는 부분이 있다. 함수일 경우 저장되어 있는 값(객체)을 인자로하여 리턴한 값을 최종적으로 업데이트 한다. 확인하시고 싶다면, react-dom.development.js 15228 번째 라인을 확인할 수 있다. (v17.0.2)

 

 

 

깃허브 자료

GitHub - Seogun95/Movie-web-servic-ReactJS: ReactJS로 영화 웹 서비스 만들기 노마드 코더 클론 코딩