기술 창고/React

[React] Spread 연산자

JayEsEichi 2023. 8. 31. 18:05
728x90
반응형
SMALL

Spread 연산자는 기존에 길게 작성되었던 코드를 단순화하여 줄일 수 있는 연산자입니다.
예를 들어 if문으로 여러 조건을 가진 코드를 spread 연산자를 통해 줄여줄 수 있습니다.
이를 arrow function과 useState 에 접목해서 사용하는 방식에 대해서 알아보겠습니다.

 

 

기존 방식의 긴 코드 작성

App.jsx

import React, { useState } from "react";

function App() {
  const [contact, setContact] = useState({
    fName: "",
    lName: "",
    email: ""
  });

  function handleChange(event) {
    const { name, value } = event.target;

    setContact(prevValue => {
      if (name === "fName") {
        return {
          fName: value,
          lName: prevValue.lName,
          email: prevValue.email
        };
      } else if (name === "lName") {
        return {
          fName: prevValue.fName,
          lName: value,
          email: prevValue.email
        };
      } else if (name === "email") {
        return {
          fName: prevValue.fName,
          lName: prevValue.lName,
          email: value
        };
      }
    });
  }

  return (
    <div className="container">
      <h1>
        Hello {contact.fName} {contact.lName}
      </h1>
      <p>{contact.email}</p>
      <form>
        <input
          onChange={handleChange}
          name="fName"
          value={contact.fName}
          placeholder="First Name"
        />
        <input
          onChange={handleChange}
          name="lName"
          value={contact.lName}
          placeholder="Last Name"
        />
        <input
          onChange={handleChange}
          name="email"
          value={contact.email}
          placeholder="Email"
        />
        <button>Submit</button>
      </form>
    </div>
  );
}

export default App;

기존 방식을 그대로 사용하게 된다면 위의 예시 코드와 같이 작성할 수 있습니다.
arrow function 을 사용하여 기존의 값들을 유지시키는 Complex State 관리 방식을 적용하고 useState의 setContact에 if 문을 걸어 입력된 input 태그의 name 속성에 따라 기존의 값은 유지시키고 새로운 속성의 값을 반영하는 방식입니다.
이 방식으로도 원하는 결과를 얻을 수 있습니다.

하지만 예를 들어 회원가입할 때 많은 정보를 넣어야할 경우에 일일히 if 문을 넣으면 코드의 길이가 너무 길어지며 비효율적일 수 있습니다.
이를 단순화하고 줄여주기 위해 Spread 연산자를 사용해보겠습니다.

 

 

Spread 연산자 반영 코드 작성

App.jsx

import React, { useState } from "react";

function App() {
  const [contact, setContact] = useState({
    fName: "",
    lName: "",
    email: ""
  });

  function handleChange(event) {
    const { name, value } = event.target;
    setContact(prevValue => ({...prevValue, [name]: value}));
  }

  return (
    <div className="container">
      <h1>
        Hello {contact.fName} {contact.lName}
      </h1>
      <p>{contact.email}</p>
      <form>
        <input
          onChange={handleChange}
          name="fName"
          value={contact.fName}
          placeholder="First Name"
        />
        <input
          onChange={handleChange}
          name="lName"
          value={contact.lName}
          placeholder="Last Name"
        />
        <input
          onChange={handleChange}
          name="email"
          value={contact.email}
          placeholder="Email"
        />
        <button>Submit</button>
      </form>
    </div>
  );
}

export default App;

onChange로 실행되던 동작 함수인 handleChange의 로직이 확 줄어든 것을 확인할 수 있습니다.
Spread 연산자는 ... 기호로 사용됩니다.

 

Spread 연산자 활용 예시)

const fruit1 = ["apple", "banana", "watermelon"];
const fruit2 = ["mango", "strawberry", "kiwi", ...fruit1];

console.log(fruit2);

// 결과 : ["mango", "strawberry", "kiwi", "apple", "banana", "watermelon"]

이처럼 Spread 연산자를 사용하면 배열에 있는 내용을 그대로 다른 배열에 추가해줄 수 있습니다.

다시 돌아와서 ...prevValue 를 형식으로 arrow function을 통해 넣게 되면 기존에 기입된 개체 정보들을 유지시킬 수 있습니다.
그 후 [name]: value라고 기입하였는데, 이것은 input 태그에 입력할 때마다 호출되어 넘어간 input 태그의 속성 정보들 중 []기호로 감싼 속성의 값을 입력한 value 값으로 업데이트 하겠다는 뜻입니다.

 

재차 정리하자면,
(1) input 태그에 값 입력
(2) handleChange 함수 실행 및 event 매개변수에 입력된 input 태그의 정보들이 같이 들어감
(3) 들어간 input태그의 속성 정보들 중 name, value 속성을 특정지어 const 함수로 지정
(4) setContact 에 반영되기 위해 arrow function이 수행됨
(5) spread 연산자로 한번에 불러와진 기존의 input 개체 정보들 불러옴
(6) 그 중에서 [name] 속성의 값을 3번 과정에서 불러온 value 값으로 업데이트
(7) setContact 가 완전히 수행되면서 최신 업데이트된 내용으로 useState 변수인 contact 에 반영
(8) 최종적으로 html 에 반영되어 보여짐

 

 

이처럼 Spread 연산자를 활용하면 코드의 양을 효율적으로 줄여줄 수 있습니다.
처음 사용해보면 갑작스럽게 코드의 양이 줄어들기도 하고 이해하기도 어렵습니다.
저 또한 완벽하게 이해하기 위해 반복 사용하면서 숙달해야할 필요를 느꼈습니다.

728x90
반응형
LIST