상태란 무엇입니까?
useState 훅에 대해 자세히 알아보기 전에 먼저 용어를 이해합시다. (주).
상태는 특정 시점의 정보를 나타냅니다.
예를 들어 텍스트 상자를 생각해 봅시다.
처음에는 이 텍스트 상자 안에 아무 것도 없으므로 상태는 다음과 같습니다. 빈. 텍스트 상자의 상태가 변경될 때마다 키 입력에 대해 Hello를 입력하기 시작했다고 가정합니다. 처음에는 "H", 그 다음에는 "He", "Hel" 등으로 "Hello"가 될 때까지 계속됩니다.
또한 입력할 때 이전 값이 손실되지 않습니다. "H" 다음에 "e"를 누르면 "e"가 아니라 "He"가 표시됩니다. 다시 말해 상태를 다음과 같이 생각할 수 있습니다. 기억 텍스트 상자의.
React 구성 요소에서 상태가 필요합니다.
예제의 도움으로 이것을 이해합시다.
여기에 우리는 클릭 카운터 증가 버튼을 클릭한 횟수를 표시하는 구성 요소입니다.
우리는 지역 변수 "카운터" 클릭 수를 유지합니다.
증가 버튼을 클릭할 때마다 핸들 클릭 함수가 호출됩니다. 이 기능은 카운터 값을 1 증가시키고 콘솔에 값을 기록합니다.
CodeSandbox 미리보기에서 Increment 버튼을 클릭합니다.
아무 일도하지?
글쎄요 우리 논리가 맞는 것 같습니다. 콘솔(CodeSandbox)에 기록된 값은 클릭할 때마다 올바르게 업데이트되지만 이 업데이트가 UI에 반영되지 않는 이유는 무엇입니까?
React가 작동하는 방식 때문입니다.
- 지역 변수를 변경해도 다시 렌더링되지 않습니다.
- 다시 렌더링하는 동안 구성 요소가 처음부터 생성됩니다. 즉 구성 요소의 기능(이 예에서는 ClickCounter 기능)이 다시 한 번 실행됩니다. 변수(예: 카운터)는 함수에 대해 로컬이므로 이전 값이 손실됩니다.
그렇다면 컴포넌트가 렌더링 사이의 값을 기억하도록 하려면 어떻게 해야 할까요?
네, 맞습니다! 우리는 의 도움으로 이것을 합니다 사용 상태 훅.
useState 후크
useState 후크는 상태를 유지하고 다시 렌더링을 트리거하는 메커니즘을 제공합니다.
그 사용법을 살펴보자.
import React, { useState } from "react";
const state = useState(initialValue);
// OR
const state = React.useState(initialValue);
useState 후크는 다음 두 항목을 포함하는 배열을 반환합니다.
- A 상태 변수 다시 렌더링하는 동안 값을 유지합니다. useState에 전달된 초기 값은 첫 번째 렌더링 중에 상태 변수에 할당됩니다.
- A 세터 기능 상태 변수를 업데이트하고 다시 렌더링을 트리거합니다.
const state = useState(0);
const data = state[0];
const setData = state[1];
사용 배열 구조화 , 우리는 아래와 같이 위의 명령문을 단일 명령문으로 리팩토링할 수 있습니다.
const [data, setData] = useState(0);
useState에 전달된 초기 값은 첫 번째 렌더링 중에만 사용됩니다. 재렌더링의 경우 무시됩니다.
useState가 있는 카운터
이제 useState 후크를 포함하도록 이전 카운터 예제를 업데이트하겠습니다.
- 재렌더링 사이에 카운터 값이 필요하므로 상태로 변환해 보겠습니다.
const [counter, setCounter] = useState(0);
- handleClick 함수 내에서 setCounter를 호출합니다.
const handleClick = () => {
setCounter(counter + 1);
console.log(`%c Counter:${counter}`, "color:green");
};
setCounter 함수는 카운터 값을 1씩 업데이트하고 다시 렌더링을 트리거합니다. 다시 렌더링할 때 구성 요소의 함수가 호출되면 useState에 의해 반환된 상태 변수는 업데이트된 값을 갖습니다.
업데이트된 코드로 CodeSandbox를 사용해 보십시오. Increment 버튼을 클릭하고 작동 중인 useState의 마법을 확인하십시오.
다시 렌더링할 때 기능 구성 요소가 클릭 카운터 콘솔 로그를 보고 다시 호출됩니다. 구성 요소의 시작 부분에 추가된 "ClickCounter 시작" 로그는 각 렌더링에 기록됩니다.
업데이터 기능
클릭할 때마다 counter 값을 4씩 늘리고 싶다고 가정합니다.
const handleClick = () => {
setCounter(counter + 1);
setCounter(counter + 1);
setCounter(counter + 1);
setCounter(counter + 1);
console.log(`%c Counter:${counter}`, "color:green");
};
counter의 초기 값이 0이라고 가정합니다. 버튼을 클릭하면 무엇을 볼 것으로 예상합니까?
카운트가 4일 거라고 예상하셨죠? 그런데 왜 1이 보이나요?
a) 각 렌더링은 상태와 연결됩니다. 해당 상태의 값은 해당 렌더링의 수명 동안 잠긴 상태로 유지됩니다.
handleClick 함수 내부의 로그는 카운터 값을 0으로 인쇄합니다.
setCounter 메서드를 몇 번이나 호출해도 counter 값은 동일하게 유지됩니다.
const handleClick = () => {
setCounter(counter + 1);
setCounter(counter + 1);
setCounter(counter + 1);
setCounter(counter + 1);
console.log(`%c Counter:${counter}`, "color:green");
};
b) 이벤트 핸들러 내부의 모든 코드가 실행될 때까지 React는 다시 렌더링을 트리거하지 않습니다.
이러한 이유로 각 setCounter 호출은 개별 렌더링을 트리거하지 않습니다. 대신 React는 이러한 setter 함수를 대기열에 추가합니다. 대기열에 있는 순서대로 실행합니다. 모든 명령문을 실행한 후 상태에 대한 업데이트는 다음 렌더링에 반영됩니다. 이러한 여러 상태 업데이트의 대기열은 다음과 같이 알려져 있습니다. 배치. 이를 통해 React의 성능을 높일 수 있습니다.
따라서 여기에서는 4개의 다른 렌더 대신 단일 렌더를 얻습니다.
이 예제는 간단하며 아래와 같이 코드를 업데이트하여 이 문제를 해결할 수 있습니다.
const handleClick = () => {
setCounter(counter + 4);
console.log(`%c Counter:${counter}`, "color:green");
};
그러나 다음 렌더링 전에 상태를 여러 번 업데이트하려는 사용 사례가 있다면 어떨까요?
그곳은 _ 업데이터 _ 기능이 편리합니다.
다음과 같이 업데이터 기능을 사용하여 이전 예제를 리팩토링할 수 있습니다.
const handleClick = () => {
setCounter(prevCounter => prevCounter + 1);
setCounter(prevCounter => prevCounter + 1);
setCounter(prevCounter => prevCounter + 1);
setCounter(prevCounter => prevCounter + 1);
console.log(`%c Counter:${counter}`, "color:green");
};
여기에 prev카운터 ⇒ prev카운터 + 1 업데이터 기능을 나타냅니다.
앞에서 설명한 것처럼 이러한 업데이트 프로그램 문도 대기열에 추가됩니다(일괄 처리).
업데이터 함수는 다음 상태를 계산하는 데 사용하는 보류/이전 상태를 수신합니다.
아래는 업데이터 기능이 추가된 CodeSandbox입니다. 증가 버튼을 클릭해 보십시오.
초기화 기능
아래의 예를 살펴보십시오. 여기서 우리는 상태에 대한 초기 값을 얻기 위해 getItems 함수를 호출합니다.
import React from "react";
import { useState } from "react";
function ListItems() {
const getItems = () => {
console.log(`%c getItems called`, "color:hotpink");
return Array(50).fill(0);
};
const [items, setItems] = useState(getItems());
return (
<div className="card">
<ul> {items.map((item, index) =>
( <li key={index}>Item {index + 1} </li>))}
</ul> <button onClick={() => setItems([...items, 0])}>Add Item</button> </div> );
}
export default ListItems;
이 함수는 크기가 50인 배열을 만들고 배열을 XNUMX으로 채웁니다. 아래 이미지를 참조하세요.
그런 다음 이러한 항목이 화면에 표시됩니다.
모든 것이 괜찮아 보이지만 여기에 문제가 있습니다.
온 클릭 아이템 추가 버튼(항목 목록 뒤에 있음)을 눌러 목록에 새 항목을 추가합니다. 로그를 관찰하십시오.
여기서 문제가 보이나요?
항목을 추가할 때마다 "getItems called" 로그가 콘솔에 추가됩니다. 이것은 이 함수가 각 렌더에서 호출된다는 것을 의미합니다.
useState는 첫 번째 렌더링 후에 전달된 초기 값을 무시하지만 여기에서는 초기 값이 여전히 다시 계산되고 있음을 기억하십시오. 큰 배열을 만들거나 많은 계산을 수행하는 경우 비용이 많이 들 수 있습니다.
통과하여 이 문제를 해결할 수 있습니다. getItems _으로 이니셜 라이저 _ 기능.
이제 코드를 약간 변경해 보겠습니다.
const [items, setItems] = useState(getItems);
CodeSandbox의 콘솔 창을 참조하십시오. "getItems called" 로그는 첫 번째 렌더링에서만 인쇄됩니다. 후속 항목이 추가되면 이 로그가 없습니다.
두 예제 사이에는 시각적인 차이가 없지만 성능 면에서는 다릅니다.
초기 상태에 대한 함수가 필요할 때 항상 함수를 전달하거나 다른 함수 내부에서 함수를 호출한다는 것을 기억하십시오. 함수를 직접 호출하지 마십시오.
✅ const [items, setItems] = useState(getItems);
✅ const [items, setItems] = useState(() => getItems());
❌ const [items, setItems] = useState(getItems());
얼마나 많은 useState 후크를 가질 수 있습니까?
컴포넌트 내부에 필요한 만큼 useState 후크를 가질 수 있습니다.
코드샌드박스 보기
아래 구성 요소에는 사용자 이름, 암호, keepMeSignedIn의 세 가지 상태가 있습니다.
사용자 이름 keepMeSignedIn의 값을 업데이트해 보십시오. 로그인 버튼을 클릭하면 업데이트된 상태가 콘솔에 기록됩니다.
하이라이트
- useState는 다시 렌더링을 트리거하고 다시 렌더링 간에 상태를 유지하는 메커니즘을 제공합니다.
- 다음과 같은 경우에 업데이터 기능을 사용하십시오.
- 이전 상태를 기반으로 다음 상태를 계산합니다.
- 다음 렌더링 전에 상태를 여러 번 업데이트합니다.
- 함수에서 초기 상태를 얻은 경우 초기화 함수 구문을 사용합니다.
- 구성 요소 내부에는 여러 useState 후크가 있을 수 있습니다.
이 게시물이 마음에 드셨나요? 다른 사람들과 공유하십시오.
원래 내 개인 블로그를 위해 작성되었습니다. https://gauravsen.com/use-state-hook
