-
[React] 객체 state 다루기React 2023. 5. 31. 09:15
| 변경
리액트에서 state변수 안에 있는 객체를 변경할 때 그 변수에 객체를 직접 변경하면 안 됩니다.
import { useState } from 'react'; export default function App() { const [user, setUser] = useState({ name: "Kim", age: 20 }); return ( <div> <p>이름: {user.name}</p> <p>나이: {user.age}</p> <button onClick={()=>{ user.name = "Lee"; user.age = 30; }}>변경</button> </div> ); }
여기에서
<button onClick={()=>{ user.name = "Lee"; user.age = 30; }}>변경</button>
이런 식으로 직접 변경하면 리액트에서는 객체가 변경되었다는 것을 인지를 못합니다.
그래서 상태의 변화를 렌더링 하고 싶으면
setUser를 사용하여 변경하여야 됩니다.
import { useState } from 'react'; export default function App() { const [user, setUser] = useState({ name: "Kim", age: 20 }); return ( <div> <p>이름: {user.name}</p> <p>나이: {user.age}</p> <button onClick={()=>{ setUser({ name: "Lee", age: 30 }) }}>변경</button> </div> ); }
이런 식으로 setUser를 사용하면
user객체를 새로운 객체로 대체하고
새로운 객체를 사용하여 화면을 다시 렌더링 해줍니다.
| ...연산자 사용
스프레드연산자인 ...를 사용하여 객체의 원하는 값만 바꿀 수 있습니다.
import { useState } from 'react'; export default function App() { const [user, setUser] = useState({ name: "Kim", age: 20 }); return ( <div> <p>이름: {user.name}</p> <p>나이: {user.age}</p> <button onClick={()=>{ setUser({ ...user, age: 30 }) }}>변경</button> </div> ); }
이런 식으로 하면 원하는 값인 age만 변경할 수 있습니다.
'React' 카테고리의 다른 글
React - React Redux 사용해보기 (0) 2023.06.09 [React] 리액트에서 페이지네이션 연습 (0) 2023.06.05 [React] useState() 알아보기 (0) 2023.05.17 [React] 이벤트 핸들러 (0) 2023.05.15 [React] 공식문서 공부 - 순수함수로 컴포넌트 작성 (0) 2023.05.08