useState

리액트 앱을 만들다보면 useState를 정말 자주 사용하게 된다. 실전프로젝트를 시작하기에 앞서 오늘은 useState에 대해서 알아보자 .

useState는 우리가 state를 관리하기 쉽게해주는 React Hook이다.

const [ number, setNumber ] = useState (0);

위 코드를 설명하자면, const number이라는 변수와 const setNumber이라는 number변수의 state값을 변경할 setter메소드를 선언하는 것이라고 생각된다. 그리고 0은 number변수의 최초 default값이다.
버튼을 만들고 이 버튼을 클릭하면 number이 1씩 두 번 증가하게 해보자.

const addNumber = () => {
  
  const [ number, setNumber ] = useState (0);

  const _onClick = e => {
    setNumber(number => number + 1);
    setNumber(number => number + 1);
    console.dir(number);
  }

return (
		<React.Fragment>
   		 	<button onClick={_onClick}>더하기</button>
    	</React.Fragment>
	)
  
}

2,4,6,8,10 ,... 잘 출력이 된다.
근데 왜 저 setNumber 안에 파라미터로는 화살표 함수로 작성(함수형 업데이트)해야 할까?

const addNumber = () => {
  
  const [ number, setNumber ] = useState (0);

  const _onClick = e => {
    setNumber(number + 1);
    setNumber(number + 1);
    console.dir(number);
  }

return (
		<React.Fragment>
   		 	<button onClick={_onClick}>더하기</button>
    	</React.Fragment>
	)
  
}

위처럼 작성할 경우에는 1,2,3,4,5,... 이런식으로 1씩만 추가한 채로 출력이 된다.whY~?

useState - 비동기, 그리고 batch update

React에서 setState를 사용하여 상태를 업데이트할 경우, 업데이트된 상태는 비동기적 특성 때문에 즉시 반영되지 않는다고 한다. 리랜더링된 후에야 업데이트된 state가 반영된다.
또한 리액트에서는 효율적으로 렌더링 하기위해서 여러 번의 상태값 변경 요청을 배치로 처리한다.
React는 상태 값을 업데이트 할 때 모든 요청에 따라 바로 리랜더링이 되는것이 아니라 변경 사항을 모아서 한번에 일괄 처리(batch update / 배치로 처리)를 한다. 이렇게 일괄적인 업데이트를 통해서 컴포넌트의 렌더링 횟수를 최소화하여 불필요한 렌더링을 방지한다고 한다.

이러한 특성 때문에 바로바로 상태를 업데이트 하기 위해서는 두가지 방법이 있다.

1. useEffect
2. 함수형 업데이트

위에서 보여준
setNumber(number => number + 1);
이 바로 함수형 업데이트 방법이다.