React Hooks 재검토: useState

아마도 처음 접하게 될 후크 중 하나는 useState 이며, 이는 클래스 구성 요소에서 상태를 업데이트하는 데 사용되는 setState() 함수를 대체합니다. 그러나 여기서 가장 큰 차이점은 useState 함수 구성 요소가 하나의 모놀리식 개체와 달리 여러 상태 값을 가질 수 있다는 것입니다. 아래 스니펫은 이 아이디어를 보여줍니다(아래에서 다룰 것이므로 구문에 대해 걱정하지 마십시오).

// Class component state
class Cart extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      apples: 10,
      oranges: 25,
      peaches: 40,
    }
  }
}

// Function component using hooks
function Cart(props) {
  const [apples, setApples] = useState(10)
  const [oranges, setOranges] = useState(25)
  const [peaches, setPeaches] = useState(40)
}

너무 미친 거 아니야, 그렇지? 이 예에서 모든 값은 숫자이지만 useState에 저장된 값은 다음을 포함한 모든 JavaScript 유형이 될 수 있습니다.

문자열

부울

개체

어레이

숫자

null

useState의 해부

앞의 예 중 하나를 가져와 조금 더 자세히 살펴보겠습니다.

const [apples, setApples] = useState(10)

먼저, 이 표현의 오른쪽에서 무슨 일이 일어나는지 봅시다. 여기에서 10 값이 useState 후크에 유일한 인수로 전달됩니다. 이것은 초기 값을 10 로 설정합니다.

할당의 왼쪽에서 useState 에서 반환된 두 값을 배열로 분해합니다: apples 및 setApples . 첫 번째(즉, apples )는 이 상태의 현재 값을 나타냅니다. 이 경우 값은 10 입니다.

배열의 두 번째 값(즉, setApples )은 apples 를 호출하여 setApples(200) 값을 업데이트할 수 있는 setter 함수입니다.

기술적으로 이러한 setter 함수에 원하는 이름을 지정할 수 있지만 일반적인 규칙은 값 이름 앞에 apples를 추가하는 것입니다(예: 200 ).

실제로

하나가 아닌 여러 상태를 갖는 정신 모델을 더 잘 설명하기 위해 전자 상거래 카트의 단순화된 버전을 만들었습니다.

첫 번째 인스턴스는 사용자 장바구니에 몇 개set, setApples 및 useState가 있는지 수량 값을 관리하기 위해 세 개의apples 후크를 사용하는 함수 구성요소입니다. 두 번째는 여전히 oranges 를 사용하는 클래스 구성 요소입니다.

보시다시피 두 구성 요소는 동일한 작업을 수행합니다. 사용자가 원하는 각 항목의 수를 추적하고 버튼 누름에 따라 해당 값을 증가/감소시킵니다.



코드를 살펴보고 어떤 것을 선호하는지 확인하십시오. 후크가 아직 생소할 수 있지만 후크를 사용하여 얻을 수 있는 이점이 있습니까?