React 기초(2)

📌 꼭 알아야하는 프로그래밍 도구

Template Literals

문자열을 다루기 쉽게 만든 문법
사용법: 백틱(``)과 ${ }

const name = "철수";
const greeting = `안녕하세요, ${name}님!`;

Destructuring(구조분해할당)

객체나 배열의 값을 쉽게 꺼내오는 문법
사용법: { } 객체, [ ] 배열

const person = { name: "철수", age: 25 };
const { name, age } = person; // 철수, 25

Spread/Rest Operator(연산자)

Spread: 배열이나 객체를 복사하거나 합칠 때 사용
사용법: ...을 붙이면 됨

//Spread
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

Rest: 함수나 배열/객체에서 나머지 값을 모을 때 사용

//Rest
const { name, ...rest } = { name: "철수", age: 25, city: "서울" };
console.log(rest); // { age: 25, city: "서울" }

📖 이 모든 문법의 공통점,

• 가독성: 코드가 짧고 직관적.
• 유연성: 다양한 상황에서 재사용 가능.
• 생산성: 반복 작업을 줄여 빠르게 개발 가능.

---

📝 더 나아가기

✏️ Destructuring(구조분해할당)

• 객체 Destructuring
  객체에서 키 이름을 기준으로 값을 추출해서 변수에 할당

//1.기본 예제
const person = { name: 'Alice', age: 25 };

// 객체의 값을 변수에 할당
const { name, age } = person;

console.log(name); // 'Alice'
console.log(age); // 25


//2.키 이름 변경하기 (변수 이름 바꾸기)
//키 이름과 다른 변수명으로 값을 추출
const person = { name: 'Alice', age: 25 };

const { name: userName, age: userAge } = person;

console.log(userName); // 'Alice'
console.log(userAge); // 25


//3.기본값 설정하기
//객체에 키가 없으면 기본값을 설정
const person = { name: 'Alice' };

const { name, age = 30 } = person;

console.log(name); // 'Alice'
console.log(age); // 30 (기본값)

추가로, 객체에서 title과 year를 디스트럭처링을 사용하여 추출하고 출력하는 코드를 작성
중첩으로 되어있는 객체는 key: {value}로 분해.

const movie = {
  title: "Inception",
  director: "Christopher Nolan",
  release: {
    year: 2010,
    month: "July"
  }
};

//답
const { title, release: { year } } = movie;
console.log(title); // Inception
console.log(year);  // 2010

• 배열 Destructuring
  배열은 순서가 중요하기에 [ , , third]

let colors = ["red", "green", "blue"];
let [firstColor, secondColor] = colors;
console.log(firstColor);  // red
console.log(secondColor); // green

• 예시(1)
  • 배열에서 첫 번째와 세 번째 요소를 추출하여 first, third 변수에 담아 출력
    중첩으로 되어있는 객체는 [ , , ]로 분해.

const numbers = [10, 20, 30, 40, 50];

//답
const [first, , third] = numbers;
console.log(first); // 10
console.log(third); // 30

• 예시(2)
  • 호텔의 예약 확인 시스템의 함수라고 가정합니다. 아래 결과와 같이 출력되도록 함수를 완성해 보세요.
    풀이, date: firstDate를 집중해서 보기.

function confirmReservation(user) {
        // 여기에 user 객체를 구조 분해 할당 하세요.
        
        return `${name} 고객님의 ${roomType}룸 입실날짜는 ${firstDate} 입니다.`
}

const userInfo = {
  name: "James",
  roomType: "Deluxe",
  date: "2023-05-30"
}
const result = confirmReservation(userInfo);
console.log(result);

//답
function confirmReservation(user) {
        // 여기에 user 객체를 구조 분해 할당 하세요.
        const {name, roomType, date: firstDate} = user;
        
        return `${name} 고객님의 ${roomType}룸 입실날짜는 ${firstDate} 입니다.`
}

const userInfo = {
  name: "James",
  roomType: "Deluxe",
  date: "2023-05-30"
}
const result = confirmReservation(userInfo);
console.log(result); // 출력 결과: 'James 고객님의 Deluxe룸 입실날짜는 2023-05-30 입니다.'

✏️ Spread Operator(연산자)

• 객체에서의 사용
  객체 복사 및 확장 , 객체의 속성을 쉽게 다른 객체로 복사하거나 확장할 때 사용.

const originalUser = { name: "번개", age: 12 };
const updatedUser = { ...originalUser, location: "한국" };
console.log(updatedUser);  // { name: "번개", age: 12, location: "한국" }

• 배열에서의 사용
  배열 합치기, 두 배열을 간편하게 합칠 때 많이 사용.

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

✔︎ spread operator객체의 순서는 후순위로 덮어쓰게 된다.

✏️ Rest Operator(나머지 요소 가져오기)

...을 사용해서 나머지 요소를 배열로 가짐.

//예시(1)
const numbers = [1, 2, 3, 4, 5];

const [first, second, ...rest] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

//예시(2)
const person = { name: 'Kyu', age: 25, job: 'developer' };

const { name, ...rest } = person;

console.log(name); // 'Kyu'
console.log(rest); // { age: 25, job: 'developer' }