자주 사용하는 자바스크립트 문법

리액트 개발에서 자주 사용하는 자바스크립트 문법을 이해하는 것은 효율적인 코드 작성에 매우 중요합니다. 이번 블로그에서는 구조 분해 할당, 전개 구문, 배열 프로토타입 메서드(map, filter, reduce, forEach), 그리고 삼항 연산자에 대해 알아보겠습니다.

구조 분해 할당

구조 분해 할당은 배열 또는 객체의 값을 개별 변수에 즉시 할당하는 것을 의미합니다. 배열의 구조 분해 할당은 ES6에서 도입되었으며, 객체의 구조 분해 할당은 ECMAScript 2018에서 처음 등장했습니다.

배열 구조 분해 할당

리액트의 useState 훅을 사용하여 배열 구조 분해 할당을 예제로 살펴보겠습니다.

import React, { useState } from 'react';

function Counter() {
  // useState 함수는 [value, setter] 형태의 배열을 반환합니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

위 예제에서 useState 함수는 두 개의 값을 가진 배열을 반환하며, 이를 구조 분해 할당을 통해 count와 setCount 변수에 할당합니다.

객체 구조 분해 할당

객체 구조 분해 할당을 활용하여 컴포넌트의 props를 더 쉽게 다룰 수 있습니다.

function UserProfile({ user }) {
  // 객체의 구조 분해 할당을 사용하여 user 객체의 프로퍼티를 개별 변수에 할당합니다.
  const { name, age, email } = user;

  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
      <p>Email: {email}</p>
    </div>
  );
}

export default UserProfile;

전개 구문 (Spread Syntax)

전개 구문을 사용하면 배열이나 객체를 더 쉽게 복사하거나 병합할 수 있습니다.

배열 전개

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

console.log(newNumbers); // [1, 2, 3, 4, 5]

객체 전개

const user = { name: 'John', age: 30 };
const updatedUser = { ...user, email: 'john@example.com' };

console.log(updatedUser);
// { name: 'John', age: 30, email: 'john@example.com' }

배열 프로토타입 메서드

map

map 메서드는 배열의 각 요소를 순회하며 콜백 함수의 결과로 새로운 배열을 만듭니다.

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6]

filter

filter 메서드는 콜백 함수에서 truthy 조건을 만족하는 경우에만 해당 요소를 포함하는 새로운 배열을 만듭니다.

const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // [2, 4]

reduce

reduce 메서드는 배열을 순회하며 누적 결과를 반환합니다.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // 10

forEach

forEach 메서드는 배열을 순회하며 각 요소에 대해 콜백 함수를 실행하지만, 반환값이 없습니다.

const numbers = [1, 2, 3];
numbers.forEach(num => console.log(num * 2));

// 출력:
// 2
// 4
// 6

삼항 연산자

삼항 연산자는 조건에 따라 다른 값을 반환할 때 유용합니다.

const isLoggedIn = true;
const message = isLoggedIn ? 'Welcome back!' : 'Please log in.';

console.log(message); // 'Welcome back!'

결론

리액트 개발에서 자주 사용하는 자바스크립트 문법을 이해하고 활용하면 더욱 효율적이고 가독성 높은 코드를 작성할 수 있습니다. 그중 구조 분해 할당, 전개 구문, 배열 메서드, 삼항 연산자 등은 필수입니다.