useState 이해하기

리액트를 하면서 가장 많이보고, 쉽게 접근 할 수 있는 react hook이 useState 이지 않을 까 생각한다.
우선 useState의 형식을 보면은 아래와 같다.

    const [data, setData] = useState() // 기본 형식

구조분해할당으로 되어있는데 이것은 "무조건" 위의 형식과 같게 해야한다. 그게 규칙이다.
첫 번째의 data에는 상태 초기값이 들어가고 setData에는 data의 상태가 변경될 수 있는 함수가 들어간다.

아래의 예제를 통해 이해해보자.

    export default function Counter() {

      const [count, setCount] = useState(0) // count의 초기값을 0 으로 설정

      return(
          <button>감소</button> // count를 감소하는 버튼
        <h2>{count}</h2> // count의 상태값
        <button>증가</button> // count를 증가하는 버튼
      )
    }

Counter라는 컴포넌트가 있고 그 안에는 숫자를 증가,감소할 수 있는 버튼들이 있다.
여기에서 현재 count의 초기상태는 0으로 설정하였기에, 웹에서 확인을 하면 0 으로 표시가 될 것이다.
여기에서 감소 또는 증가하는 버튼에 useState에서 count의 상태를 변경하는 함수인 "setCount" 를 통해 count의 상태를 변경할 수 있다.

    export default function Counter() {

      const [count, setCount] = useState(0) // count의 초기값을 0 으로 설정

      const btnDownNumber = () => {
        setCount(count - 1) // count의 상태 즉, 현재 초기값이 0 이니 -1을 하여 감소가 됨
    }

      const btnUpNumber = () => {
        setCount(count + 1) // count의 상태 즉, 현재 초기값이 0 이니 +1을 하여 증가가 됨
    }

      return(
          <button onClick={btnDownNumber}>감소</button> // count를 감소하는 버튼
        <h2>{count}</h2> // count의 상태값
        <button onClick={btnUpNumber}>증가</button> // count를 증가하는 버튼
      )
    }

onClick event를 통해 각각의 버튼에 맞는 함수를 넣었다. 이렇게되면 감소버튼을 누르게 된다면 초기값이 0 인 상태에서 count의 상태를 변경하기 위한 함수 setCount를 통해 count (0) 에서 - 1을, 반대로 증가버튼을 누르게되면 현재상태값에서 setCount를 통해 현재 count의 값에서 + 1 을 하게된다. 여기서 만약에 초기화 시키는 버튼이 있으면 좋겠다? 라고 생각이 든다면

    const btnReset = () => {
        setCount(0)
    }

setCount를 통해 count의 상태값을 0 으로 초기화를하는 함수를 만들어 추가하면 된다.
그리고 좀 더 가독성 좋게하기 위해서는 사실 onClick에서 한줄로 처리 할 수도 있다.

    export default function Counter() {

      const [count, setCount] = useState(0) // count의 초기값을 0 으로 설정

      return(
          <button onClick={()=> setCount(count - 1)} >감소</button> // count를 감소하는 버튼
        <h2>{count}</h2> // count의 상태값
        <button onClick={()=> setCount(count + 1)}>증가</button> // count를 증가하는 버튼
        <button onClick={()=> setCount(0)}>초기화</button> // count를 초기화하는 버튼
      )
    }

개인적으로는 위의 방식이 좀 더 가독성이 좋다고 생각하지만, 현재는 트레이닝의 과정으로 함수를 통해 관리하는 것이 좀 더 좋아보인다.