구조 분해 할당 [객체의 프로퍼티, 배열의 값을 흡수 (본 구조를 해치지 않음)] || find()메서드 [조건에 부합하는 첫 요소 반환]

구조 분해 할당

구조 분해 할당(destructuring assignment)은 배열이나 객체의 프로퍼티를 개별 변수로 쉽게 할당할 수 있는 자바스크립트 표현식입니다.

객체 구조 분해
객체의 경우, 다음과 같이 할 수 있습니다.

const person = { name: 'John', age: 30 };
const { name, age } = person;
console.log(name); // 'John'
console.log(age); // 30

위 코드에서 { name, age }는 person 객체의 name과 age 프로퍼티를 각각 name과 age 변수에 할당하고 있습니다.

---

배열 구조 분해
배열의 경우에도 비슷하게 할 수 있습니다.

const colors = ['red', 'blue'];
const [firstColor, secondColor] = colors;
console.log(firstColor); // 'red'
console.log(secondColor); // 'blue'

---

import { useParams } from "react-router-dom";

function Detail(props){

  let {id} = useParams();
  console.log(id);
  // 리액트에서 url의 파라미터를 포함하는 객체인 useParams를 들고와서 id변수에 구조 할당분해중

useParams와 구조 분해 할당

😁React Router에서 useParams 훅은 현재 라우트의 URL 파라미터를 포함하는 객체를 반환합니다. 이를 사용해서 id 파라미터를 추출할 수 있습니다.

let { id } = useParams();

위 코드는 useParams()가 반환하는 객체에서 id 프로퍼티를 추출하여 id라는 변수에 할당하고 있습니다.

---

😁find 메서드는 배열에서 특정 조건을 만족하는 첫 번째 요소를 찾아 반환합니다. 조건은 콜백 함수로 전달되며, 이 함수는 배열의 각 요소에 대해 실행됩니다.

array.find(function(element, index, array) {
  // 조건
}, thisArg);

element: 현재 처리 중인 배열 요소.
index: 현재 처리 중인 요소의 인덱스.
array: find 메서드가 호출된 배열.
thisArg (선택 사항): 콜백에서 this로 사용할 값.

참고사항
find 메서드는 조건을 만족하는 첫 번째 요소를 반환하며, 만약 조건을 만족하는 요소가 없으면 undefined를 반환합니다.
배열을 변경하지 않고 원하는 요소를 찾을 때 유용합니다.