1. 구조분해할당 이란?

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. 라고 MDN에서 설명하고 있는데 이렇게 이야기 해서는 바로 이해가 쉽지 않으니 바로 예시 코드를 보도록 하겠다.

2. 부모컴포넌트 -> 자식컴포넌트로 props를 구조분해할당을 하지 않은 경우

//App.js

import { useState } from "react";
import "./styles.css";
import Comment from "./Comment";

export default function App() {
  const [toDo, setToDo] = useState("");
  const [toDoList, setToDoList] = useState([]);

  const toDoValue = (e) => {
    setToDo(e.target.value);
  };

  const addToDoList = () => {
    const result = [toDo, ...toDoList];
    setToDoList(result);
    setToDo("");
  };

  const removeToDo = (id) => {
    setToDoList(
      toDoList.filter((toDo) => {
        return toDo.id !== id;
      })
    );
  };

  return (
    <div>
      <h1>To do list❗️</h1>
      <input onChange={toDoValue} value={toDo} placeholder="write here..." />
      <button onClick={addToDoList}>click!</button>
      <div>
        {toDoList.map((toDo, id) => (
          <Comment key={id} comment={toDo} deletToDo={removeToDo} />
        ))}
      </div>
    </div>
  );
}

toDoListd의 값을 map메서드로 반환하게끔 돌려주고 있으며 Comment컴포넌트에서 받을 props갑을 comment, deletToDo라는 명으로 넘겨주고 있다.

function Comment(props) {
  return <p>{props.comment}❌</p>;
}

export default Comment;

이렇게보면 프롭스에 어떤내용이 들어있는지 한눈에 알아보기 어려운부분이 있고 내용을 확인하기 위해 부모컨포넌트로 다시 확인하러가는 수고스러움이 있다. 그러나 구조분해할당을 하여 작성하게되면 이러한 불편한점을 해소가 가능하다.

3. 부모컴포넌트 -> 자식컴포넌트로 props로 넘겨받은 데이터 구조분해할당

//App.js

위의 코드내용과 동일

//Comment.js

function Comment({ comment, deletToDo }) {
  return <p>{comment}❌</p>;
}

export default Comment;

이렇게 위에 내용과 다르게 Comment함수의 인자부분에 function Comment(props){....} 이런식이 아닌 props받아온 내용을 구조분해할당화 시켜서 받았고 그 내용을 바로 직접 사용할 수 있어서 코드가 조금 더 간결해지고 직관적이게 볼 수 있다.

4. 구조분해할당의 이점

위에서 확인하였듯이 구조분해할당을 하게되면 코드를 간결하게 작성할 수 있다. props는 부모에서 넘어오는 모든 데이터를 포함하는데 코드내용이 방대해지면 혼란스러워 계속 부모 컴포넌트를 확인하게 될수도있다. 하지만 이렇게 연관성있는 객체 이름으로 구조분해할당을 하여 전달 해 준다면 가독성과 유지보수에 용이할것이다.