[CH36]디스트럭처링 할당

[yuzunsang]

[퀴즈 예시] Q. 여기에 퀴즈 설명을 적으세요.

적을 코드가 있다면 밑에 적어주세요. (백틱 3개로 코드를 감싸면 코드 양식을 적을 수 있습니다.)

// 예시 코드
const arr = [1, 2, 3];
console.log("Hello");

아래 코드를 복붙해서 정답을 적어주세요.

<details>
    <summary>정답</summary>
    <div markdown="1">    
    정답 설명
    </div>
</details>

[yuzunsang]

Q. 객체 디스트럭처링 할당을 이용해 결과를 출력하는 코드를 작성하세요.

import { useState } from 'react';

export default function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, task: 'Learn React', completed: true },
    { id: 2, task: 'Build a Todo List', completed: false }
  ]);

  return (
    <div>
      <h1>Todo List</h1>
      <ul>
        // todos.map을 이용하여 todo를 순회하며 render하도록 코드 작성
      </ul>
    </div>
  );
};

정답

{todos.map(({ id, task }) => (
{task}
))}

[bo-eun]

Q. 첫 번째 요소 name을 디스트럭처 할당을 통해 변수firstName에 할당하세요.

const users = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" },
    { id: 3, name: "Charlie" }
];
console.log(firstName) //  "Alice"

정답

const [ { name:firstName } ] = users