React를 위한 JavaScript 기초 훑어보기 (2/2)

Part 3. 배열 내장 함수 (Array Methods)

기존의 for 반복문은 데이터를 담을 빈 배열을 만들고, 인덱스를 증가시켜야 해서 조금 귀찮은 면이 있다. 배열 내장 함수는 코드가 간결하고, 원본 배열을 건드리지 않고 새로운 배열을 만든다는 점에서 React에 적합하다.

보완 포인트

• React에서는 “불변성(immutability)”이 매우 중요하므로, map / filter / find처럼 새 값을 만들어 반환하는 방식이 특히 자주 쓰인다.
• map은 “변환”, filter는 “선별(삭제)”, find는 “단일 검색”으로 기억하면 편하다.

 

1. map()

배열의 모든 요소를 하나씩 꺼내서 변환한 후 새로운 배열로 만들어준다.

const numbers = [1, 2, 3, 4, 5];

// 모든 숫자를 제곱해서 새로운 배열 만들기
// 1) map 안에 들어가는 함수는 '각 요소'를 어떻게 바꿀지 결정함
// 2) num은 배열 안의 숫자 하나 하나를 의미함
const sqaured = numbers.map((num) => num * num);

console.log(numbers); // [1,2,3,4,5]
console.log(squared); // [1,4,9,16,25]

const menus = ["짜장면", "짬뽕", "탕수육"];

// 메뉴 이름을 <li> 태그 문자열로 바꾸기
const menuList = menus.map((menu) => '<li>${menu}</li>');

console.log(menulist);

const menus = ["짜장면", "짬뽕", "탕수육"];

// 메뉴 이름을 <li> 태그 문자열로 바꾸기
const menuList = menus.map((menu) => '<li>'${menu}</li>');

console.log(menuList);

• React 포인트: JSX에서 리스트 렌더링할 때 map()을 거의 필수로 사용한다.
  예: {menus.map(menu => <li key={menu}>{menu}</li>)}

 

2. filter() : 거름망 (Filtering)

배열의 요소 중 조건이 true인 것만 남기고, 나머지는 걸러내서 새로운 배열을 만든다. 주로 “삭제” 기능을 구현할 때 사용한다.

const scores = [85, 40, 90, 20, 75];

// 50점 이상인 점수만 남기기
// score가 50보다 크거나 같으면 통과(true), 아니면 탈락(false)
const passed = scores.filter((score) => score >= 50);
console.log(passed); // [85, 90, 75];

const users = [
  { id: 1, name: "철수" },
  { id: 2, name: "영희" },
  { id: 3, name: "민수" }, // 삭제 대상
];

const result = users.filter((user) => user.id !== 3);
console.log(result);

• React 포인트: 예를 들어 “장바구니에서 특정 상품 제거” 같은 경우에 filter()를 자주 쓴다.

 

3. find()

filter()는 조건에 맞는 걸 모두 찾아서 배열로 주지만, find()는 조건에 맞는 첫 번째 요소 하나만 찾아서 반환한다.

const people = [
  { id: 1, name: "짱구", age: 5 },
  { id: 2, name: "철수", age: 5 },
  { id: 3, name: "훈이", age: 5 },
];

const cheolsu = people.find((person) => person.name === "철수");

console.log(cheolsu);

React 포인트: 게시판 리스트에서 특정 글을 클릭했을 때, 그 글의 상세 내용을 보여주기 위해 데이터를 찾을 때 주로 사용한다.

 

4. 화살표(=>) 함수로 코드 줄이기

const nums = [1, 2, 3];

const result1 = nums.map(function (n) {
  return n * 2;
});

// react 스타일
const result2 = nums.map((n) => n * 2);

보완 포인트

• 한 줄 반환이면 {}와 return을 생략할 수 있다.
• 하지만 로직이 길어지면 가독성을 위해 {}를 쓰는 편이 낫다.

 

복습 예제

const cart = [
  { id: 1, name: "노트북", price: 100, onSale: true },
  { id: 2, name: "마우스", price: 20, onSale: false },
  { id: 3, name: "키보드", price: 50, onSale: true },
];

const saleItems = cart.filter((item) => ???);
const salePrices = saleItems.map((item) => ???);

console.log(saleItems);
console.log(salePrices);

 

 

Part 4. 비동기 처리 (Asynchronous)

1. 동기(Synchronus) vs 비동기(Asynchronous)

한 번에 하나씩 순서대로 일을 처리하면 동기 처리, 데이터를 가져오는 건 뒷단에서 하고 그 동안 다른 일을 하는 것은 비동기 처리.

보완 포인트

• 브라우저에서 네트워크 요청(서버 API 호출)은 대표적인 비동기 작업이다.
• 비동기 처리를 잘못하면 “데이터가 아직 오기 전인데 화면에서 사용” 같은 문제가 생긴다.

 

2. Promise (약속)

비동기 작업은 언제 끝날지 모른다. 그래서 자바스크립트는 Promise라는 객체를 준다.

• “지금은 데이터가 없는데, 나중에 작업이 끝나면 성공했는지 실패했는지 결과값을 주는 것”
• 성공하면 .then()으로 데이터를 받고
• 실패하면 .catch()로 에러를 잡음

요즘 React에서는 .then보다 async / await를 씀.

 

3. Async/Await

.then() 대신 코드를 동기적인 것처럼 보이게 만드는 문법

1. 함수 앞에 async를 붙여서 비동기 함수임을 선언
2. 오래 거리는 작업(서버 요청 등) 앞에 await를 붙임. 끝날 때까지 다음 줄로 안 넘어가고 기다림

// 2초 뒤에 "완료!"를 외치는 함수 (서버 요청 흉내)
function getDataFromDatabase() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("데이터 도착 완료");
    }, 2000); // 2초 대기
  });
}

// 2. async/await를 사용한 함수
async function printData() {
  console.log("1. 데이터 요청 보냄...");
  const result = await getDataFromDatabase();

  console.log('2. ${result}');
  console.loh("3. 작업 끝!");
}

printData();

보완 포인트

• await는 Promise가 해결될 때까지 해당 줄에서 “기다리는 것처럼” 보이게 만든다.
• 다만 실제로는 전체 프로그램이 멈추는 게 아니라, 다음 작업(이벤트 루프)이 계속 돌면서 처리된다.

 

4. API 호출 (fetch)

JSONPlaceholder 서버 사용해보기

async function getUser() {
  try {
    console.log("데이터를 불러오는 중...");
    // fetch를 통해 api로 요청 보내기
    // await를 썼으므로 응답이 올 때까지 기다림
    const response = await fetch("https://jsonplaceholder.typicode.com/users/1");

    // 받아온 응답을 자바스크립트 객체(JSON)로 변환
    // await 사용하기
    const user = await response.json();

    // 데이터 확인
    console.log("성공!");
    console.log('이름: ${user.name}');
    console.log('이메일: ${user.email}');
  } catch (error) {
    console.log("에러 발생!", error);
  }
}

getUser();

보완 포인트 (React 에서 고려할만한 부분)

• API 호출은 보통 try/catch로 감싸서 “실패 케이스”까지 처리한다.
• 네트워크 에러뿐 아니라, 응답이 왔더라도 상태 코드(예: 404, 500)가 실패일 수 있어 별도 처리가 필요한 경우도 많다.