반응 후크: useState

이번 주 Lambda 학생들은 React를 배우고 있습니다! 학생들이 혼란스러워하는 영역 중 하나는 useState가 무엇입니까?

저는 결혼한 지 12년이 되었습니다. 오래된 관계 문제는 무엇을 먹을지 결정하는 것입니다. 😂


그래서 저는 남편과 제가 저녁에 무엇을 먹어야 할지 결정하는 데 도움이 되는 간단한 음식 앱을 만들었습니다. 그리고 여러분 모두가 useState를 이해하도록 돕기 위해 🎉

기사 전체에서 이 CodeSandBox를 참조할 것입니다.

useState란 무엇입니까?

useState는 함수 구성 요소에 React 상태를 추가할 수 있는 Hook입니다.
여기서 "activeFood"라고 하는 새 상태 변수를 선언합니다.

const [activeFood, setActiveFood] = useState(0);

사이드 노트
위의 JavaScript 구문을 "array destructuring"이라고 합니다.
이것은 우리가 두 개의 새로운 변수 activeFood와 setActiveFood를 만든다는 것을 의미합니다. 여기서 activeFood는 useState에 의해 반환된 첫 번째 값으로 설정되고 setActiveFood는 두 번째 값입니다.

다음 코드와 동일합니다.

  var foodStateVariable = useState(0); // Returns a pair
  var activeFood = foodStateVariable[0]; // First item in a pair
  var stActiveFood= foodStateVariable[1]; // Second item in a pair

그렇다면 useState는 무엇을 할까요?

이 경우에는 activeFood라는 이름의 "상태 변수"를 선언합니다. 다른 변수와 마찬가지로 원하는 대로 이름을 지정할 수 있습니다.
React 상태 변수는 보존됩니다. 함수가 종료될 때 일반적으로 사라지는 것처럼 사라지지 않습니다.

useState에 인수로 무엇을 전달합니까?

당 React Docs:
useState() 후크에 대한 유일한 인수는 초기 상태입니다. 클래스와 달리 상태는 객체일 필요가 없습니다.

여기서는 변수의 초기 상태로 0을 전달합니다.

useState는 무엇을 반환합니까?

현재 상태(우리의 변수 activeFood)와 이를 업데이트하는 함수(setActFood)라는 값 쌍을 반환합니다. 이것이 우리가 const [activeFood, setActiveFood] = useState(0); 이 앱에서는 사용자가 버튼을 클릭할 때 다른 함수인 randomFood를 사용하여 setActiveFood를 무작위로 지정합니다.

내가 한 일을 검토해 봅시다.

1행: React에서 useState 후크를 가져옵니다. 함수 구성 요소에서 로컬 상태를 유지할 수 있습니다.

36행: Card 구성 요소 내에서 useState 후크를 호출하여 새 상태 변수를 선언합니다.
그것은 우리가 이름을 부여하는 한 쌍의 값을 반환합니다.
표시될 음식이기 때문에 변수를 activeFood라고 합니다.
유일한 useState 인수로 0을 전달하여 0으로 초기화합니다.
두 번째로 반환되는 항목은 그 자체로 함수입니다. 이를 통해 activeFood를 업데이트할 수 있으므로 이름을 setActiveFood로 지정합니다.

48행: 사용자가 클릭하면 setActiveFood 함수를 무작위화하는 randomFood 함수를 호출합니다. 그런 다음 React는 Card 구성 요소를 다시 렌더링하여 새 activeFood 값을 전달합니다.