React에서 상태 배열로 데이터 푸시

React는 개발자에게 코드 효율성을 갖춘 동적 대화형 애플리케이션을 자유롭게 구축할 수 있는 자유를 제공하기 때문에 가장 인기 있는 프런트 엔드 라이브러리입니다. 이 프레임워크에는 많은 훌륭한 기능이 있습니다.

이 기사는 React에서 동적 기능을 구현하는 데 필수적인 state 개체에 중점을 둘 것입니다. 보다 구체적으로 React에서 상태를 유지 관리하고 업데이트하는 방법을 보여줍니다.

React에서 상태 배열로 데이터 푸시

많은 JavaScript 개발자는 .push() 메서드를 사용하여 배열 끝에 항목을 추가합니다. 이는 일반 JavaScript에서 잘 작동하지만 배열이 상태 변수(또는 state 객체의 속성)인 경우 .push() 메서드를 사용하면 예기치 않은 결과가 발생할 수 있습니다.

.push() 메서드를 사용할 때 부작용과 반환 값의 차이를 이해해야 합니다. 끝에 추가된 새 항목과 함께 업데이트된 배열이 아닌 업데이트된 배열의 길이를 반환합니다.

항목을 배열로 푸시하는 것은 부작용일 뿐입니다.

뿐만 아니라 React에는 state 개체를 직접 변경하는 것에 대한 엄격한 규칙이 있습니다. 따라서 배열 값을 포함하는 state 속성으로 직접 항목을 푸시할 수 없습니다.

React에서 state 객체를 업데이트하려면 setState() 메서드를 사용하고 업데이트된 state를 인수로 제공해야 합니다.

하나의 state 변수를 직접 업데이트하는 기능을 제공하는 useState() 후크를 사용할 수도 있습니다.

예를 살펴보겠습니다.

import "./styles.css";
import { useState } from "react";
export default function App() {
  let [arr, setArr] = useState([1, 2, 3, 4]);
  // arr.push(5) wrong
  const numberToBeAdded = 5
  console.log(numberToBeAdded);

  return (
    <div className="App">
      <button onClick={() => setArr((arr) => [...arr, numberToBeAdded])}>Expand array</button>
    </div>
  );
}

라이브 예를 살펴보십시오. 콘솔을 열어 상태 값의 변경 사항을 확인합니다.

useState() 후크를 사용하여 arr 상태 변수를 정의하고 setArr 함수를 사용하여 해당 변수를 업데이트했습니다. 우리는 useState() 후크에 배열의 초기 값인 하나의 인수를 제공했습니다.

React는 arr 상태 변수를 직접 변경하기 위해 .push() 메서드를 사용하는 것을 허용하지 않습니다. 정수 값 5를 배열에 추가하려는 경우 arr.push()는 올바른 방법이 아닙니다.

대신, 배열에 항목을 추가하는 가장 좋은 방법은 하나의 인수(이전 상태 변수)를 취하고 새 상태 변수를 반환하는 함수를 갖는 것입니다.

핸들러 함수는 다음과 같습니다.

() => setArr((arr) => [...arr, numberToBeAdded])

보시다시피 setArr() 함수에 대한 인수는 arr 상태 변수의 현재 값을 가져와 새 값을 반환하는 콜백 함수입니다.

배열 끝에 숫자를 추가하기 위해 세 개의 점이라고도 하는 스프레드 연산자를 사용했습니다. ...arr은 현재 배열에서 모든 값을 가져오고 numberToBeAdded 변수에 포함된 값을 추가합니다.

동일한 접근 방식을 사용하여 시작 시 가치를 추가할 수 있습니다.

() => setArr((arr) => [numberToBeAdded, ...arr])

추가해야 할 값을 앞으로 옮기기만 하면 됩니다.