[React.js 1] 2장 자바스크립트 실전

5. 구조 분해 할당

구조 분해 할당이란 배열이나 객체에서 요소를 해체하여 개별 변수에 그 값을 담을 때 사용합니다.

 

- 배열의 구조 분해 할당 

: 배열의 값을 순서대로 변수를 할당합니다.

let arr = [1, 2, 3];
let [one, two, three] = arr;

 

   특징          

• 변수 선언과 동시에 순서대로 할당가능 하기에 더 간결하게 코드 작성이 가능합니다.
• 배열의 길이와 할당할 변수의 개수가 일치하지 않아도 오류가 발생하지 않습니다.
  • 배열의 길이 > 변수의 길이 →  변수의 개수에 맞춰서 순서대로 할당합니다. 
  • 배열의 길이 < 변수의 길이 →  남은 변수에 undefined가 할당됩니다.

 

 

- 객체의 구조 분해 할당 

: 프로퍼티의 value 값을 변수에 할당합니다.

let person = { // 객체 생성
	name: "이정환",
	age: 25,
  	location: "경기도"
};

let { name, age, location } = person;

 

   특징

• 할당은 데이터 저장 순서가 아닌 key를 기준으로 합니다.

 

 

- 함수의 매개변수가 객체일 때 구조 분해 할당

: 전달된 객체에서 프로퍼티의 value를 매개변수에 각각 구조 분해 할당합니다.

function func({ name, age, location }) {
	console.log(name, age, location);
}


// 매개변수 이름 변경
function func({ name: n, age: a, location: l }) {
	console.log(n, a, l);
}

    특징

• 필요한 프로퍼티만 전달할 수도 있어 코드가 훨씬 더 유연해집니다.
• 변수 이름 옆에 ‘ : ’과 새 변수명 작성 시 새 이름으로 값이 할당됩니다. ( 매개변수의 이름 변경 )

---

6. 스프레드 연산자와 rest 매개변수

- 스프레드 연산자 ( = 전개 연산자 )

배열, 문자열, 객체 등 반복이 가능한 객체의 값을 개별 요소로 분리합니다. →  ‘ … ‘ 기호 사용

// 배열
let arrA = [1, 2, 3];

let arrB = [...arrA, 4, 5, 6];
// [1, 2, 3, 4, 5, 6] 출력
// 스프레드 연산자 사용x -> [[1, 2, 3], 4, 5, 6] 출력


// 객체
let objA = {
	a : 1,
	b : 2
};

let objB = {
	...objA,
	c : 3,
	d : 4
};
// {a: 1, b: 2, c: 3, d: 4}출력


// 함수
function func(a, b, c) {
	console.log(a, b, c);
}

let arr = [1, 2, 3];
func(...arr);
// 1 2 3 출력

++ 매개변수와 구조 분해 할당의 차이점

구조 분해 할당 : 전달하는 인수 1개이며 그 값이 객체여야 합니다.

스프레드 연산자 : 인수가 여러 개로 나뉘어 전달하므로 매개변수를 여러 개 선언해야 한다는 차이가 있습니다.

 

 

- rest 매개변수 ( = 나머지 매개변수 )

개별 요소를 순차적으로 배열에 저장해 묶습니다. → 매개변수 앞에 ‘ ... ‘ 을 기호를 붙여 사용합니다.

function func(...rest) {
	console.log(rest);
}

func(1, 2, 3, 4);
// [1, 2, 3, 4] 출력


// 매개변수와 함께 사용시
function func(p, ...rest) {
	console.log(p);
	console.log(rest);
}

func(1, 2, 3, 4);
// 1 츨력
// [2, 3, 4] 츨력

++ 매개변수와 함께 사용시 주의 사항 

rest 매개변수는 나머지 값을 모두 배열에 저장하므로 마지막에 선언해야 합니다.

인수는 왼쪽에서 오른쪽 방향으로 순차적으로 할당하기에 다른 매개변수에 값을 할당하기 위해선 rest 매개변수를 마지막에 작성해야 합니다.

 

---

7. 배열과 메서드

배열 메서드

자바스크립트에서 배열을 쉽게 다를 수 있도록 제공하는 여러 메서드입니다.

 

