💨 State 란?
문법
const App = () => {
const [value, setValue] = useState(초기값);
return ...
}
import { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p> 버튼을 {count}번 눌렀습니다.</p>
<button onClick = {() => setCount(count + 1)}>
클릭
</button>
</div>
);
}
State 는 Component 내에서 유동적으로 변할 수 있는 값을 저장합니다.
개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있습니다.
State 값이 변경되고 재렌더링이 필요한 경우 React 가 자동으로 계산하여 변경된 부분을 렌더링합니다.
💨 Object를 갖는 State를 만들 때 주의사항
const [ user, setUser ] =
useState({ name: "민수", grade: 1})
setUser((current) => {
current.grade = 2;
return current;
})
예시와 같이 Object를 값으로 같는 State도 만들 수 있다. 그러나 예시의 경우 React가 State의 변경을 감지하지 못한다.
user object 안의 grade 가 변경되었지만, user 자체는 변경되지 않았기 때문이다.
따라서,
const [ user, setUser ] =
useState({ name: "민수", grade: 1})
setUser((current) => {
const newUser = { ...current }
newUser.grade = 2
return newUser
})
spread syntax를 사용하게 되면 값의 복사가 일어나고, 이 상태에서 값을 변경한 후에 리턴을 해준다.
✅ 헷갈려서 정리
props : 사용자가 제품을 조작하는 장치
state : 제품을 만드는 사람들이 쓰는 내부적 장치
‼ 출처