이번 포스트는 React의 Hook 중 하나인 useState에 대해서 작성해보려고 한다.

1. state란?

• state는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용한다.
  개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있다.
• state 값이 변경되고 재 렌더링이 필요한 경우에 React가 자동으로 계산하여 변경된 부분을 렌더링 한다.

2. useState란?

• 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었지만, 리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. 이 때 사용되는 Hook이 useState이다. 위에서 말한 state를 만들거나 관리해주는 Hook이다.

3. Counter 예제

• +버튼을 클릭하면 숫자가 증가하고 -버튼을 클릭하면 감소하는 예제이다.
  

• Counter.js 안의 내용이고 App.js에서 사용되는 중이다. 처음에는 state를 사용하지 않고 일반 변수를 사용해 보았다. 화면에는 우측의 UI가 보여진다.

• 증가 혹은 감소 버튼을 클릭하면 변수의 값은 바뀌는 것을 콘솔을 보면 확인할 수 있다. 하지만 UI상에서 변하지 않았다. 그 이유는 숫자가 state가 아닌 일반 변수여서 그렇다. state의 경우 값이 변경되면 화면을 다시 렌더링하지만 일반 변수는 변경되어도 화면을 다시 렌더링하지 않기 때문이다.

• 이번에는 state를 사용해보았다. num은 상태관리를 할 변수, setNum은 num의 값을 변경할 때 사용된다. 그리고 useState의 괄호 안의 값(0)은 num의 초기값이다.

• 결과를 보면 화면에서 잘 변하는 것을 볼 수 있다. 한가지 이상한 것은 콘솔을 보면 num의 이전 값들이 찍히는 것이다. 그 이유는 useState가 비동기적으로 동작하기 때문이다. 그렇기 때문에 먼저 콘솔에 찍히고 그 다음에 증감을 하는 것이다.

• useState의 비동기적 작동을 볼 수 있는 코드이다. 코드를 보면 증감이 2씩 될거라고 생각했으나 1씩 되었다.

• 이번에는 아예 증감이 일어나지 않았다. 그 이유는 공식 문서에 나와있다.
  다음 리렌더링 시에 useState를 통해 반환받은첫 번째 값은 항상 갱신된 최신 state가 됩니다.
• 위의 코드를 해석해 보면 num+1이 실행되고 num+0가 실행된다. 여기서 num값은 둘다 동일한 값이다. 가장 최신 state를 렌더링 한다고 했으므로 1증가와 0증가 중에 가장 최신인 증가를 하게 된 것이다.

• state의 변경시마다 렌더링을 하고 싶다면 위 코드처럼 함수형 업데이트를 사용해주면 된다.
• 함수형 업데이트 방식은 setState를 줄 때 위 코드처럼 어떠한 값을 바로 주는 것이 아니라 함수를 통해서 전달하는 방식이다. 이렇게 하면 2씩 증가한 것을 볼 수 있다.
• 정확히 말하면 1이 증가 후 렌더링, 한번 더 1 증가 후 렌더링, 이렇게 2번 렌더링 했지만 동작이 매우 빠르기에 우리 눈에 2가 증가한 것 처럼 보이는 것이다.

마치며

이번 포스트에서는 React의 Hook 중 하나인 useState 대해서 알아보았다. 다음 포스트에서는 React의 또 다른 Hook 중 하나인 useEffect에 대해서 알아보자.
그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