React를 사용하기 전에 알아야 할 JavaScript 문법과 기능은 무엇이 있을까요? 잠깐 함께 JavaScript 문법을 복습하고, React를 시작할 준비를 해봅시다.

Javascript 함수 선언 방식

Javascript 함수 선언 방식은 다양합니다. 기본적으로 함수 선언 방식은 Function Declaration, Function Expression, Arrow Function이 있습니다.

Function Declaration(함수 선언문)

일반적인 함수 선언 방식입니다.

function greet(name) {
  console.log("Hello, " + name + "!");
}
 
greet("Hwonda"); // 출력: Hello, Hwonda!

함수 이름과 함께 선언됩니다.
호이스팅에 영향을 받습니다.

Function Expression(함수 표현식)

const greet = function(name) {
  console.log("Hello, " + name + "!");
};
 
greet("Hwonda"); // 출력: Hello, Hwonda!

함수를 변수에 할당하여 선언됩니다.
변수에 할당된 함수는 변수 이름을 통해 호출됩니다.
호이스팅에 영향을 받지 않습니다.

Arrow Function(화살표 함수)

그 중에서 React 개발자들이 가장 많이 사용하는 방식은 화살표함수(Arrow Function)입니다. 아마도 보다 간결하고 간편한 문법을 제공하기 때문이겠죠.

const greet = (name) => {
  console.log("Hello, " + name + "!");
};
 
greet("Hwonda"); // 출력: Hello, Hwonda!

화살표 형식의 간결한 문법을 제공합니다.
this 컨텍스트가 상위 스코프에서 상속되어 해당 함수 내에선 사용이 불가합니다.

참고로 생성자 함수(Constructor Function), 매서드 축약 포현(Method Shorthand) 등의 방식도 있습니다.

그 것들은 필요할 때 찾아보면서 익히면 됩니다.

Spread Operator

... 으로 표현되는 Spread Operator는 배열이나 객체를 확장/병합할 때 사용됩니다.

Spread Operator를 사용하면

배열의 요소를 확장하거나 병합할 수 있습니다.
객체의 속성을 확장하거나 병합할 수 있습니다.

배열 확장

// 배열 확장
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5, 6];
 
console.log(newNumbers); // 출력: [1, 2, 3, 4, 5, 6]
 
// 배열 병합
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = [...arr1, ...arr2];
 
console.log(mergedArray); // 출력: [1, 2, 3, 4, 5, 6]

객체 확장

// 객체 확장
const obj = { a: 1, b: 2 };
const newObj = { ...obj, c: 3 };
 
console.log(newObj); // 출력: { a: 1, b: 2, c: 3 }
 
// 객체 병합
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObject = { ...obj1, ...obj2 };
 
console.log(mergedObject); // 출력: { a: 1, b: 2, c: 3, d: 4 }

Spread Operator를 사용하여 객체를 병합할 때, 동일한 속성이 있는 경우, 마지막에 나오는 속성이 우선순위 를 가집니다.

// 중복된 속성(b) 처리
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObject = { ...obj1, ...obj2 };
 
console.log(mergedObject); // 출력: { a: 1, b: 3, c: 4 }

Rest Parameter

Rest Parameter 또한 Spread Operator와 똑같이 ... 표현됩니다. 다만 Spread와 사용되는 위치와 기능에 차이가 있습니다. Rest Parameter는 함수의 매개변수나 분해 할당에서 사용됩니다.

여기서는 Rest의 ‘함수의 매개변수’에서의 사용에 대해 알아보겠습니다. 구조 분해 할당에서의 Rest는 차차 알아가 봅시다.

// 모든 인자들을 전부 가져와서 때려박아준다
// 모든 인자들이 numbers에 배열 형태로 수집되고, reduce 메서드를 통해 총합을 반환한다.
function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}
 
console.log(sum(1, 2, 3, 4, 5)); // 출력: 15
console.log(sum(10, 20)); // 출력: 30
console.log(sum()); // 출력: 0

Q. Spread와 차이가 뭔가요? 헷갈려요.

그냥 Spread 는 배열이나 객체 를 다룰 때, Rest 는 매개변수나 분해 할당 을 다룰 때 사용한다고 외우십셔.

Q. Spread랑 혼동해서 써도 되나요? 헷갈려요.

혼동해서 쓰는 것은 본인 마음이지만, 구글링 할 때는 정확한 용어를 사용하는 것이 좋습니다.

구조 분해 할당(Destructuring Assignment)

구조 분해 할당은 배열과 객체의 요소를 순서대로 또는 특정 속성에 따라 할당할 수 있습니다. 이를 통해 코드를 더 간결 하게 작성할 수 있고, 필요한 데이터 를 효율적으로 추출 하여 활용할 수 있습니다. 또한, 할당하고자 하는 변수명을 다르게 지정하여 선택적으로 할당할 수도 있습니다.

