구조분해할당?

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.
-mdn-

const a = [1,2,3,4,5]
const [b,c] = a
console.log(b)
//1
console.log(c)
//2

const {name, age} = {name: "Joah", age: 10}
console.log(name)
//Joah
console.log(age)
//10

부모 component에서 자식 component에 props를 구조 분해 할당하여 넘겨주기

📌

부모 컴포넌트 코드

//Monsters.js

function Monsters() {
  const [monsters, setMonsters] = useState([]);
  const [userInput, setUserInput] = useState("");

  // 데이터 로딩
  useEffect(() => {
    fetch('서버주소')
      .then((res) => res.json())
      .then((data) => setMonsters(data));
  }, []);


  return (
    <div className="monsters">
      <h1>컴포넌트 재사용 연습!</h1>
      <SearchBox handleChange={inputValue} />
      <CardList monsters={monsters} />
    </div>
  );
}

export default Monsters;

자식 컴포넌트 코드

function CardList({ monsters }) {
  return (
    <div className="cardList">
      {monsters.map((monster) => (
        <Card
          key={monster.id}
          id={monster.id}
          name={monster.name}
          email={monster.email}
        />
      ))}
    </div>
  );
}

export default CardList;

---

구조분해할당을 하지 않고 props를 작성했을 떄!

• 부모 컴포넌트인 Monsters.js 에서 자식 컴포넌트인 CardList에 monsters라는 데이터를 전달한다.

• Monsters.js return문 안에 <CardList/>안에 데이터를 작성하므로 해당 컴포넌트에 데이터를 넘겨준다.

function CardList(props) {
  return (
     <div className="cardList">
        {props.monsters.map((monster) => (
          <Card
          	key={monster.id}
          	id={monster.id}
          	name={monster.name}
          	email={monster.email}
           />
         ))}
     </div>
   );}

props를 구조분해할당하지 않았을 때는 props를 그대로 넘겨주었다.
그리고 props.monsters.map()을 실행한다.
props라는 객체 안에는 monsters라는 key가 담겨져있다.
props값을 콘솔에 출력하면

console.log(props)
//{monsters: Array(10)}

즉, props안에는 monsters라는 Key에 10개의 배열 데이터가 value로 담겨있다는 뜻이다.

---

구조분해할당을 했을 때

💥하지만 아래의 구조분해할당은 데이터를 받아오는 시점부터 props를 분해한다.

function CardList({monsters}) {}

props안에 있는 key인 monsters를 { } 중괄호 안에 담아 monsters 객체를 가져온다.

function CardList({ monsters }) {
  return (
    <div className="cardList">
      {monsters.map((monster) => (
        <Card
          key={monster.id}
          id={monster.id}
          name={monster.name}
          email={monster.email}
        />
      ))}
    </div>
  );
}

export default CardList;

따라서 props.monsters가 아니라 부모로부터 바로 monsters를 받아와 자체를 map()함수로 돌릴 수 있다.

---

구조분해할당을 굳이 왜 할까? 스스로 생각해보기!

나의 생각

props는 부모에서 넘어오는 모든 데이터를 포함하는데 이를 매번 작성하면서 여기에는 이 데이터 저기에는 다른 데이터 표시하다가 나 스스로 혼란스러워 계속 부모 컴포넌트를 확인할 것 같다. 하지만 이렇게 객체 이름으로 구조분해할당을 하여 애초에 받아오면 경험상 가독성과 유지보수에 용이하다.
지금 작성한 코드는 props에 담긴 데이터가 몇 없어서 간단해 보일지 몰라도 props안에 담긴 객체 안에 또 객체 그 안에 객체가 있다면 props를 사용할 때마다 길고 긴 코드가 작성될 것이다. 추후 이를 방지하기 위해 구조분해할당을 사용하면 유용할 것 같다