[React] - useState

useState를 통해 컴포넌트에서 바뀌는 값 관리하기

useState

• useState를 이용하여 사용자 인터랙션에 따라 동적으로 값이 변하는 것을 구현해 보겠습니다.
• 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었습니다.
  리액트 16.8에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다.
• useState라는 함수가 리액트의 Hooks 중 하나입니다.
• 우선 화면 구성을 위해 Counter.js 파일을 만들어 보겠습니다.

• <div>태그 안에 <h1> 태그와 <button> 태그를 이용하여 화면을 구성해 봤습니다.
• App.js에서 Counter.js를 렌더링 하기 위해 App.js를 수정해 보겠습니다.

• 실행 시켜 보면

• 이런 UI가 보여지게 됩니다.

---

이벤트 설정

• 이제 Counter.js에서 버튼이 클릭되는 이벤트가 발생 했을 때, 특정 함수가 호출되도록 설정해 보겠습니다.

• 여기서 onIncrease와 onDecrease는 화살표 함수를 사용하여 구현을 했습니다.
  * 화살표 함수란 function 키워드 대신 => 문자를 사용해서 함수를 구현한 것입니다.
  화살표 좌측에는 함수의 파라미터, 화살표 우측에는 코드 블록이 들어오게 됩니다.
• 함수를 만들고, button의 onClick 이벤트로 각 함수를 연결해 주었습니다. 리액트에서 엘리먼트에 이벤트를 설정해 줄 때는 on이벤트 이름 = {실행하고 싶은 함수} 형태로 설정해 주어야 합니다.
• 여기서 주의할 점은, 함수 형태를 넣어주어야 하지 함수를 다음과 같이 실행하면 안됩니다.
  onClick={onIncrease()}
  이렇게 렌더링 되는 시점에서 함수가 호출되기 때문입니다. 이벤트를 설정할 때는 함수타입의 값을 넣어주어야 한다는 것을 주의하시면 됩니다.
• 코드를 실행하고 버튼을 클릭해보면

• 검사 페이지의 콘솔창에서 변화를 확인할 수 있습니다. +1 버튼을 클릭하면 +1일 출력되고 -1 버튼을 클릭하면 -1일 출력됩니다.

---

동적인 값 얹기, useState

• 컴포넌트에서 동적인 값을 상태(state)라고 부릅니다. 리액트에 useState라는 함수로 상태를 관리할 수 있습니다.
• Counter.js를 수정해 보겠습니다.

• import React, { useState } from "react" 를 추가해 주어야 useState 함수를 사용할 수 있습니다.
• const [number, setNumber] = useState(0);
  useState를 사용할 때는 상태의 기본값을 파라미터로 넣어서 호출해 줍니다. 이 함수를 호출해 주면 배열이 반환하게 되는데, 여기서 첫번째 원소는 현재 상태, 두번째 원소는 setter 함수입니다.
  원리는,
  const numberState = useState(0);
  const number = useState[0];
  const setNumber = numberState[1];
  
  배열 비구조화 할당을 통하여 각 원소를 추출해 준 것입니다.
  
  const onIncrease = () => {
       setNumber(number + 1);
  }
  
  const onDecrease = () => {
       setNumber(number - 1);
  }
  
  Setter 함수는 파라미터로 전달 받은 값을 최신 상태로 설정해 줍니다
  
  <h1>{number}</h1>
  h1 태그에서는 이제 0이 아닌 {number} 값을 보여주게 됩니다.
  코드를 수정하고 버튼을 클릭하면 number부분이 변하는 것을 확인할 수 있습니다.

---

함수형 업데이트

• 지금은 Setter 함수를 사용할 때, 업데이트 하고 싶은 새로운 값을 파라미터로 넣어주고 있습니다.
  그 대신에 기존 값을 어떻게 업데이트할지에 대한 함수를 등록하는 방식으로 값을 업데이트할 수 있습니다.

• onIncrease와 onDecrease에서 setNumber를 사용할 때 그 다음 상태를 파라미터로 넣어준 것이 아니라, 값을 업데이트 하는 함수를 파라미터로 넣어주었습니다.
  함수형 업데이트는 주로 나중에 컴포너트를 최적화를 하게 될 때 사용하게 됩니다.