ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [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만 변경할 수 있습니다.

Designed by Tistory.