[React] 2일차: 리액트 개발을 위한 필수 자바스크립트(ES6+) 정리

 

리액트는 자바스크립트의 최신 문법(ES6 이상)을 적극적으로 활용합니다.

리액트 컴포넌트를 더 깔끔하고 효율적으로 작성하기 위해 반드시 알아야 할 세 가지 핵심 문법을 정리해 보겠습니다.

1. 화살표 함수 (Arrow Function)

리액트 컴포넌트를 정의하거나 이벤트 핸들러를 만들 때 기본적으로 사용되는 방식입니다. function 키워드 대신 =>를 사용하여 간결하게 표현할 수 있습니다.

• 기본 문법:
  JavaScript

   

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

• 특징: 한 줄로 작성할 경우 return과 { }를 생략할 수 있어 코드가 매우 짧아집니다. 리액트에서는 특히 함수형 컴포넌트를 선언할 때 표준처럼 쓰입니다.

2. 구조 분해 할당 (Destructuring)

객체나 배열의 값을 추출하여 변수에 담을 때 사용합니다. 리액트에서 Props를 전달받거나 State를 관리할 때 매번 쓰이는 필수 문법입니다.

• 객체 분해:
• JavaScript

   

  const user = { name: "Ryon", age: 40 };
  const { name, age } = user; // user.name 대신 name으로 바로 사용 가능
  

• 배열 분해:
• JavaScript

   

  const colors = ["Red", "Blue"];
  const [first, second] = colors;
  

3. 스프레드 연산자 (Spread Operator)

마침표 세 개(...)를 사용하여 배열이나 객체의 내용을 그대로 복사하거나 합칠 때 사용합니다. 리액트의 **불변성(Immutability)**을 지키며 상태를 업데이트할 때 매우 중요합니다.

• 배열 복사 및 추가:
• JavaScript

   

  const original = [1, 2, 3];
  const updated = [...original, 4]; // [1, 2, 3, 4]
  

• 객체 속성 업데이트:
• JavaScript

   

  const profile = { name: "Ryon", role: "Developer" };
  const newProfile = { ...profile, role: "React Expert" }; // name은 유지, role만 변경
  

요약: 왜 이 문법들이 중요한가요?

리액트는 데이터를 직접 수정하지 않고 새로운 데이터를 만들어 업데이트하는 방식을 선호합니다.

이때 Spread 연산자와 구조 분해 할당은 코드를 복잡하지 않게 유지하면서도 데이터를 안전하게 다룰 수 있게 도와줍니다.

 

Copyright 2026. [버미] all rights reserved.