ES6 를 공부하는 이유?
React는 가장 최신의 JavaScript 기능을 이용하여 더 깔끔하고 수월한 기능 이용을 가능하게 한다. 따라서 React를 공부하기 앞서 JavaScript의 최신 문법인 ES6를 다시 되돌아보면 효율적인 React 공부를 할 수 있을 것이라 생각한다.
깃허브(링크) 에서 소스 코드를 확인할 수 있습니다.
let 과 const
let과 const는 변수를 정의할 때 쓴다.
let으로 정의된 변수는 새로운 값을 다시 할당할 수 있고,
const로 정의된 변수는 새로운 값을 다시 할당할 수 없다.
조금 더 자세하게 다룬 내용은 여기(링크)에서!
Arrow function (화살표 함수)
기존의 함수 선언법에서 발전하여 화살표 함수로 함수를 선언할 수 있다.
화살표 함수를 사용하면 JavaScript의 고질적인 this 문제를 해결할 수 있다.
화살표 함수로 선언된 함수의 인수와 안의 내용이 하나뿐이라면, 괄호를 생략하여 축약된 방법으로도 작성할 수 있다.
여러 코딩 컨벤션을 참고해봤는데 인수의 괄호를 생략하는 것은 하지않도록 하자.
Export and Import
.js 파일의 전체 내용 또는 일부 내용을 export 하면 다른 파일에서 그 내용을 import 하여 불러올 수 있다. 마치 하나의 파일처럼 사용할 수 있다. 다음은 같은 저장소에 있는 app.js, ingredient.js, utility.js 파일들을 각각 export 하고 import 한 예시이다.
Export case 1
ingredient.js의 모든 내용을 'ingredient'라는 이름으로 export 했다. 'defualt'는 나중에 import로 받을 파일 설명에서 이어나가겠다.
Export case 2
utility.js의 일부 내용만 함수의 이름인 'boil'과 'fry'로 export 했다.
Import
export한 내용들을 app.js에서 모두 import 한 모습이다.
ingredient.js는 default로 export 했기 때문에 import로 받을 때 이름이 바뀌어도 상관없다. ('from' 뒤에 나오는 파일명은 바꿀 수 없다.)
import utility.js는 default로 export 하지 않았기 때문에 export 했을 때 이름과 다르면 안된다. (마찬가지로 'from' 뒤에 나오는 파일명은 바꿀 수 없다.)
Class
일반적으로 Class를 생성하면 다음과 같다.
일반적인 Class
'new Cut()'을 호출하여 새로운 객체를 만들고 객체의 메서드를 호출하는 모습이다.
'new'에 의해 constructor 메서드는 자동으로 호출된다. 덕분에 객체는 초기화 될 수 있다.
이후 cut.trimtheIngredient()'로 객체의 메서드를 호출한다.
Class 상속
다른 Class를 상속받아 그 기능을 모두 또는 일부 사용할 수 있다. 추가적으로 기능 추가도 물론 가능하다. 다음의 Cook 클래스는 'extends'로 위의 Cut 클래스를 상속받았다.
이후 'new Cook()'으로 객체를 생성하면 Cut 클래스에 있던 기능들을 해당 객체에서도 사용할 수 있다.
이떄 constructor 메서드에서 'super();'를 실행하면, 상속해준 Cut 클래스의 constructor 메서드를 상속받은 Cook 클래스 내부에서 실행한다.
Class 프로퍼티, 메서드 추가 내용
위의 Class 작성 과정 중 ES7 문법을 적용하면 constructor를 생략해도 된다. 추가적으로 메서드를 화살표 함수로 정의하면 this를 사용할 필요가 없기 때문에 위에서는 'this.ingredient = 'onion''이 아닌 'ingredient = 'onion'
Spread, rest Operator
Spread Operator (Array)
Spread 연산자는 배열 이름 앞에 '...'를 붙여서 사용한다. 해당 배열의 모든 내용을 나열할 수 있다. 다음은 배열을 Spread 연산자를 이용하여 다른 배열과 병합한 예시이다.
'newIngredient' 배열에 '...ingredient'를 넣어서 'ingredient' 배열의 요소들을 병합했다.
Spread Operator (Object)
객체의 이름 앞에도 '...'를 붙여서 사용할 수 있다.
'NewTableware' 객체에 '...Tableware'를 넣어서 'Tableware'의 요소를 병합했다.
Rest Operator
나머지 연산자는 인수, 객체, 배열 앞에 '...'를 붙여서 사용한다.
인수들(1, 2, 3)을 '...recipes'로 받으면 인수들을 하나씩 받아서 실행한다. 이를 filter 함수로 필터링한 모습이다.
Destructuring
구조분해 할당은 배열과 객체의 속성 분해하여 그 값을 변수에 담아서 사용할 수 있게 한다.
Array
다음은 배열의 속성을 분해햐여 그 값을 변수에 담은 모습이다.
배열 'numbers'의 2를 건너뛰기 위해 '[num1, , num3]'로 작성하였다.
Object
다음은 객체의 속성을 분해햐여 그 값을 변수에 담은 모습이다.
객체 'Ingredient'의 name 속성을 분해하여 같은 이름인 'name'이라는 변수에 저장하였다. 이때 color의 속성을 저장하지 않았기 때문에 참조 에러가 뜬 모습이다.
Referance Type
객체와 배열을 모두 참조형 자료 타입이다. 다음은 일반적인 방법과 스프레트 연산자를 이용한 방법으로 복사한 예시 이다.
일반적인 방법으로 복사
'const second = first'에서 second는 first의 자료를 직접 받은 것이 아닌 first의 내용이 들어있는 저장소의 주소를 가르키는 포인터를 복사한다.
따라서 객체 'first'의 내용을 바꾸면 'second'는 내용이 아니라 포인터를 복사하여 가진 것이라서 console에 출력하면 바뀐 'first'의 내용이 출력된다.
Spread 연산자를 이용한 복사
객체와 배열을 일반적인 방법으로 복사하면 내용이 아닌 포인터를 저장한다.
이때 내용을 직접 복사하고 싶으면 Spread 연산자를 이용하면 된다.
다음은 Spread 연산자를 이용하여 객체를 복사한 모습이다.
Spread 연산자를 이용하여 복사했기 때문에 'firstIngredient'의 내용을 바꾸고 'secondIngredient'를 출력해도 내용은 바뀌지 않는다.
아직 작성 중인 페이지 입니다.