한 번에 여러 변수를 선언하고, 값을 마음대로 할당할 수 있고, 더욱 간결하게 작성할 수 있기 때문에 React를 사용하면서 많이 볼 문법입니다.

배열 분해 할당

const numbers = [1, 2, 3, 4, 5];
 
// 기존 방식
const firstNumber = numbers[0];
const secondNumber = numbers[1];
 
console.log(firstNumber); // 출력: 1
console.log(secondNumber); // 출력: 2
 
// 구조 분해 할당
const [first, second] = numbers;
 
console.log(first); // 출력: 1
console.log(second); // 출력: 2
 
// Rest Operator 사용 시
const [first, second, ...rest] = numbers;
 
console.log(first); // 출력: 1
console.log(second); // 출력: 2
console.log(rest); // 출력: [3, 4, 5]

객체 분해 할당

const person = {
  name: "Hwonda",
  age: 30,
  country: "Korea"
};
 
// 기존 방식
const name = person.name;
const age = person.age;
 
console.log(name); // 출력: Hwonda
console.log(age); // 출력: Korea
 
// 구조 분해 할당
const { name, age } = person;
 
console.log(name); // 출력: Hwonda
console.log(age); // 출력: Korea
 
// 변수 이름을 변경하여 할당
const { name: fullName, age: personAge, country: originCountry } = person;
 
console.log(fullName); // 출력: Hwonda
console.log(personAge); // 출력: 30
console.log(originCountry); // 출력: Korea
 
// Rest Operator 사용 시
const { name, ...rest } = person;
 
console.log(name); // 출력: Hwonda
console.log(rest); // 출력: { age: 30, country: "Korea" }

중요 메서드 (map, filter, reduce)

map(), filter(), reduce() 메서드는 배열을 조작하고, 새로운 배열(reduce 사용 시 배열 외 여러가지)을 생성합니다. React에서 반복적인 요소를 만들기 위해 반복문을 돌릴 때 배열을 주로 사용합니다. 기존 배열을 해치지 않고 새로운 배열을 생성하면서도, 간결하게 표현할 수 있기 때문에 위 메서드가 자주 사용됩니다.

map()

// 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 모아서 새로운 배열을 반환합니다.
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((num) => num * 2);
 
console.log(doubled); // 출력: [2, 4, 6, 8, 10]

filter()

// 주어진 함수의 테스트를 통과한 요소로만 이루어진 새로운 배열을 반환합니다.
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((num) => num % 2 === 0);
 
console.log(evenNumbers); // 출력: [2, 4]

reduce()

map과 filter의 기능을 모두 대체할 수 있으면서도, 기존의 배열을 파괴하지 않고, return으로 배열 외 다양한 값을 출력할 수 있어 가장 많이 사용되는 매서드 입니다.

array.reduce(function(accumulator,currentValue,currentIndex, array), initialValue)

필수값	파라미터	설명
필수	accumulator	누적값입니다. 콜백 함수의 이전 반환값이며, 첫 번째 호출에서는 initialValue가 사용됩니다(제공된 경우).
필수	currentValue	배열의 현재 요소입니다.
	currentIndex	배열의 현재 요소의 인덱스입니다.
	array	reduce()가 호출된 배열입니다.
	initialValue	accumulator의 초기값으로, 이 값을 제공하지 않으면 배열의 첫 번째 요소가 초기값으로 사용됩니다.

예시1. 숫자 배열의 합 계산

const numbers: number[] = [1, 2, 3, 4];
const sum: number = numbers.reduce((accumulator: number, currentValue: number): number => {
    return accumulator + currentValue;
});
console.log(sum); // 출력: 10

예시2. 객체 배열의 속성 합 계산

interface Item {
    name: string;
    quantity: number;
}
 
const items: Item[] = [
    { name: 'apple', quantity: 2 },
    { name: 'banana', quantity: 3 },
    { name: 'orange', quantity: 1 }
];
 
const totalItems: number = items.reduce((accumulator: number, item: Item): number => {
    return accumulator + item.quantity;
}, 0); // 초기값으로 0을 사용
console.log(totalItems); // 출력: 6

예시3. 배열을 사용하여 객체 생성

const fruitBasket: string[] = ['apple', 'orange', 'apple', 'banana', 'orange', 'apple'];
const count: Record<string, number> = fruitBasket.reduce((accumulator: Record<string, number>, fruit: string): Record<string, number> => {
    if (accumulator[fruit]) {
        accumulator[fruit]++;
    } else {
        accumulator[fruit] = 1;
    }
    return accumulator;
}, {}); // 초기값으로 빈 객체를 사용
console.log(count); // 출력: { apple: 3, orange: 2, banana: 1 }