- 요소의 추가와 삭제 메서드

• push : 배열 맨 끝에 요소를 추가 & 새로운 길이를 반환합니다.

let food = ["짜장면", "피자", "치킨"];
const newLength = food.push("탕수육", "라자냐");

console.log(food); // ["짜장면", "피자", "치킨", "탕수육", "라자냐"] 출력
console.log(`새로운 배열의 길이: ${newLength}`); // 새로운 배열의 길이: 5

 

•  pop : 배열의 맨 끝 요소 제거 & 제거한 요소 반환합니다.

let food = ["짜장면", "피자", "치킨"];
const removedItem = food.pop();

console.log(removedItem); // 치킨
console.log(food); // ["짜장면", "피자"]

 

•  unshift : 맨 앞에 요소 추가 & 새 배열의 길이 반환합니다.

let food = ["짜장면", "피자", "치킨"];
const newLength = food.unshift("갈비찜");

console.log(food); // ["갈비찜", "짜장면", "피자", "치킨"]
console.log(`새로운 배열의 길이: ${newLength}`); // 새로운 배열의 길이: 4

 

•  shift : 맨 앞 요소 제거 & 제거한 요소 반환합니다.

let food = ["짜장면", "피자", "치킨"];
const removedItem = food.shift();

console.log(removedItem); // "짜장면"
console.log(food); // ["피자", "치킨"]

++  push와 pop이 shift와 unshift보다 빠르고 성능이 좋습니다.

shift와 unshift → 맨 앞에서 요소를 변경하므로 기존 배열 요소의 인덱스에 변경이 생깁니다.

push와 pop → 맨 뒤에서 요소를 변경하므로 기존 배열 요소의 인덱스가 변경 없이 유지됩니다.

 

 

•  concat : 서로 다른 배열 이어 붙여 새 배열을 반환합니다. ( 원본 배열 수정 x )

let arrA = [1, 2];
let arrB = [3, 4];
let arrC = arrA.concat(arrB);  

console.log(arrC); // [1, 2, 3, 4]
console.log(arrA); // [1, 2] -> 기존 배열 변화x

 

•  slice : 기존 배열의 특정 범위를 잘라 새로운 배열을 반환합니다. ( 원본 배열 수정x )

arr.slice(start, end); // 배열의 범위 지정하는 두 인수 전달

const arr = [1, 2, 3];
const sliced = arr.slice(0, 2); 

console.log(arr); // [1, 2, 3] -> 기존 배열 변화x
console.log(sliced); // [1, 2]


// end 없이 start만 음수 인덱스로 전달시
const arr = [1, 2, 3, 4, 5];

console.log(arr.slice(-1)); // [5]
console.log(arr.slice(-2)); // [4, 5]
console.log(arr.slice(-3)); // [3, 4, 5]

    특징 

• end 값 전달하지 않으면 start부터 배열 끝까지 잘라냅니다.
• 인수로 음숫값 전달 시 배열의 맨 끝부터 음수의 절댓값만큼 잘라냅니다. 
• 음숫값 전달로 뒤에서부터 셀 때는 0이 아닌  -1이 첫 번째 인덱스 번호입니다.

 

 

- 순회 메서드

•  forEach : 배열의 모든 요소에 순서대로 접근해 특정 동작을 수행합니다.

function cb(item, index, array) { 
	console.log(`${idx}번째 요소: ${item}`);
}
arr.forEach(cb); // 인수로 함수를 요구함 -> 전달한 함수 = 콜백함수

// 함수 표현식, 화살표 함수로 표현 가능
arr.forEach((item, idx) => { console.log(`${idx}번째 요소: ${item}`);});

 

 

 

- 탐색 메서드 :  검색, 카테고리, 필터링 등 여러 상황에 유용

• indexOf : 찾으려는 요소의 인덱스를 반환합니다.

arr.indexOf(item, fromIndex);
// item : 찾으려는 요소 값
// fromIndex : 탐색을 시작할 인덱스 번호 (생략 가능 → 0번째 인덱스부터 탐색)

    특징

