[리액트] 스프레드 문법으로 state에 값 추가해주기

1. 스프레드 문법(spread operator)이란?

자바스크립트의 스프레드 문법은 배열이나 객체 앞에 ...을 붙여 안에 있는 모든 요소를 복사해 꺼내주는 문법이다. 일반적으로 요소를 밖으로 꺼내준 후 다른 배열이나 오브젝트에 할당할때 사용된다. 리액트에서 스프레드 문법은 concat 메서드와 같이 state에 값을 추가할때 사용된다.

 

2. 자바스크립트 스프레드 문법 예시

2.1 배열

const array = [1, 2, 3, 4];
newArray = [...array, 5];
console.log(newArray)
// [1, 2, 3, 4, 5]

코드해석

1) array이라는 변수에 배열 [1, 2, 3, 4]가 할당되어있다

2) 스프레드 오퍼레이터(...) 문법으로 array에 있는 모든 값을 꺼내주어 새로운 변수 newArray에 꺼내준값과 새로운값을 할당해준다

2.2 객체

const object = {
  nickname: 'maple',
  eyeColor: 'dark brown',
  height: 165
}

newObject = {...object, human: true, weight: 49}

console.log(newObject)
/*
{
  eyeColor: "dark brown",
  height: 165,
  human: true,
  nickname: "maple",
  weight: 49
}
*/

코드해석

1) object라는 변수에 프로퍼티로 값으로 nickname: "maple", eyeColor: "dark brown", height: 165가 할당되어있다

2) newObject에 스프레드 오퍼레이터(...) 문법으로 object에 있는 모든 값을 꺼내준 후 할당하고 새로운 데이터 두개(human: true, weight: 49)를 할당해준다

 

3. 리액트에서 스프레드 문법으로 state에 값 추가해주기

3.1 클래스형 컴포넌트

import React from "react";

class BucketListClass extends React.Component {
  constructor(props) {
    super(props);

    // state값 설정
    this.state = {
      bucketlists: ["영화관 가기", "매일 책읽기", "수영 배우기"]
    };

    this.input = React.createRef();
  }

  InputValueUpdate = () => {
    // state값 수정
    this.setState({
      bucketlists: [...this.state.bucketlists, this.input.current.value]
    });
    this.input.current.value = "";
  };

  render() {
    return (
      <>
        <div>
          <h1>내 버킷리스트</h1>
          <hr />
          <ul>
            {this.state.bucketlists.map((bucketlist, index) => (
              <li key={index}>{bucketlist}</li>
            ))}
          </ul>
        </div>
        <div>
          <input type="text" ref={this.input} />
          <button onClick={this.InputValueUpdate}>추가하기</button>
        </div>
      </>
    );
  }
}

export default BucketListClass;

코드해석

1) state 값으로 bucketlists라는 배열이 있고, 이 state 값을 업데이트하는 함수 setState()는 InputValueUpdate라는 함수에 선언되어 있다

// state값 설정
this.state = {
  bucketlists: ["영화관 가기", "매일 책읽기", "수영 배우기"]
};

// 추가하기라는 버튼이 클릭되면 실행되는 함수
InputValueUpdate = () => {
  // state값 수정
  this.setState({
    bucketlists: [...this.state.bucketlists, this.input.current.value]
  });
  this.input.current.value = "";
};

2) bucketlists라는 state값을 업데이트하기 위해 setState() 함수안에 변경할 bucketlists 값을 넣어준다. 이때 스프레드 연산자를 사용해 기존 bucketlists의 값을 모두 꺼내와 배열에 넣어주고 input에서 가져온 새로운 값도 넣어준다. 이 과정을 거치면서 bucketlists의 state 값은 기존에 가지고 있던 값 + 새로운 값을 가지는 배열이 된다. 

this.setState({
  bucketlists: [...this.state.bucketlists, this.input.current.value]
});

 

3.2 함수형 컴포넌트

import React, { useRef, useState } from "react";

const App = () => {
  // state값 설정
  const [bucketlists, setBucketlists] = useState([
    "영화관 가기",
    "매일 책읽기",
    "수영 배우기"
  ]);

  const inputValue = useRef();

  // state값 수정
  const onClick = () => {
    setBucketlists([...bucketlists, inputValue.current.value]);
    inputValue.current.value = "";
  };

  return (
    <>
      <div>
        <div>
          <h1>내 버킷리스트</h1>
          <hr />
          <ul>
            {bucketlists.map((bucketlist, index) => (
              <li key={index}>{bucketlist}</li>
            ))}
          </ul>
        </div>
        <div>
          <input type="text" ref={inputValue} />
          <button onClick={onClick}>추가하기</button>
        </div>
      </div>
    </>
  );
};

export default App;

코드해석

1) state 값으로 bucketlists라는 배열이 있고, 이 state 값을 업데이트하는 함수 setBucketlists는 onClick이라는 함수가 실행되면 실행되어진다.

// state값 설정
const [bucketlists, setBucketlists] = useState([
  "영화관 가기",
  "매일 책읽기",
  "수영 배우기"
]);

// 추가하기라는 버튼이 클릭되면 실행되는 함수
const onClick = () => {
  // state값 수정
  setBucketlists([...bucketlists, inputValue.current.value]);
  inputValue.current.value = "";
};

2) bucketlists라는 state값을 업데이트하기 위해 setState() 함수안에 새 bucketlists 값을 넣어준다. 이때 스프레드 연산자를 사용해 기존 bucketlists의 값을 모두 꺼내와 배열에 넣어주고 input에서 가져온 새로운 값도 넣어준다. 이 과정을 거치면서 bucketlists의 state 값은 기존에 가지고 있던 값 + 새로운 값을 가지는 배열이 된다.

setBucketlists([...bucketlists, inputValue.current.value]);