React 기초(1)

📖 객체와 배열

구분	객체(Object)	배열(Array)
구조	키(key)-값(value) 쌍으로 구성	순서(index)가 있는 요소들로 구성
순서	순서가 보장되지 않음	순서가 보장됨
접근법	키(key)를 통해 값에 접근	인덱스(index)를 통해 요소에 접근
용도	관련 있는 데이터를 그룹화하여 표현	목록이나 순차 데이터 관리에 사용

 JSON(JavaScript Object Notation)
 JSON은 데이터를 저장하고 전달하기 위한 가볍고 간단한 형식이다.
 중괄호 { }는 객체, 대괄호 [ ]는 배열로 나타낸다.

📌 배열을 다룰 때 자주 사용하는 메서드

map

배열의 각 요소를 변환해서 새로운 배열을 만드는 메서드
기능: 배열의 모든 요소를 하나씩 꺼내어 콜백 함수를 실행한 뒤 그 결과를 새 배열에 저장

const numbers = [1, 2, 3, 4];
// 각 숫자에 2를 곱한 새 배열을 만듭니다.
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]
console.log(numbers); // [1, 2, 3, 4] (원본은 그대로) 

filter

배열의 요소 중 조건을 만족하는 값들만 골라서 새로운 배열을 만드는 메서드
기능: 콜백 함수에서 true 를 반환하는 요소만 새 배열에 포함

const numbers = [1, 2, 3, 4, 5, 6];
// 짝수만 골라냅니다.
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]
console.log(numbers); // [1, 2, 3, 4, 5, 6] (원본은 그대로)

reduce

배열의 모든 요소를 사용해 하나의 결과값을 만드는 메서드
기능: 콜백 함수는 두 개의 주요 인자를 받음(누적 계산이나 합산을 할 때 많이 사용)
"저금통에 동전을 넣는다"라고 생각하면 된다, 동전을 하나씩 꺼내면서 합계(누적값)를 계산해 나가고 모든 동전을 다 확인한 뒤 최종 결과(총합)를 얻는다.

accumulator (누적값): 이전 단계까지의 결과
currentValue (현재값): 현재 처리하고 있는 요소

array.reduce((누적값, 현재값) => {
// 누적 계산을 하는 코드
  return 새로운 누적값;
}, 초기값);

//예시(1): 숫자합계
//(0은 초기값입니다. 초기값이 없으면 첫 번째 요소가 초기값이 됩니다.)
const numbers = [1, 2, 3, 4];

const sum = numbers.reduce((acc, curr) => acc + curr, 0);

console.log(sum); // 10

//예시(2): 배열에서 가장 큰 숫자 찾기
const numbers = [5, 12, 8, 130, 44];

const max = numbers.reduce((acc, current) => {
  return acc > current ? acc : current; // 더 큰 값을 누적
}, numbers[0]); // 초기값은 첫 번째 요소

console.log(max); // 130

//예시(3): 객체 배열 합치기
const items = [
  { name: "사과", price: 1000 },
  { name: "바나나", price: 2000 },
  { name: "체리", price: 3000 }
];

const totalPrice = items.reduce((acc, item) => {
  return acc + item.price; // 가격을 누적해서 더함
}, 0);

console.log(totalPrice); // 6000

sort

배열의 요소를 정렬하는 메서드
기능: 원본 배열이 정렬되며, 새로운 배열은 반환하지 않음
(기본적으로 문자열 기준으로 정렬하지만, 숫자 등을 정렬하려면 콜백 함수를 사용)

//문자열 정렬
const fruits = ["banana", "apple", "grape"];
fruits.sort();
console.log(fruits); // ["apple", "banana", "grape"]
//숫자 정렬
const numbers = [4, 2, 10, 1];
// 오름차순 정렬
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 4, 10]
// 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers); // [10, 4, 2, 1]

---

📝 간략한 정리

메서드	기능	반환값
map()	각 요소를 변환하여 새 배열 생성 새로운 배열	변경되지 않음
filter()	조건을 만족하는 요소만 골라 새 배열 생성 새로운 배열	변경되지 않음
reduce()	누적 계산으로 하나의 결과값 생성 최종 결과값	변경되지 않음
sort()	요소를 정렬 원본 배열 반환	변경됨

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 1. map: 각 숫자를 제곱
const squared = numbers.map(num => num ** 2);
console.log(squared); // [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

// 2. filter: 짝수만 추출
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4, 6, 8, 10]

// 3. reduce: 숫자의 합
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 55

// 4. sort: 숫자를 내림차순 정렬
const sorted = numbers.sort((a, b) => b - a);
console.log(sorted); // [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

---

💻 etc

브라우저 없이 콘솔을 확인하고싶다면, vscode 터미널에 node (파일명) 하면 터미널에서 콘솔확인 가능.