React에서 상태를 직접 업데이트하지 마세요.

이 게시물에서는 올바른 방법으로 상태를 업데이트하는 방법에 대해 설명합니다.

먼저 할 일 목록을 포함하고 이를 소품으로 Todos 구성 요소에 전달하는 App.js, 그 후 Todos 구성 요소에서 소품을 수신하고 이를 Todo 구성 요소에 소품으로 전달하여 할일 목록의 모든 할일을 렌더링합니다. Todos.js에는 다음이 있습니다. handleToggleComplete는 확인란을 표시하거나 선택하지 않고 handleSelect를 포함하여 선택한 할 일을 감지합니다.

App.js 코드:

import Todos from "./Todos";

export default function App() {

  const initialTodos = [
    {
      id : 1 ,
      complete : false ,
      name : 'first todo'
    } , 
    {
      id : 2 ,
      complete : true ,
      name : 'second todo'
    } ,
    {
      id : 3 ,
      complete : false ,
      name : 'third todo'
    }
  ]
  return (
    <div className="App">
     <Todos initialTodos = {initialTodos} />  
    </div>
  );
}

Todos.js 코드:

import React, { useState } from "react";
import Todo from "./Todo";

const Todos = ({ initialTodos }) => {
  const [todos, setTodos] = useState(initialTodos);
  const [selectedTodo, setSelectedTodo] = useState();

  const handleToggleComplete = (todoId) => {
    setTodos((currTodos) => {
      const todo = currTodos.find((todo) => todo.id === todoId);
      todo.complete = !todo.complete;
      return currTodos;
    });
  };

  const handleSelect = (todoId) => {
    setSelectedTodo(todos.find((todo) => todo.id === todoId));
  };

  return (
    <>
      {todos.map((todo) => (
        <Todo
          key={todo.id}
          todo={todo}
          handleToggleComplete={handleToggleComplete}
          handleSelect={handleSelect}
        />
      ))}
      <h3>Selected Todo</h3>

      {selectedTodo && (
        <Todo
          todo={selectedTodo}
          handleToggleComplete={handleToggleComplete}
          handleSelect={handleSelect}
        />
      )}
    </>
  );
};

export default Todos;

Todo.js 코드:

import React from "react";

const Todo = ({ todo, handleToggleComplete, handleSelect }) => {
  const toggleComplete = () => {
    handleToggleComplete(todo.id);
  };

  const onSelect = () => {
    handleSelect(todo.id);
  };
  return (
    <div>
      <input
        type="checkbox"
        checked={todo.complete}
        onChange={toggleComplete}
      />
      {todo.name}
      <button onClick={onSelect}>Select</button>
    </div>
  );
};

export default Todo;

이제 이 코드의 결과를 보자



보시다시피 체크박스를 업데이트할 수 없습니다. 상태를 직접 업데이트하기 때문입니다. setTodos에서 currTodos를 직접 업데이트하고 currTodos를 반환합니다.

 const handleToggleComplete = (todoId) => {
    setTodos((currTodos) => {
      const todo = currTodos.find((todo) => todo.id === todoId);
      todo.complete = !todo.complete;
      return currTodos;
    });
  };

이 문제를 해결하기 위해 currTodos의 복사본을 가져오고 복사된 상태를 통해 업데이트하여 상태를 업데이트할 수 있습니다.

const handleToggleComplete = (todoId) => {
    setTodos((currTodos) => {
      const copy = [...currTodos]
      return copy.map(todo => {
        if(todo.id === todoId) {
          return {...todo  , complete : !todo.complete}
        }
        return todo 
      })
    });
  };

위의 코드에서 상태를 업데이트하는 방법에 대해 더 자세히 설명하려면
1- 사본은 우리가 그것을 통해 업데이트하는 배열입니다.
2- 업데이트 반환이 있는 경우 {...todo , complete : !todo.complete} 이것은 복사 배열에서 업데이트됩니다.
3- 업데이트가 없는 경우 todo 반환
4- 이 모든 배열(복사 배열)은 우리가 setTodos(복사)라고 말할 때 새 상태로 반환됩니다.

 return copy.map(todo => {
        if(todo.id === todoId) {
          return {...todo  , complete : !todo.complete}
        }
        return todo 
      })

이제 결과를 보자:



이제 각 체크박스의 상태를 성공적으로 업데이트할 수 있지만 selectedTodo는 어떤지 살펴보겠습니다.



보시다시피 세 번째 todo를 선택했지만 세 번째 todo의 확인란을 표시하거나 표시 해제하면 selectedTodo의 파생 상태를 저장했기 때문에 selectedTodo에서 업데이트되지 않았습니다.

아래의 이 코드에서 잘못된 점은 파생 상태를 저장한다는 것입니다. 따라서 파생 상태를 저장하지 마십시오.setSelectedTodo(todos.find((todo) => todo.id === todoId))

올바른 방법은 아래 코드 줄을 사용하는 것이므로 다시 렌더링할 때마다 업데이트된 selectedTodo를 계산하고 이를 위해 useMemo를 사용할 수 있습니다.const selectedTodo = todos.find(todo => todo.id === selectedTodoId)
그리고 그것은 모든 변경 사항이 있는 Todos.js의 아래 코드입니다.

import React, { useState } from "react";
import Todo from "./Todo";

const Todos = ({ initialTodos }) => {
  const [todos, setTodos] = useState(initialTodos);
  const [selectedTodoId, setSelectedTodoId] = useState();

  const selectedTodo = todos.find(todo => todo.id === selectedTodoId)

  const handleToggleComplete = (todoId) => {
    setTodos((currTodos) => {
      const copy = [...currTodos]
      return copy.map(todo => {
        if(todo.id === todoId) {
          return {...todo  , complete : !todo.complete}
        }
        return todo 
      })
    });
  };

  return (
    <>
      {todos.map((todo) => (
        <Todo
          key={todo.id}
          todo={todo}
          handleToggleComplete={handleToggleComplete}
          handleSelect={setSelectedTodoId}
        />
      ))}
      <h3>Selected Todo</h3>

      {selectedTodo && (
        <Todo
          todo={selectedTodo}
          handleToggleComplete={handleToggleComplete}
          handleSelect={setSelectedTodoId}
        />
      )}
    </>
  );
};

export default Todos;

이제 이 코드의 결과를 봅시다.



이것이 올바른 방법으로 상태를 업데이트하는 방법에 관한 것입니다. 항상 상태를 직접 업데이트하지 말고 상태의 사본을 가져오고 복사된 상태를 통해 업데이트하십시오.


이 게시물을 읽어 주셔서 감사합니다