| 변경

리액트에서 state변수 안에 있는 객체를 변경할 때 그 변수에 객체를 직접 변경하면 안 됩니다.

import { useState } from 'react';

export default function App() {

const [user, setUser] = useState({

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({

age: 20

});

return (

<div>

<p>이름: {user.name}</p>

<p>나이: {user.age}</p>

<button onClick={()=>{

setUser({

age: 30

})

}}>변경</button>

</div>

);

}

이런 식으로 setUser를 사용하면

user객체를 새로운 객체로 대체하고

새로운 객체를 사용하여 화면을 다시 렌더링 해줍니다.

| ...연산자 사용

스프레드연산자인 ...를 사용하여 객체의 원하는 값만 바꿀 수 있습니다.

import { useState } from 'react';

export default function App() {

const [user, setUser] = useState({

age: 20

});

return (

<div>

<p>이름: {user.name}</p>

<p>나이: {user.age}</p>

<button onClick={()=>{

setUser({

...user,

age: 30

})

}}>변경</button>

</div>

);

}

이런 식으로 하면 원하는 값인 age만 변경할 수 있습니다.

[React] 객체 state 다루기

[React] 객체 state 다루기