React (3)

Destructuring : 객체나 배열의 속성을 쉽게 추출

• 객체 - 함수 매개변수에서 사용

function greet({ name, age }) {
  console.log(`안녕하세요, 제 이름은 ${name}이고 나이는 ${age}살입니다.`);
}
greet({ name: "홍길동", age: 28 });

객체형 안에서는 obj안의 'key'를 그대로 사용하여 분해한다는 것 또한 중요하다

• 배열 - 배열 요소를 위치에 따라 변수로 할당

예1)

const person = {
  name: "김길자",
  age: 25,
  job: "개발자"
};

const {name, age} = person
//이름과 나이를 추출하여 출력
console.log(name)
console.log(age)

예2)

const movie = {
  title: "Oppenheimer",
  director: "Christopher Nolan",
  release: {
    year: 2023
    month: "August"
  }
};

const { title, release: { year } } = movie;
//movie 에서 제목과 정보를 추출, 정보에서 년도를 력하기 위해 :{}를 사용
console.log(title); // Inception
console.log(year);  // 2010

단지 내가 원하는 정보를 추출하여 값을 불러오는 것을 Disturcturing이라고 한다.
빈번하게 사용하니 복기하면 좋다.

---

Spread Operator

• 배열등 요소를 개별 요소로 확장할 때 빈번히 사용

• 객체 또는 배열이 갖고 있는 상자를 찢고 펼치는 느낌!

• 객체 사용

  • 객체 복사 및 확장 : 객체의 속성을 쉽게 다른 객체로 복사,확장 할 때 사용

const originalUser = { name: "박준빈", age: 28 };
const updatedUser = { ...originalUser, location: "한국" };
console.log(updatedUser);  // { name: "박준빈", age: 28, location: "한국" }

정말 todo list만들 때 많이 사용했었다
객체의 속성을 전부 풀어주고 싶으면 ...을 사용하면 된다.
정신 바짝 차려!

• 배열 사용

  • 배열 합치기 : 두 배열을 간편히 합칠 때 사용

const first = [1, 2, 3];
const second = [4, 5, 6];
const combined = [...first, ...second];

console.log(combined);  // [1, 2, 3, 4, 5, 6]

Rest Operator (=나머지 연산)

함수의 매개변수에서 사용 또는 객체 리터럴이나 배열 리터럴에서 남은 부분을 하나의 변수로 그룹화 할 때 사용.

• 함수 매개변수

function sum(...numbers) {
    return numbers.reduce((acc, current) => acc + current, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

여기 또 ... 나왔다 정말 빈번하게 쓰이니까 이젠 잊어먹지 말자 @.@

• 객체 분해 할당

const person = {
    name: "John",
    age: 30,
    country: "USA",
    occupation: "Developer"
};

const { country, ...rest } = person;
console.log(rest); // { name: "John", age: 30, occupation: "Developer" }

이렇게 예시로 보면 확실히 도움이 된다.