• 음수 지정하면 맨 뒤에서부터 탐색 시작합니다.
• 찾는 요소가 배열에 없거나 인수가 배열의 길이보다 크거나 같은 경우 -1을 반환합니다.
• 염격한 비교 연산자 ( === ) 사용으로 자료형이 다르면 다른 값으로 여깁니다.
• 값이 아닌 참조값을 비교하는 객체는 탐색할 수 없습니다.

 

•  includes : 배열에 특정 요소가 있는지 판별 & 불리언 값을 반환합니다.

arr.includes(item, fromIndex);
// indexOf와 사용법이 동일합니다.

 

• findIndex : 배열에서 찾으려는 요소의 인덱스 번호를 반환합니다.

function determine(item, idx, arr) { 
  if (item % 2 === 0) {
    return true; // true 반환시 탐색을 끝냄 & 탐색을 멈춘 인덱스 번호 반환
  } else {
    return false;
  }
}

let arr = [1, 3, 5, 6, 8];

let index = arr.findIndex(determine);

// 화살표 함수와 삼항 연산자 이용
let index = arr.findIndex((item) =>
  item % 2 === 0 ? true : false
);

    특징

• 인수로 콜백함수 전달( == 판별함수 )
• 판별함수에 만족하는 첫 번째 요소의 인덱스 반환되며 요소가 없으면 -1을 반환합니다.
• 판별함수 사용으로 객체 탐색이 가능합니다. ( 엄격 비교 연산자 사용하는 indexOf와의 차이점 )

 

•  find : 인수로 판별함수 전달 & 배열에서 만족하는 요소 찾음 / 요소 반환

let arr = [
  { name: "이종원" },
  { name: "이정환" },
  { name: "신다민" },
  { name: "김효빈" }
];

let element = arr.find((item) => item.name === "이정환");
console.log(element); // {name: "이정환"} -> 요소 반환됨

 

• filter : 배열에서 조건을 만족하는 요소만 모아 새로운 배열로 반환 / find와 비슷

let arr = [
  { name: "이종원", hobby: "축구" },
  { name: "이정환", hobby: "영화" },
  { name: "신다민", hobby: "축구" },
  { name: "김효빈", hobby: "노래" }
];

let filteredArr = arr.filter(
  (item) => item.hobby === "축구"
);

 

 

 

 

- 변형 메서드 : 배열 변형하거나 요소 재정렬

•  map : 함수 호출 결과를 모아 새 배열로 반환합니다.

// arr.map(callback(item, index, array)); 형식

// 배열
let arr = [1, 2, 3, 4];
let newArr = arr.map((item) => item * 3); // 각 요소에 3을 곱한 배열 저장

// 객체
let arr = [
  { name: "이종원", hobby: "축구" },
  { name: "이정환", hobby: "영화" },
  { name: "신다민", hobby: "축구" },
  { name: "김효빈", hobby: "노래" }
];

let newArr = arr.map((item) => item.name); // name프로퍼티만 가진 객체 생성

 

• sort : 요소를 정렬합니다. ( 새로운 배열 반환 x 기존 배열 정렬 o )

// arr.sort(compare(a, b)) 형식

let arr = ["b", "a", "c"];

arr.sort(); // 비교함수 생략

console.log(arr); // ["a", "b", "c"]

   특징

• 비교함수 : 인수로 사용되는 콜백 함수로 생략 시 사전순, 오름차순으로 정렬합니다.
• 기본적으로 요소를 문자열 취급하기에 숫자로 이루어진 배열 정렬 시 비교함수가 필요합니다.

// 숫자 배열 정렬시
function compare(a, b) {
  if (a > b) {
    return 1;
  } else if (a < b) {
    return -1;
  } else {
    return 0; // 서로 동일하면 자리 변경x
  }
} // ( a, b ) 전달 → 양수 : b가 앞에 / 음수 : b가 뒤에 / 0 : 둘의 순서 동일함


let arr = [10, 5, 3];
arr.sort(compare);

 

•  join : 배열 요소를 모두 연결해 하나의 문자열 반환합니다.

// arr.join(separator);
// separator : 각 요소를 구분하는 문자열, 필수x -> 기본값인 콤마로 구분

let arr = ["안녕", "나는", "이정환"];

console.log(arr.join()); // 구분자 생략 -> 안녕,나는,이정환
console.log(arr.join("-")); // 구분자 - 로 지정 -> 안녕-나는-이정환 출력

 

