React - 리액트에 필요한 자바스크립트 ES6 문법 (템플릿 문자열, 연산자)

React  - 리액트에 필요한 자바스크립트 ES6 문법 (템플릿 문자열, 연산자)

---

출처 : 

http://www.yes24.com/Product/Goods/87631428

Do it! 리액트 프로그래밍 정석 - YES24

 

이전포스팅

React 개발 환경 세팅 (NVM node.js, yarn, 비주얼 스튜디오 코드)

React 개발 환경 세팅 (NVM node.js, yarn, 비주얼 스튜디오 코드)

 

ES6 문법::템플릿 문자열

템플릿 문자열이란 문자열 안에 변수와 연산식을 혼합하여 사용하는 것입니다.

기존 자바스크립트는 문자열+문자열, 문자열+변수를 연결하기 위해서는 [+(병합 연산자)] 를 사용합니다.  기존의 병합 연산자를 사용하여 문자열을 연결한 방법은 코드가 복잡해질 수 있습니다. 이 점을 보완하기 위해 ES6에서 템플릿 문자열을 도입했습니다.  템플릿 문자열은 [`(백틱)] 으로 문자열을 묶어서 표현할 수 있습니다. 그리고 템플릿 문자열에 [$(특수 기호)] 를 사용하여 변수 혹은 식을 포함할 수 있습니다. 다음 예제에서 유용하게 개선된 템플릿 문자열 확인해 봅시다.

 

ES6 템플릿 문자열 예제

• 3번째, 5번째 줄
  • 템플릿 문자열에 [$] 기호를 사용하여 변수 포함할 수 있습니다.
• 7번째 줄
  • 템플릿 문자열은 [\n(이스케이프 시퀀스)] 를 사용하지 않고, [enter]를 눌러 줄 바꿈을 허용해 줍니다.
• 12번째, 13번째 줄
  • 템플릿 문자열에 [$] 기호를 사용하여 연산을 포함할 수 있습니다.

 

ES6 문법::전개 연산자

전개 연산자는 나열형 자료를 추출 또는 연결 시 사용합니다.

기존 문법 사용 시 내장 함수를 모두 나열해야 하므로 코드가 길어지는 점을 보완하고자 ES6에 전개 연산자를 도입하였습니다.

사용 방법은 배열, 객체, 함수 인자 표현 식인 [[], {}, ()]안에서만 배열, 객체, 변수명 앞에[...(마침표 세 개)] 를 입력하면 됩니다.

하나씩 알아가도록 하겠습니다.

ES6 배열 전개 연산자

1) 기존 문법 방법

ES6 전개 연산자 - 기존 문법 방법 비교

• 3번째 줄
  • arr1, arr2 배열의 각 요소로 새로운 배열을 생성했습니다.
• 4번째, 5번째 줄
  • concat() 함수로 arr1, arr2 두 개의 배열을 합칩니다.
• 6번째 줄
  • arr1 배열의 0번째 인덱스로 배열 요소를 추출합니다.
• 11번째 줄
  • arguments(함수 또는 메서드 호출 시 전달되는 변수)를 사용해 함수 내에 인자 항목들을 배열로 변환합니다.
• 13번째 줄
  • args.length는 전체 배열의 길이이고, 인덱스 범위에 해당하는 배열 요소를 추출하며, 인덱스 1번(2번째 항목) 부터 마지막 항목까지 추출합니다.

2) ES6 배열 전개 연산자

ES6 전개 연산자 예제

• 3번째 줄
  • arr1, arr2 두 개의 배열을 전개 연산자로 합쳤습니다.
• 6번째 줄
  • first , second : arr1의 각 위치에 있는 요소를 추출합니다.
  • three = 'empty' : 기본 값과 함께 배열 요소를 추출합니다.
  • ...others : first, second, three에서 추출하고 남은 요소를 추출합니다. 
• 10번째 줄
  • 배열 표현식 없이 전개 연산자를 사용한 잘못된 예제입니다.
• 12번째 줄
  • 함수 인자 배열을 args 변수를 할당합니다.

 

 

ES6 객체 전개 연산자

1) 기존 문법 방법

ES6 전개 연산자 - 기본 문법 방법 비교

• 4번째 줄
  • 키에 해당하는 값을 추출합니다.
• 10번째 줄
  • assign() (객체 내장 함수)을 사용하여 두 객체 병합합니다.
  • assign()의 첫 번째 인자는 결과 반환 객체({})이며, 나머지 인자는 병합할 객체입니다.
  • 병합할 객체는 앞에 있는 객체부터 덮어쓰므로, objTwo 값으로 덮어씁니다. other의 값은 objTwo.other 값인 [-1]이 됩니다.
• 13번째 줄
  • 중복되는 키값이 있으면 이후에 전달된 객체의 값으로 덮어씁니다.
  • objOne 값으로 덮어씁니다. other의 값은 objOne .other 값인 [0]이 됩니다.
• 17번째 줄
  • delete(삭제 연산자)를 사용하여, 특정 데이터를 추출 후 새로운 객체를 만듭니다.

 

 

2) ES6 객체 전개 연산자

기존 문법 방법은 객체의 키, 값을 추출할 때 객체의 내장 함수를 사용하여 코드가 길어지는 불편함이 있었습니다. ES6 객체 전개 연산자를 도입하여 코드를 간결하게 적용할 수 있습니다.

ES6 전개 연산자 예제

• 4번째, 11번째 줄
  • 두 객체 병합 시 중복된 키값들은 마지막에 사용한 객체의 값으로 덮어쓰게 됩니다.
• 15번째 줄
  • 객체에서 특정 값을 추출할 때 추출하려는 키의 이름(other)을 맞추고,
  • 나머지는 전개 연산자[...(마침표 세 개)]로 선언된 변수(others)에 할당할 수 있습니다.