React로 개발하기 - object, array 값을 변경하려면

object, array 값을 변경하려면

• 원시 타입의 값은 그냥 바꿔도 됩니다.

  원시타입으로는 number, bigint, string, boolean, null, undefined 와 symbol 총 7 개가 존재한다. 이들의 공통점은은 object 가 아니며, 따로 메서드(method) 를 가지지 않는다.

• 하지만 객체 타입 (Object, Array)의 값은 그냥 바꾸면 안됩니다.

  function App() {
    const [todos, setTodos] = useState([
      "일찍 일어나기",
      "9시에 공부시작하기",
      "자바스크립트 마스터하기",
    ]);
  
    return (
      <div>
        {todos.map((todo, i) => {
          return (
            <div>
              {i + 1}: {todo}
            </div>
          );
        })}
        <button
          onClick={() => {
            todos.push("밤새기");
            setTodos(todos);
          }}
        >
          밤새기 추가
        </button>
      </div>
    );
  }

기존 값을 변경하는 것이 아니라 새로운 복사본을 만든 후 spread operator을 통해 붙여줘야합니다

• 새로운 복사본

function App() {
  const [todos, setTodos] = useState([
    "일찍 일어나기",
    "9시에 공부시작하기",
    "자바스크립트 마스터하기",
  ]);

  return (
    <div>
      {todos.map((todo, i) => {
        return (
          <div>
            {i + 1}: {todo}
          </div>
        );
      })}
      <button
        onClick={() => {
          // todos.push("밤새기");
          const copy = todos;
          copy.push("밤새기");
          setTodos(copy);
        }}
      >
        밤새기 추가
      </button>
    </div>
  );
}

• spread operator 이용하여 복사

function App() {
  const [todos, setTodos] = useState([
    "일찍 일어나기",
    "9시에 공부시작하기",
    "자바스크립트 마스터하기",
  ]);

  return (
    <div>
      {todos.map((todo, i) => {
        return (
          <div>
            {i + 1}: {todo}
          </div>
        );
      })}
      <button
        onClick={() => {
          // todos.push("밤새기");
          // const copy = todos;
          const copy = [...todos];
          copy.push("밤새기");
          console.log({ copy });
          console.log(copy === todos);
          setTodos(copy);
        }}
      >
        밤새기 추가
      </button>
    </div>
  );
}