• reduce : 순회하며 인수로 제공한 함수 실행 & 단 하나의 결괏값만 반환합니다.

arr.reduce((acc, item, index, array) => {
	(...)
}, initial); // 2개의 인수 전달 → 리듀서(= 콜백함수), 초기값(initial)


//ex
let arr = [1, 2, 3, 4, 5];
let result = arr.reduce((acc, item) => acc + item, 0);

console.log(result);

   특징

• 리듀서 : 배열의 모든 요소에 대해 각각 실행합니다. → acc : 이전 함수의 호출 결과 저장 / initial이 acc의 초깃값
• 초기값(initial) 생략 시 배열의 첫 번째 요소가 초기값이 됩니다.

---

8. Date 객체와 날씨

생성

생성자 문법으로 생성하며 인수로 정보 전달 시 생성과 초기화 동시에 진행합니다.

let date = new Date(); // 인수 지정x -> 현재의 날짜와 시간 저장된 객체 반환

 

시간

한국의 경우 협정 세계시(UTC)의 한국 표준시에 맞춰 1970년 1월 1일 99시 0분 0초를 기준으로 동작하며 UTC+0으로 표현합니다.

let Jan01_1970 = new Date(0);
console.log(Jan01_1970);

// Thu Jan 01 1970 09:00:00 GMT+0900 (한국 표준시)

• 타임스탬프 : UTC+0을 기점으로 흘러간 밀리초의 시간을 의미하며 인수 전달을 통해 특정 시간 정보를 갖는 객체 반환합니다.
• getTime 메서드를 통해 해당 객체가 가진 시간을 타임스탬프값으로 반환합니다.

 

- 원하는 날짜로 Date 객체 생성 

• 문자열 특징 : 전달 형식이 다른 문자열을 자동으로 분석해 적절한 날짜 설정합니다.

// 문자열로 특정 날짜 전달
let date1 = new Date("2000-10-10/00:00:00");
let date2 = new Date("2000.10.10/00:00:00");

console.log("1:", date1); // 1: Tue Oct 10 2000 00:00:00 GMT+0900 (한국 표준시)
console.log("2:", date2); // 2: Tue Oct 10 2000 00:00:00 GMT+0900 (한국 표준시)

 

• 숫자 특징 : year, month, date, hours, minutes, seconds, milliseconds 순서에 맞춰 숫자 전달합니다.
  • month → 0부터 시작하기에 월마다 -1 한 숫자 전달해야 합니다.

// 숫자로 특정 날짜 전달
let date1 = new Date(2000, 10, 10, 0, 0, 0, 0);
let date2 = new Date(2000, 9, 10); // 0부터 시작하므로 10월 출력하려면 9를 전달

console.log("1:", date1); // 1: Fri Nov 10 2000 00:00:00 GMT+0900 
console.log("2:", date2); // 2: Tue Oct 10 2000 00:00:00 GMT+0900

 

• 타임스탬프 : 타임스탬프값 인수로 전달하면 자동 분석해 적절한 날짜 반환

// 타임스탬프로 날짜 생성
let date = new Date(2000, 9, 10);
let timeStamp = date.getTime(); // 저장된 날짜를 타임 스탬프로 변환
console.log(timeStamp); // 971103600000

let dateClone = new Date(timeStamp); // 타임스탬프값을 인수로 전달
console.log(dateClone); // Tue Oct 10 2000 00:00:00 GMT+0900

 

 

- 날짜 요소 얻기

• getFullYear() : 네 자릿수의 연도 반환합니다.
• getMonth() : 0~11로 표현되는 월을 반환합니다.
• getDate() : 일을 반환합니다.
• getDay() : 0~6으로 표현하는 요일 반환합니다. ( 0 == 일요일 ~ 6 == 토요일 )
• getHours() , getMinutes() , getSeconds() , getMilliseconds() : 시간, 분, 초, 밀리초 반환합니다.

 

- 날짜 요소 수정

• setFullYear() : 연도를 수정합니다.
• setMonth() : 월을 수정합니다.
• setDate() : 일을 수정합니다.
• setHours() , setMinutes() , setSeconds() , setMilliseconds() : 시간, 분, 초, 밀리초를 수정합니다.

 

