useState에서 Object Array변경 적용

HumbleMincho·2024년 7월 8일

2023 React react native 현업기록소

많이 쓰는 패턴인데 잘 모르는 사람들이 있을 것 같아 기록합니다.

useState로 Object Array의 특정 key의 value를 변경했을 때 render가 동작하지 않습니다.

이때는 아래와 같이 spread 연산자를 활용하여 신규 변수를 할당한 후 변경 후 useState의 set 함수를 호출하면 render 적용이 됩니다.

  let newState = [...state];
  newState[index].done = true;
  setState(newState)

이유

React에서 상태 관리와 컴포넌트 재렌더링의 원리를 이해하기 위해, useState 훅과 관련된 개념을 자세히 살펴보겠습니다.

React의 상태 관리와 렌더링

React 컴포넌트는 상태(state)나 속성(props)이 변경되면 다시 렌더링됩니다. useState는 컴포넌트 내부에서 상태를 관리할 때 사용하는 훅으로, useState를 호출하면 현재 상태 값과 이 값을 업데이트할 수 있는 함수를 반환합니다.

const [state, setState] = useState(initialState);

상태 불변성(immutability)

상태 변경 시 React는 상태가 변했는지 확인하기 위해 이전 상태와 새로운 상태를 얕은 비교합니다. 만약 상태 객체가 동일하다면, React는 상태가 변경되지 않았다고 판단하고 컴포넌트를 다시 렌더링하지 않습니다. 따라서 상태를 업데이트할 때는 새로운 객체를 생성하여 React가 상태 변경을 감지할 수 있도록 해야 합니다.

예시: 객체 배열의 특정 키 값 변경

주어진 예시에서 객체 배열의 특정 키 값을 변경하려고 합니다. 이를 위해 원본 배열을 수정하는 대신, 새로운 배열을 생성하여 변경된 값을 반영합니다. 이렇게 하면 React는 상태가 변경되었음을 인식하고 컴포넌트를 다시 렌더링합니다.

원본 배열을 수정하는 경우

state[index].done = true;
setState(state);

새로운 배열을 생성하는 경우

let newState = [...state];
newState[index].done = true;
setState(newState);

여기서는 스프레드 연산자를 사용하여 원본 배열의 얕은 복사본을 생성합니다. 그런 다음 복사된 배열의 특정 요소를 수정합니다. 이제 newState는 원본 배열과 다른 새로운 참조를 가지므로, React는 상태가 변경되었음을 인식하고 컴포넌트를 다시 렌더링합니다.

코드 예시

다음은 객체 배열의 특정 키 값을 변경하고 상태를 업데이트하는 전체 코드 예시입니다.

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Learn React', done: false },
    { id: 2, text: 'Build a Todo App', done: false },
  ]);

  const markAsDone = (index) => {
    let newTodos = [...todos];
    newTodos[index].done = true;
    setTodos(newTodos);
  };

  return (
    <div>
      {todos.map((todo, index) => (
        <div key={todo.id}>
          <span style={{ textDecoration: todo.done ? 'line-through' : 'none' }}>
            {todo.text}
          </span>
          <button onClick={() => markAsDone(index)}>Done</button>
        </div>
      ))}
    </div>
  );
}

export default TodoList;