리액트의 자바스크립트 확장 문법

REACT

해당 포스팅에서는 REACT의 자바스크립트 확장 문법에 대해 다룹니다.

이번 포스팅 목차

• REACT의 자바스크립트 확장 문법
  

리액트의 자바스크립트 확장 문법

자바스크립트 확장 문법 은 개발자가 더 간결하고 효율적인 코드를 작성할 수 있도록 돕는 문법적 개선 사항들입니다. 이러한 문법들은 ECMAScript(ES6 및 그 이후 버전)에서 도입되었으며, 다음과 같은 주요 기능들이 포함됩니다

1. 화살표 함수 (Arrow Functions)

화살표 함수 는 더 간결한 함수 선언을 가능하게 합니다. 또한, this 키워드의 바인딩이 기존 함수와 다릅니다.

문법 예시

// 일반 함수 표현식
const add = function(a, b) {
  return a + b;
};

// 화살표 함수
const add = (a, b) => a + b;

2. 템플릿 리터럴 (Template Literals)

템플릿 리터럴 을 사용하면 문자열 내에서 변수와 표현식을 더 간편하게 삽입할 수 있습니다. 백틱을 사용하여 문자열을 감싸며, ${} 구문을 사용하여 변수를 포함할 수 있습니다.

문법 예시

const name = 'John';
const greeting = `Hello, ${name}!`;
console.log(greeting); // "Hello, John!"

3. 디스트럭처링 할당 (Destructuring Assignment)

디스트럭처링 할당 은 배열이나 객체의 속성을 분해하여 개별 변수에 할당하는 문법입니다.

문법 예시

배열 디스트럭처링

const [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

객체 디스트럭처링

const person = { name: 'John', age: 30 };
const { name, age } = person;
console.log(name); // "John"
console.log(age); // 30

4. 디스트럭처링 할당 (Destructuring Assignment)

함수 호출 시 인자가 전달되지 않았을 경우 기본값 을 설정할 수 있습니다.

문법 예시

function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}
console.log(greet()); // "Hello, Guest!"
console.log(greet('Alice')); // "Hello, Alice!"

5. 나머지 매개변수와 스프레드 연산자 (Rest and Spread Operators)

나머지 매개변수 는 함수 매개변수 목록의 나머지 부분을 배열로 취급합니다. 스프레드 연산자 는 배열이나 객체를 개별 요소로 분해합니다.

문법 예시

나머지 매개변수

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // 6

스프레드 연산자

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

const person = { name: 'John', age: 30 };
const updatedPerson = { ...person, age: 31 };
console.log(updatedPerson); // { name: 'John', age: 31 }

6. 클래스 (Classes)

클래스 는 객체 지향 프로그래밍의 중요한 개념으로, ES6에서 문법적 설탕(syntax sugar)으로 도입되었습니다. 기존 프로토타입 기반 상속을 더 명확하고 이해하기 쉽게 작성할 수 있습니다.

문법 예시

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const john = new Person('John', 30);
john.greet(); // "Hello, my name is John and I am 30 years old."

7. 모듈 (Modules)

모듈 은 코드의 재사용성과 유지보수성을 높이기 위해 코드베이스를 분리하는 방법을 제공합니다. ES6부터는 import와 export 키워드를 사용하여 모듈을 정의하고 사용할 수 있습니다.

문법 예시

// math.js
export function add(a, b) {
  return a + b;
}
export const pi = 3.14;

// main.js
import { add, pi } from './math.js';
console.log(add(2, 3)); // 5
console.log(pi); // 3.14

8. 비구조화 할당 (Destructuring Assignment)

비구조화 할당 은 배열이나 객체의 속성을 개별 변수로 추출하는 문법입니다. 배열과 객체에서 모두 사용될 수 있습니다.

문법 예시

const person = { name: 'John', age: 30 };
const { name, age } = person;
console.log(name); // "John"
console.log(age); // 30

const numbers = [1, 2, 3];
const [first, second] = numbers;
console.log(first); // 1
console.log(second); // 2

9. 심볼 (Symbols)

심볼(Symbol) 은 고유하고 변경 불가능한 원시 타입 값으로, 객체의 프로퍼티 키로 사용됩니다.

문법 예시

const sym = Symbol('description');
const obj = {
  [sym]: 'value'
};
console.log(obj[sym]); // "value"

10. 프라미스 (Promises)와 비동기 함수 (Async/Await)

프라미스(Promises) 는 비동기 작업을 처리하는 데 사용됩니다. 비동기 함수(Async/Await) 는 프라미스를 더욱 간단하게 사용할 수 있게 해줍니다.

문법 예시

프라미스

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Done!'), 1000);
});
promise.then(result => console.log(result)); // "Done!" (1초 후)

비동기 함수

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}
fetchData();

마무리

자바스크립트의 확장 문법 은 코드를 더욱 간결하고 효율적으로 작성할 수 있게 해줍니다. 화살표 함수, 템플릿 리터럴, 디스트럭처링 할당, 기본 매개변수, 나머지 매개변수와 스프레드 연산자, 클래스, 모듈, 심볼, 프라미스와 비동기 함수 등의 기능은 자바스크립트 개발자의 생산성을 높이고 코드의 가독성을 향상시키는 중요한 도구들입니다. 이러한 확장 문법을 숙지하고 활용함으로써, 더 나은 자바스크립트 코드를 작성할 수 있습니다.