- 객체 출력

• toString : 문자열로 반환합니다. 
• toDateString : 현재 날짜만 출력합니다. ( 시간 제외 )
• toLocaleString, toLocaleDateString : 현지화된 날짜와 시간 반환합니다.

// 문자열로 반환
console.log(today.toString()); // Tue Oct 10 2000 22:00:00 GMT+0900

// 현재 날짜만 출력
console.log(today.toDateString()); // Tue Oct 10 2000

// 현지화된 날짜와 시간 반환
console.log(today.toLocaleString()); // 2000. 10. 10. 오후 10:00:00 -> 날짜와 시간 모두 반환
console.log(today.toLocaleDateString()); // 2000. 10. 10. -> 날짜만 반환

 

- 응용

• n 월씩 이동 : 월 단위의 달력 이동 기능

function moveMonth(date, moveMonth) {
  const curTimestamp = date.getTime(); // 타임스탬프값 저장
  const curMonth = date.getMonth(); // 월 저장

  const resDate = new Date(curTimestamp); // Date와 동일한 객체 새로 생성
  resDate.setMonth(curMonth + moveMonth); // 기존 월에 이동할 월만큼 더함

  return resDate;
} // 이 함수 호출시 moveMonth만큼 월을 앞이나 뒤로 이동

const dateA = new Date("2000-10-10");
console.log("A: ", dateA); // A : Tue Oct 10 2000 09:00:00 GMT+0900

const dateB = moveMonth(dateA, 1);
console.log("B: ", dateB); // B : Fri Nov 10 2000 09:00:00 GMT+0900

const dateC = moveMonth(dateA, -1);
console.log("C: ", dateC); // C : Sun Sep 10 2000 09:00:00 GMT+0900

 

• 배열에서 이번 달에 해당하는 날짜만 필터링

// pivotDate : 필터링할 월이 있는 Date 객체, dateArray :  코드에서 작성한 Date 객체
function filterThisMonth(pivotDate, dateArray) { 
  const year = pivotDate.getFullYear();
  const month = pivotDate.getMonth();

  const startDay = new Date(year, month, 1, 0, 0, 0, 0); // 가장 빠른 시간
  const endDay = new Date(year, month + 1, 0, 23, 59, 59); // 가장 늦은 시간

  const resArr = dateArray.filter(
    (it) =>
      startDay.getTime() <= it.getTime() && 
      it.getTime() <= endDay.getTime()
  ); // 시작 날짜와 마지막 날짜안의 객체 요소만 필터링
  return resArr;
}

const dateArray = [
  new Date("2000-10-1"),
  new Date("2000-10-31"),
  new Date("2000-11-1"),
  new Date("2000-9-30"),
  new Date("1900-10-11")
];

const today = new Date("2000-10-10/00:00:00"); 
const filteredArray = filterThisMonth(today, dateArray);

console.log(filteredArray);

// 0: Sun Oct 01 2000 00:00:00 GMT+0900
// 1: Tue Oct 31 2000 00:00:00 GMT+0900

++ 가장 늦은 시간이 다음 달 0일 23시 59분 59초인 이유

일을 0으로 설정 시 해당 월 바로 이전 월의 마지막 날을 의미함 ( 10월 0일 == 9월의 마지막 날 )

 

---

9. 비동기 처리

동기

: 위에서부터 아래로 순차적으로 실행하는 것으로 앞의 작업을 완료해야 다음 작업 수행됩니다.

⇒ 작업 흐름 파악은 쉽지만 지연 문제가 생김

 

비동기

: 앞의 작업과 관계없이 특정 작업을 독립적으로 동작하게 합니다. ( 실행 순서 ≠ 완료 순서 )

setTimeout(() => { ①
  console.log("1번!");
}, 3000);

console.log("2번!"); ②

// 2번!
// 1번!

 

• 콜백 함수로 비동기 처리하기

// 1초 기다린 후 전달한 인수에 2 곱해 콘솔에 출력
// setTimeout : JS에 내장된 함수, => 콜백함수 반환값 ≠ setTimeout 반환값

function double(num) {
  setTimeout(() => {
    const doubleNum = num * 2;
    console.log(doubleNum);
  }, 1000);
}

