[React] 리액트 - 객체(Object)란?

React에서 **객체(Object)**는 상태(state)나 props를 관리할 때 자주 사용된다. 객체는 여러 개의 속성을 포함할 수 있으며, 불변성을 유지하는 것이 중요하다. React에서 객체를 다룰 때 주의해야 할 점과 올바른 사용법을 정리해본다.

1️⃣ 객체(Object)란?

객체는 여러 개의 값을 하나의 구조로 묶어 관리할 수 있는 자료형이다. JavaScript에서는 {}(중괄호)를 사용하여 객체를 생성할 수 있다.

const user = {
  name: "철수",
  age: 25,
  isAdmin: false
};

• user라는 객체를 생성하고, name, age, isAdmin이라는 속성을 가진다.
• 속성 값은 문자열, 숫자, 불리언 등 다양한 데이터 타입이 될 수 있다.

 

2️⃣ React에서 객체를 사용하는 이유

React에서는 상태(state)나 props를 관리할 때 **단일 값(primitive value)**뿐만 아니라, 객체 형태로 데이터를 저장할 수도 있다.

const [user, setUser] = useState({ name: "철수", age: 25 });

• useState를 사용하여 객체 형태의 상태를 관리할 수 있다.
• 여러 개의 관련된 값을 하나의 객체로 묶어 관리하면 코드가 더 직관적이고 유지보수가 쉬워진다.

 

3️⃣ 객체 상태를 변경할 때 주의할 점

✔ 객체를 직접 수정하면 안 된다

React에서 상태(state)는 불변성(immutability)을 유지해야 한다. 즉, 기존 객체를 직접 변경하면 안 된다.

❌ 잘못된 예제 (직접 객체 변경)

function Profile() {
  const [user, setUser] = useState({ name: "철수", age: 25 });

  function updateAge() {
    user.age += 1;  // ❌ 기존 객체를 직접 수정
    setUser(user);   // ❌ 같은 객체를 다시 설정
  }

  return (
    <div>
      <p>이름: {user.name}</p>
      <p>나이: {user.age}</p>
      <button onClick={updateAge}>나이 증가</button>
    </div>
  );
}

이 코드의 문제점

• user.age += 1;로 기존 객체를 직접 수정했다.
• setUser(user);를 호출하지만 React는 객체의 참조값이 동일하기 때문에 변경을 감지하지 못한다.
• 버튼을 클릭해도 UI가 업데이트되지 않는다.

 

✔ 올바른 예제 (새로운 객체 생성)

function Profile() {
  const [user, setUser] = useState({ name: "철수", age: 25 });

  function updateAge() {
    setUser({ ...user, age: user.age + 1 }); // ✅ 새로운 객체 생성
  }

  return (
    <div>
      <p>이름: {user.name}</p>
      <p>나이: {user.age}</p>
      <button onClick={updateAge}>나이 증가</button>
    </div>
  );
}

왜 이 방식이 올바른가?

• setUser({ ...user, age: user.age + 1 })를 사용하여 새로운 객체를 생성했다.
• React는 새로운 객체가 들어오면 참조값이 변경되었음을 감지하고, UI를 다시 렌더링한다.

 

4️⃣ 객체를 새로운 값으로 업데이트하는 방법

React에서 객체 상태를 변경할 때는 기존 객체를 복사한 후, 변경된 값만 업데이트해야 한다.

✔ 객체 리터럴 방식

setState({ count: state.count + 1 });

• {}를 사용하여 새로운 객체를 생성한다.
• 기존 상태와 상관없이 새로운 객체를 할당하는 경우에 적합하다.

---

✔ 전개 연산자(Spread Operator) 사용

setState({ ...state, count: state.count + 1 });

• ...state를 사용하면 기존 객체의 속성을 복사하면서, 특정 속성만 변경할 수 있다.
• 기존 상태를 유지하면서 일부 속성만 업데이트할 때 유용하다.

💡 예제

const [user, setUser] = useState({ name: "철수", age: 25 });

setUser({ ...user, age: 26 }); // ✅ 기존 name 속성은 유지되고 age만 변경됨

 

5️⃣ React에서 객체를 다룰 때 주의해야 할 점

1️⃣ 불변성을 유지해야 한다

• 기존 객체를 직접 수정하면 React가 변경을 감지하지 못한다.
• 항상 새로운 객체를 만들어 setState()에 전달해야 한다.

2️⃣ 객체 상태를 변경할 때는 ... 전개 연산자를 사용하는 것이 일반적이다

• setState({ ...state, 변경할 값 }) 형태로 사용하면 가독성이 좋고 유지보수가 쉽다.

3️⃣ 이전 상태를 기반으로 업데이트할 경우 prevState를 활용해야 한다

setState(prevState => ({ ...prevState, count: prevState.count + 1 }));

• 상태가 비동기적으로 변경될 때 prevState를 사용하면 안전하게 업데이트할 수 있다.

 

 

6️⃣ 정리

✔ React에서 객체를 상태(state)로 사용할 수 있다.
✔ 객체 상태를 변경할 때는 기존 객체를 직접 수정하면 안 된다.
✔ 새로운 객체를 생성하여 setState()에 전달해야 React가 변경을 감지할 수 있다.
✔ 새로운 객체를 만드는 방법

• { ...state, 변경할 속성 } (전개 연산자)
• Object.assign({}, state, 변경할 속성)

✔ 객체와 기본 값(Primitive Value)은 상태 변경 방식이 다르다.
✔ 불변성을 유지하는 것이 React의 원활한 상태 관리를 위해 중요하다.