구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. 라고 MDN에서 설명하고 있는데 이렇게 이야기 해서는 바로 이해가 쉽지 않으니 바로 예시 코드를 보도록 하겠다.
//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;
이렇게보면 프롭스에 어떤내용이 들어있는지 한눈에 알아보기 어려운부분이 있고 내용을 확인하기 위해 부모컨포넌트로 다시 확인하러가는 수고스러움이 있다. 그러나 구조분해할당을 하여 작성하게되면 이러한 불편한점을 해소가 가능하다.
//App.js
위의 코드내용과 동일
//Comment.js
function Comment({ comment, deletToDo }) {
return <p>{comment}❌</p>;
}
export default Comment;
이렇게 위에 내용과 다르게 Comment함수의 인자부분에 function Comment(props){....} 이런식이 아닌 props받아온 내용을 구조분해할당화 시켜서 받았고 그 내용을 바로 직접 사용할 수 있어서 코드가 조금 더 간결해지고 직관적이게 볼 수 있다.
위에서 확인하였듯이 구조분해할당을 하게되면 코드를 간결하게 작성할 수 있다. props는 부모에서 넘어오는 모든 데이터를 포함하는데 코드내용이 방대해지면 혼란스러워 계속 부모 컴포넌트를 확인하게 될수도있다. 하지만 이렇게 연관성있는 객체 이름으로 구조분해할당을 하여 전달 해 준다면 가독성과 유지보수에 용이할것이다.