React의 useState

useState는 Functional Component에 상태 변수를 둠으로써 상태를 관리할 수 있게 해주는 React에서 가장 기본적이고 가장 중요한 후크입니다 .

useState 후크에 대해 자세히 알아보기 전에 먼저 useState뿐만 아니라 거의 모든 후크에 적용될 후크의 기본 사항과 몇 가지 문제를 살펴보겠습니다.

그래서, 후크는 무엇입니까? 이름에서 알 수 있듯이 후크는 React 기능을 "연결"할 수 있는 특수 기능입니다. 함수 구성 요소를 작성하고 일부 상태를 추가하거나 수정해야 할 때 Hooks를 사용할 수 있습니다(이전에는 클래스 구성 요소로 변환하고 this.state를 사용해야 했습니다 ). 따라서 기본적으로 Hooks는 클래스 내에서 작동하지 않습니다. 우리는 클래스를 작성하는 대신 Hooks를 사용합니다. 후크를 작성할 때 기억해야 할 몇 가지 규칙:

후크는 항상 기능적 구성 요소 내부에 작성됩니다.
후크는 모든 구성 요소 렌더링에서 정확히 동일한 순서로 호출되어야 합니다.

이제 useState 후크와 이를 사용하는 방법에 대해 이야기해 보겠습니다.

useState 선언

먼저 다음과 같이 useState를 가져와야 합니다.

useState는 react의 명명된 내보내기이므로 React.useState를 작성할 수도 있습니다.

초기 상태 생성

useState는 단순히 초기 기본 상태를 인수로 전달하고 두 개의 항목이 있는 배열을 반환하는 함수입니다. 배열의 첫 번째 항목은 현재 상태이고 두 번째 항목은 상태를 업데이트할 수 있는 메서드(함수)입니다.

useState에서 반환된 배열을 쉽게 분리하기 위해 우리는 이와 같은 구조화를 사용하고 있습니다.

배열의 구조화 state는 0으로 초기화된 현재 상태이고 setState를 사용하면 상태를 업데이트할 수 있습니다.

useState 후크를 사용하여 객체를 상태 변수로 사용합니다. 그러나 이 경우에는 점 연산자를 사용해야 하는 상태를 작성/업데이트하는 동안 기억하십시오.

객체를 useState에 대한 인수로 전달할 수 있지만 함수 구성 요소에서 여러 useState를 사용할 수 있으므로 각 상태에 대해 개별 useState 후크를 갖는 것이 훨씬 더 일반적입니다.

상태 업데이트 중

useState가 반환하는 두 번째 요소는 상태 변수를 업데이트하기 위해 새 값을 취하는 함수입니다.

다음은 버튼을 사용하여 클릭할 때마다 상태(개수)를 업데이트하는 예입니다.( 여기에서 시도 )

우리는 onClick={increment}를 전달하고 맨 위에 함수를 선언할 수 있었습니다.

prevState를 사용하여 상태를 업데이트함으로써 이전 값을 수신하고 새 값을 반환하는 함수를 전달합니다. 그러나 상태를 업데이트하기 위해 상태를 직접 전달할 수 있다고 생각할 수도 있습니다. 이 예에서는 큰 차이를 만들지 않았지만 상태를 업데이트하는 잘못된 방법입니다. 이유는 다음과 같습니다.

( 여기에서 시도 )

그러면 올바른 출력이 표시됩니다(이전과 동일).

한 번의 클릭으로 카운터가 3배 증가할 것으로 예상하십니까? 그렇지 않습니다!

이는 우리가 함수를 렌더링할 때 count 값이 count 값이기 때문입니다. 기본값을 0으로 설정했기 때문에 항상 1로 표시됩니다. 기본적으로 서로 무시합니다.

그러나 이것은 한 번의 클릭으로 카운터를 3배로 증가시킵니다!

set 함수의 두 번째 버전을 사용하면 이전 값을 사용하는 함수를 전달할 수 있습니다. 따라서 렌더링할 때마다 이전 값이 전달되고 카운터가 3번 증가합니다.

useState의 함수 버전

useState는 값 대신 인수로 함수를 사용할 수도 있으며 해당 함수는 구성 요소가 처음 렌더링 될 때만 실행 됩니다.

이렇게 하면 기본값이 100으로 설정됩니다.

함수는 구성 요소가 렌더링될 때마다 실행됩니다.

결론

useState는 함수 구성 요소에 상태 변수를 가질 수 있게 해주는 후크(함수)입니다. 이 함수에 초기 상태를 전달하면 현재 상태 값(초기 상태일 필요는 없음)이 있는 변수와 이 값을 업데이트하는 다른 함수를 반환합니다. 명심해야 할 몇 가지 사항만 있으면 useState로 시작하는 것이 좋습니다.