모던 JavaScript 핵심만 (ES6+)

Q1. 다음 중 React.useState()의 반환값을 올바르게 처리하는 코드는?

const count = React.useState(0); const [count, setCount] = React.useState(0); const {count, setCount} = React.useState(0); let count = React.useState(0)[0];

💡 React.useState()는 [현재값, 변경함수] 형태의 배열을 반환합니다. 배열 구조분해할당으로 const [count, setCount] = React.useState(0)처럼 받는 것이 표준 방식입니다. useState가 배열을 반환하기 때문에 객체 구조분해({})가 아닌 배열 구조분해([])를 사용해야 합니다.

Q2. React 상태 배열에 새 항목을 추가할 때 올바른 방법은?

items.push(newItem); setItems(items); setItems([...items, newItem]); items[items.length] = newItem; setItems(items); setItems(items.add(newItem));

💡 push()나 직접 인덱스 할당은 원본 배열을 직접 수정하므로 React가 변경을 감지하지 못할 수 있습니다. 스프레드([...items, newItem])로 새 배열을 생성하는 것이 React의 불변성 원칙에 맞는 올바른 방법입니다.

Q3. 화살표 함수에서 객체를 직접 반환할 때 올바른 문법은?

const getUser = () => { name: 'Kim' }; const getUser = () => ({ name: 'Kim' }); const getUser = () => return { name: 'Kim' }; const getUser = () => [{ name: 'Kim' }];

💡 화살표 함수에서 중괄호{}는 함수 body로 인식됩니다. 객체 리터럴을 바로 반환하려면 소괄호()로 감싸야 합니다: () => ({ name: 'Kim' }). 소괄호 없이 쓰면 함수 body로 파싱되어 undefined를 반환합니다.

Q4. 다음 코드의 출력 결과는? const user = { name: 'Kim', age: null }; const { name = '익명', age = 0 } = user; console.log(name, age);

익명 0 Kim null Kim 0 익명 null

💡 구조분해할당의 기본값은 값이 undefined일 때만 적용됩니다. null은 undefined가 아니므로 기본값이 적용되지 않습니다. name은 'Kim'(기본값 무시), age는 null(기본값 무시)이 됩니다.

Q5. 배열 메서드에 대한 설명으로 올바른 것은?

filter()는 원본 배열을 변경한다 map()은 조건에 맞는 항목만 필터링한다 reduce()는 배열을 하나의 값으로 축약한다 map()은 항상 원본보다 짧은 배열을 반환한다

💡 reduce()는 배열의 각 항목을 누적하여 최종적으로 하나의 값(숫자, 문자열, 객체 등)을 반환합니다. map()은 각 항목을 변환하여 같은 길이의 새 배열을 반환하고, filter()는 조건에 맞는 항목만 추출합니다. 두 메서드 모두 원본 배열을 변경하지 않습니다.

🎉

퀴즈 통과!

점수: 0점 — 수고하셨습니다!

다음 강의로 →

😅

아쉽네요!

점수: 0점 — 70점 이상이 되어야 통과합니다.