[React] 리액트 시작 전 꼭 알아야 할 JS 필수 문법 11가지

Udemy에서 <The Ultimate React Course 2024: React, Next.js, Redux & More>를 수강하며 공부한 내용입니다.

 

 

리액트를 배우기 전 꼭 알아야 할 JS 문법

자바스크립트 기반 라이브러리인 리액트를 제대로 사용하기 위해서 이정도는 복습하고 가자!

 

 

 

1. 디스트럭처링(Destructuring)

객체나 배열에서 원하는 값만 골라 추출하는 데 유용하다.

const person = { name: 'Alice', age: 25, city: 'Seoul' };

const { name, age } = person;
console.log(name); // 'Alice'
console.log(age);  // 25

객체 디스트럭처링을 통해 객체의 속성을 간단하게 변수로 할당한다.

const numbers = [1, 2, 3];

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

배열의 각 요소를 순서에 맞게 변수에 할당한다.

 

 

2. Spread/Rest 연산자 (...)

요소들을 모으거나 확장하는 등 데이터 변환/병합 작업을 쉽게 한다.

 

1. Spread 연산자: 확장

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // arr1을 확장해 새로운 배열 생성
console.log(arr2); // [1, 2, 3, 4, 5]

배열에서 Spread

const obj1 = { name: 'Alice', age: 25 };
const obj2 = { ...obj1, city: 'Seoul' }; // obj1을 확장해 새로운 객체 생성
console.log(obj2); // { name: 'Alice', age: 25, city: 'Seoul' }

객체에서 Spread

 

2. Rest 연산자: 나머지 모으기

