React의 useState 가이드
비밀번호 입력창에 글자를 입력할 때마다 '약함'에서 '강함'으로 상태가 변합니다. React는 state를 통해 여러분이 입력한 내용을 기억합니다.
State는 데이터를 보유합니다. 여러분이 무엇을 입력하거나 클릭하는지 추적합니다.
이름을 입력한다고 상상해 보세요.
- 초기 state는 빈 문자열입니다.
- 'J'를 입력합니다.
- state를 ""에서 "J"로 업데이트하는 함수를 호출합니다.
- 'o'를 입력합니다.
- state를 "Jo"로 변경하는 함수를 호출합니다.
state를 업데이트할 때마다 React는 UI를 리렌더링합니다. 리렌더링이란 React가 이전 뷰를 지우고 업데이트된 데이터로 새로운 뷰를 그리는 것을 의미합니다.
왜 일반 변수를 사용하지 않을까요? 일반 변수는 코드 내에서는 값이 변하지만 화면을 업데이트하지는 않습니다. 사용자는 계속 옛날 데이터를 보게 될 것입니다. React state는 데이터를 UI와 연결함으로써 이 문제를 해결합니다.
useState 사용법:
React에서 import 합니다.
import { useState } from 'react';선언합니다.
const [age, setAge] = useState(20);
이 예제에서:
- age는 현재 값입니다.
- setAge는 값을 변경하는 함수입니다.
- 20은 초기 값입니다.
지금 바로 시도해 보세요. React 프로젝트를 열고, 카운터를 만듭니다. 버튼을 클릭하여 숫자를 업데이트해 보세요. 화면이 즉시 변하는 것을 확인할 수 있습니다.
출처: https://dev.to/kaleablemmadev/usestate-in-react-a-beginners-guide-1j8i