double(10);

• setTimeout의 경우 콜백 함수가 아닌 타이머의 식별 번호 반환하기에 return으로 결괏값 반환할 수 없습니다.
• 결과값 반환이나 활용을 위해선 함수를 인수로 전달해야 합니다.

function double(num, cb) {
  setTimeout(() => {
    const doubleNum = num * 2;
    cb(doubleNum); // 비동기작업 완료시 콜백함수 호출해 결괏값 인수로 전달
  }, 1000);
}

double(10, (res) => {  // 결괏값 출력을 위함 함수를 인수로 전달
  console.log(res);
});

 

 

• 프로미스 객체를 이용한 비동기 처리

  

진행 단계 : 3가지 상태로 나뉘어 관리됩니다.

대기 : 작업이 완료되기 전 상태

성공 : 성공적으로 완료 == 해결(rsolve)

실패 : 모종의 이유로 실패 == 거부(reject)

 

 

• 실험 함수 : 비동기 작업 수행하는 함수로 2개의 매개변수 제공받습니다.
• 매개변수 : 대기 상태의 비동기 작업을 성공 or 실패 상태로 변경함
  • resolve : 비동기 작업의 상태를 성공으로 바꾸는 함수로 then메서드로 값을 전달합니다.
  •  reject : 비동기 작업의 상태를 실패 바꾸는 함수로 catch메서드로 값을 전달합니다.

const promise = new Promise(function (resolve, reject) {
  setTimeout(() => {
    resolve("성공"); // 비동기 작업의 결괏값
  }, 500);
});

promise.then(function (res) { // then 메서드 : 작업이 성공했을 때 실행할 콜백 함수 설정
  console.log(res);
});



const promise = new Promise(function (resolve, reject) {
  setTimeout(() => {
    reject("실패");
  }, 500);
});


promise.catch(function (err) { // catch 메서드 : 작업이 실패했을 때 실행할 콜백함수 설정
  console.log(err);
});

---

Quiz 

1. 객체를 구조분해할당할 때는 ( key )를 기준으로 합니다.

 

2.  rest 매개변수는 나머지를 모두 배열에 저장하므로 매개변수의 ( 마지막 )에 작성해야 합니다.

 

3. indexOf는 찾으려는 요소의 ( 인덱스 )를 반환하고 findIndex는 찾으려는 요소의 ( 인덱스 번호 ) 를 반환한다는 차이가 있습니다.

 

4. sort 메서드는 기본적으로 요소를 ( 문자열 ) 취급하기에 ( 숫자 )로 이루어진 배열을 정렬하려면 비교함수가 필요합니다.

 

5.  ( getTime ) 메서드는 해당 객체에서 시간에 해당하는 타임스탬프를 반환합니다.

 

6. Date 객체에서 월은 ( 0부터 11 )까지 사이의 숫자로 표현됩니다.

 

7. ( then ) 메서드와 ( catch ) 메서드를 이용해 작업이 성공하거나 실패했을 때 실행할 콜백 함수를 별도로 설정할 수 있습니다.

 

코드 작성

 

1. 아래의 객체 배열에서 취미가 잠자기인 요소만 찾아 새로운 배열로 반환해 콘솔로 출력하는 코드마저 작성하기

let hobbyArr = [

  { name: "덕설", hobby: "뛰어다니기" },

  { name: "덕망", hobby: "잠자기" },

  { name: "미고", hobby: "밥 먹기" },

  { name: "덕조", hobby: "잠자기" }

];

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

let useFilter = hobbyArr.filter(

  (item) => item.hobby === "잠자기"

);

 

console.log(useFilter);

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

2. 1번 문제를 비동기 작업의 상태가 성공일 때만 1초 후에 콘솔에 출력하도록 작성하기 ( 프로미스 객체 이용한 비동기 처리 이용 )

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

const promise = new Promise(function (resolve, reject) {

  setTimeout(() => {

    resolve(useFilter);

  }, 1000);

});

 

promise.then(function (res) {

  console.log(res);

});

}

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

---

출처 :  이정환, 『한 입 크기로 잘라먹는 리액트』, 프로그래밍인사이트(2023)

Corner React.js 1

Editor: ssxb