오늘은 React hook 중 useState에 대해 공부해보려고 한다.
const [state, setState] = useState(initalValue);
state: 현재 상태
setState: 상태 변경 함수 (setter)
initialValue: 초기값
- 리액트의 훅 중 하나로, 함수형 컴포넌트에서 상태(state)를 관리하기 위해 사용한다.
- state 값을 변경시켜주고 싶을때 setState를 사용하여 콜백함수의 return 값을 주어 state를 변경시킨다.
📍 Practice1. useState를 사용하여 Counter 만들기
App.jsx
Counter.jsx
📍 Practice2. useState를 사용하여 name을 업데이트 해주기
useState의 초기값을 가져올때 무거운 작업을 해야된다면 바로 값을 넣어주는것 보다 콜백 형태로 넣어주면 맨 처음 화면에 렌더링 될때만 불려지게 된다.
아래 console.log("rerendering")을 찍어서 확인해본결과 처음 화면에 렌더링 될때만 console에 "rerendering" 확인되고 state를 변경하여도 기존 초기값은 렌더링 되지않는다.
const [names, setNames] = useState(() => {
console.log("rerandering");
return ["홍길동", "김길동"];
});
📃 마무리 요약
useState은 리액트 컴포넌트에서 간단한 로컬 상태 관리를 위한 기능을 제공한다.
useState을 사용하여 컴포넌트 내부에서 동적인 데이터와 그에 따른 UI 변화를 처리할 수 있다.
