사전 진단 퀴즈 4단계 (배열, 함수, 비동기)

---

<strong>정답</strong>: 결과물을 새로운 배열로 반환해 주는 map 메서드를

사용해야 합니다.

<strong>풀이 과정</strong>: forEach는 단순히 배열의 요소를 한 번씩 순회하며

특정 동작을 실행할 뿐, 작업이 끝나면 undefined를 반환합니다. 반면 map은 기존 배열의 각 요소를 가공하여 똑같은 길이의 '새로운 배열'을 만들어냅니다.

// React 컴포넌트 내부에서의 map 활용
const products = [
  { id: 1, name: "노트북" },
  { id: 2, name: "마우스" },
];

function ProductList() {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

---

<strong>정답</strong>: 조건식에 지우고자 하는 글의 id와 일치하지 않는 데이터만

통과시키도록 작성하여 새로운 배열을 만듭니다.

<strong>풀이 과정</strong>: filter 메서드는 배열을 순회하며 조건식이 true를

반환하는 요소들만 모아 새로운 배열을 생성합니다. 원본 배열은 그대로 유지되므로 안전하게 데이터를 가공할 수 있습니다.

// React에서의 삭제 기능 구현 패턴
const posts = [
  { id: 1, title: "첫 글" },
  { id: 2, title: "두 번째 글" },
];
const deleteId = 1;

// id가 1이 아닌 글만 남겨서 새로운 상태 배열로 만듦
const newPosts = posts.filter((post) => post.id !== deleteId);
// 결과: [{ id: 2, title: "두 번째 글" }]

---

<strong>정답</strong>: 일반 함수는 누가 어떻게 호출했느냐에 따라 this가

동적으로 변하지만, 화살표 함수는 자신이 선언된 위치의 상위 스코프의 this를 영구적으로 물려받습니다(Lexical this).

<strong>풀이 과정</strong>: 자바스크립트의 일반 함수에서 this는 함수를 호출한

객체를 가리킵니다. 그래서 콜백 함수로 넘겨지는 순간 호출자가 브라우저나 전역 객체로 바뀌어 this를 잃어버리는 일이 잦습니다. 하지만 화살표 함수는 고유의 this를 아예 가지지 않기 때문에, 언제나 자기가 태어난 환경의 this를 가리킵니다.

---

<strong>정답</strong>: 데이터를 요청하는 API 함수 앞에 await 키워드를 붙이고,

그 코드를 감싸는 상위 함수에 async 키워드를 붙여 데이터가 도착할 때까지 다음 코드의 실행을 일시 정지시킵니다.

<strong>풀이 과정</strong>: 자바스크립트는 기본적으로 네트워크 통신처럼 오래

걸리는 작업이 끝나기를 기다려주지 않고 바로 다음 줄의 코드를 실행해 버립니다(비동기). 이를 우리가 글을 읽는 것처럼 순서대로(동기적으로) 흐르게 만들어주는 도구가 바로 async/await입니다.

// React 컴포넌트 내부에서의 데이터 통신 패턴
async function fetchWeather() {
  try {
    // 데이터를 받아올 때까지 이 줄에서 대기
    const response = await fetch("https://api.weather.com/...");
    const data = await response.json();

    // 데이터를 다 받아오면 비로소 상태 업데이트
    setWeatherState(data);
  } catch (error) {
    console.log("데이터를 불러오지 못했습니다.");
  }
}

---

MDN Web Docs: Array.prototype.map()

MDN Web Docs: 화살표 함수

MDN Web Docs: async와 await