function sum(...numbers) { // 여러 개의 인수를 받아 배열로 처리
  return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

함수 매개변수에서 Rest

const person = { name: 'Alice', age: 25, city: 'Seoul' };
const { name, ...rest } = person; // name을 제외한 나머지를 모아 새 객체 생성
console.log(name);  // 'Alice'
console.log(rest);  // { age: 25, city: 'Seoul' }

객체에서 Rest

 

 

3. Template Literals

JavaScript에서 문자열을 다루는 새로운 방식으로, 여러 줄에 걸쳐 작성하거나 변수, 표현식을 쉽게 삽입할 수 있도록 하는 기능이다.

백틱(`)으로 감싸서 사용한다.

const address = `123 Main Street
Seoul, South Korea`;

여러 줄 문자열을 \n 없이 작성 가능하다.

const person = { name: "Alice", age: 25 };
function greeting(name) {
  return `Hello, ${name}!`;
}
console.log(`${greeting(person.name)}, you are ${person.age} years old.`); 
// 출력: Hello, Alice! you are 25 years old.

${} 안에서 함수 등 표현식 사용도 가능하다.

 

4. 삼항 연산자 (Ternaries)

if/else문 대신 삼항 연산자를 사용하면 코드가 더 간결하고 읽기 쉬워진다.

다만 지나치게 길거나 중첩되면 오히려 코드가 복잡해져, 간단한 경우에만 사용하는 것이 좋다.

// if/else 사용
let status;
if (age >= 18) {
  status = "Adult";
} else {
  status = "Minor";
}

// 삼항 연산자 사용
const status = age >= 18 ? "Adult" : "Minor";

 

 

5. 화살표 함수(Arrow functions)

특히 익명 함수나 콜백 함수로 활용할 때 코드 가독성을 높여준다.

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

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

기본적인 사용 예시

const numbers = [1, 2, 3];
const doubled = numbers.map((n) => n * 2);
console.log(doubled); // [2, 4, 6]

콜백 함수로 사용하는 경우

 

 

6. 논리 연산자 &&, ||, ?? (Short-circuiting)

조건을 평가할 때, 필요한 경우에만 오른쪽 피연산자를 평가하는 방식으로 간단한 조건문을 작성할 수 있다.

const a = true && "Hello"; // "Hello" (왼쪽이 true여서 오른쪽 평가)
const b = false && "Hello"; // false (왼쪽이 false라서 바로 반환)

const user = null;
console.log(user || "Guest"); // "Guest" (사용자가 없을 경우 기본값 반환)

const settings = customSettings ?? defaultSettings; // (설정값이 없을 경우 기본 설정 적용)

널 병합 연산자 "??"는 왼쪽 값이 null 또는 undefined일 경우에만 오른쪽 값을 반환한다.

0, false, ""처럼 값이 존재하는 경우 그대로 반환한다.

 

 

7. Optional chaining

"?."을 사용하여 속성이 null 또는 undefined일 경우 에러 없이 undefined를 반환한다.

const users = [{ name: "Alice" }];
console.log(users[1]?.name); // undefined (users[1]이 없으므로 undefined 반환)

const person = {
  greet() { return "Hello"; }
};
console.log(person.greet?.()); // "Hello"
console.log(person.sayBye?.()); // undefined (sayBye 메서드가 없어도 에러 발생 X)

 

 

8. Array.map()

배열의 각 요소를 순회하며, 콜백 함수에서 정의한 작업을 수행하여 새로운 배열을 생성한다.

변환된 결과가 담긴 새 배열을 반환하기 때문에 불변성을 유지할 수 있다.

// 예시 1: 배열의 각 요소를 2배로 변환
console.log([1, 2, 3, 4].map(num => num * 2)); // [2, 4, 6, 8]

// 예시 2: 객체 배열에서 name 추출
console.log([
  { name: "Alice" },
  { name: "Bob" },
  { name: "Charlie" }
].map(user => user.name)); // ["Alice", "Bob", "Charlie"]

// 예시 3: 점수에 따라 Pass/Fail
console.log([75, 85, 95].map(grade => grade >= 80 ? "Pass" : "Fail")); // ["Fail", "Pass", "Pass"]

 

 

9. Array.filter()

주어진 함수의 조건을 만족하는 배열의 요소들만 새로운 배열로 반환한다.

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 35 },
  { name: "David", age: NaN }
];

const validAgeUsers = users.filter(user => Number.isFinite(user.age));
const adults = validAgeUsers.filter(user => user.age >= 30);

console.log(adults); 
// [{ name: "Bob", age: 30 }, { name: "Charlie", age: 35 }]

 

 

10. Array.sort

배열 요소를 정렬한다.

기본적으로 문자열 기준으로 정렬되며, 숫자나 다른 타입의 값을 정렬할 때는 비교 함수(compare function)를 제공해야 한다.

const fruits = ["banana", "apple", "cherry", "date"];
fruits.sort();
console.log(fruits); 
// ['apple', 'banana', 'cherry', 'date']

문자열 알파벳 순으로 정렬

const numbers = [10, 5, 100, 50];
numbers.sort((a, b) => a - b);  // 오름차순 정렬
console.log(numbers); 
// [5, 10, 50, 100]

const students = [
  { name: "Alice", score: 85 },
  { name: "Bob", score: 90 },
  { name: "Charlie", score: 80 }
];
students.sort((a, b) => a.score - b.score); // 점수를 기준으로 오름차순 정렬
console.log(students);
// [{ name: 'Charlie', score: 80 }, { name: 'Alice', score: 85 }, { name: 'Bob', score: 90 }]

숫자 정렬을 위해서는 비교 함수가 필요하다.

 

 

11. Promise

 

비동기 작업의 성공 또는 실패를 처리한다.

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  const success = true;

  if (success) {
    resolve("작업 성공");
  } else {
    reject("작업 실패");
  }
});

// 결과 처리
promise
  .then((result) => {
    console.log(result); // 작업 성공 시 실행
  })
  .catch((error) => {
    console.error(error); // 작업 실패 시 실행
  });

Promise의 세 가지 상태

1. Pending: 초기 상태, 아직 작업이 완료되지 않음.
2. Fulfilled: 작업이 성공적으로 완료됨.
3. Rejected: 작업이 실패함.

const delayedPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("3초 후 완료");
  }, 3000);
});

delayedPromise.then(console.log);

setTimeout을 사용하는 예제