UseState란?
UseState는 React에 내장된 Hook으로 함수형 컴포넌트에서 상태를 가지게 해줍니다.UseState를 사용하면 상태변수를 선언하고 업데이트 할 수 있습니다.
UseState 사용법?
import React,{UseState} from "react";
const Home = () =>{
const [products,setproducts] = useState([]);
// products를 저장하는 배열 초기값 :[](빈배열)
const [count,setcount] = usestate(0) // count를 저장 초기값 0
}
UseState 상태 업데이트
const [count,setcount] = usestate(0) // count를 저장 초기값 0
setcount(count+1);// 1
UseState 장점
함수형 컴포넌트에서 상태 관리를 간소화합니다.
하나의 컴포넌트에서 여러 개의 상태 변수를 가질 수 있습니다.
상태를 다시 렌더링할 때 이전 상태를 유지합니다.
상태가 변경될 때만 다시 렌더링을 트리거합니다.
고려사항
루프나 조건문 내부에서 useState를 사용하지 않도록 합니다.
useEffect 훅을 사용하여 상태 업데이트를 최적화하는 것을 고려합니다.
이벤트 핸들러를 메모이제이션하기 위해 useCallback 훅을 사용합니다.
주의사항
상태를 업데이트할 때 useState에서 반환된 함수를 호출하는 것을 잊는 경우.
useState 호출에서 동일한 상태 변수 이름을 사용하는 경우.
useState에 초기값을 제공하지 않는 경우.