React 완벽 가이드 섹션 2: 자바스크립트 함수 되짚어 보기

https://www.udemy.com/course/best-react/

 

 

본 강의를 수강하고 느낀점과 배운것에 대해 정리하는 글입니다.

 

자바스크립트에는 var라는 키워드가 있고 ES6에는 추가된 두가지 키워드가 있다.

let과 const 키워드가 있다.

이 강의 에서는 var를 거의 사용하지 않고 let과 const로 두가지 키워드를 사용할 것이다.

두가지 키워드 중에 주로 const를 사용할 것이다. 

 

강의 내용에 let과 const의 설명을 자세히 하지 않고 간단하게 하고 넘어갔다.

let은 새로운 var라고 설명을 했고 변수에 값을 재할당 할 수 있는 키워드라고 설명했다.

const는 상수이며 변수값에 새로 재할당이 불가능한 키워드라고 했다.

 

기존에는 const는 변경불가능한 키워드 라고만 생각을 했지만

const를 객체로 선언을 하면 값을 변경할 수 있다.

이건 모던 자바스크립 딥 다이브에서 공부한 내용이다.

 

이것은 일반적인 함수의 모양이다.

화살표 함수는 이런 모양이다.

화살표 함수의 구문은 function을 생략할 수 있기 때문에 일반적인 함수보다 짧다.

키워드 this로 인해 생겼던 많은 문제들을 해결해주는 장점이 있다.

오직 1개의 인수를 받는다면 주변에 있는 소괄호를 생략할 수 있다.

함수가 하는일이 하나 밖에 없다면 중괄호도 생략 할 수 있다.

 

이렇게 코드의 길이를 줄일 수 있다.

 

exports, imports

app.js로 export하는 2가지 방법을 알려준다.

person.js

utility.js

받는 방법도 여러가지지만 간단하게 소개하고 넘어 가겠다.

위에 2개는 default export라고 하고

밑에 2개는 named eport라고 한다.

default 로 되어 있는 것은 언제나 defautl로 표시한 것을 참조한다.

하지만 export로만 보냈으면 중괄호로 변수명을 적어줘야 한다.

두가지를 합쳐서 받을 수도 있다.

전체를 한번에 받을 수도 있다.

 

클래스 이해하기

클래스는 청사진 같은거다. class 키워드로 프로퍼티와 메소드를 가질 수 있습니다.

클래스를 가지고 자바스크립트 객체를 생성할 수도 있습니다.

메소드는 메소드의 이름 다음에 중괄호를 넣어서 만들 수 있습니다.

this 키워드로 프로퍼티를 설정할 수 있다.

 

또한 클래스에서는 상속을 사용할 수 있는데요.

이 말은 만약 다른 클래스에 있는 프로퍼티와 메소드를 상속하면. 잠재적으로 새로운 프로퍼티와 메소드를 추가 한다는 뜻입니다. 또한 프로토타입이 있습니다.

서브클래스에서는 super() 생성자를 먼저 호출해야 합니다. 아주 중요한 내용입니다.

다른 클래스를 확장하고 생성자를 실행한다면 생성자 함수안에 super() 메소드를 추가해야 합니다.

 

super가 무슨 역할을 하는지 몰라서 찾아 봤다.

상속에서 super의 두가지 의미

1. 자식 클래스 내에서 부모클래스의 생성자 역할

2. 자식 클래스에서 부모 클래스의 메소드 접근 역할

classes,properties & Methods

클래스에 바로 프로퍼티를 할당할 수 있다. myProperty = 'value' 처럼

생성자 함수를 호출 하지 않아도 된다. 코딩하는 시간을 절약할 수 있다.

메소드의 경우에도 비슷하다.

간단한 메소드는 값으로 함수를 저장하는 프로퍼티라고 생각하면 된다.

ES7 구문의 큰 장점 프로퍼티 값으로 화살표 함수 사용하기 때문에 this를 사용하지 않아도 되고

이 구문을 사용하는 정확한 이유다.

 

더이상 생성자 함수가 필요없으니 super() 도 마찬가지로 필요없다.

이 문법은 강의내내 사용될 차세대 자바스크립트 구문입니다.

 

스프레드와 레스트 연산자

... 3개로 이루어진 연산자 어디에서 사용하는지에 따라 스프레드 또는 레스트라고 부릅니다.

 

스프레드

배열의 원소나 객체의 프로퍼티를 나누는데 사용합니다.

배열인 경우 oldArray의 배열의 내용을 newArray 배열에 추가하고 추가로 1,2 도 배열에 추가한다.

객체인 경우도 마찬가지로 oldObject안에 있는 프로퍼티 키와 값이랑 newProp : 5가 추가 되어

newObject 객체가 생성된다.

 

레스트

레스트 연산자도 같은 연산자지만 약간 다르게 사용된다, 여기서는 함수의 인수 목록 배열로 합치는데 사용됩니다.

 

만약 점3개 없이 실행 했다면 새 배열에 하나의 원소로 포함된다.

 

스프레드 연산자 활용이다.

레스트 연산자 활용

...args 대신 원하는 이름을 지정하면 되지만 앞에 점 3개를 반드시 사용해야 된다.

여기서 점3개는 레스트 연산자로 사용되었으며 매개변수를 배열에 통합했습니다.

매개변수 1,2,3 을 전달한 다음 실행하면,

배열 [1]이 나온다. 왜냐하면 점 3개로 레스트 연사자를 생성해서 배열을 필터링 했기 때문이다.

추가설명

el에 1,2,3이 하나씩 들어가면서 true가 되면 그 값이 리턴이 되고 아니면 반환되지 않는다.

 

destructuring(구조분해할당)

디스트럭쳐링은 배열의 원소나 객체의 프로퍼티을 추출해서 변수에 저장할 수 있도록 해준다.

디스트럭쳐링은 원소나 프로퍼티 하나만 가져와서 변수에 저장합니다.

age는 undefined가 나오는 이유는 age를 추출하지 않았기 때문이다.

 

배열에서 특정원소나 객체에서 특정 속성을 추출하는 편한 방법이 있다는 것을 잘 기억하길 바란다고 한다.

 

참조형 및 원시형 데이터 타입

원시 값을 복사 하기 때문에 number2는 1이 나온다.

하지만 객체나 배열은 원시값을 복사를 하는게 아니라

객체를 가르키고 있는 메모리 주소를 할당 받는 것이기 때문에 2가 출력이 되는것이다.

 

스프레드를 사용하면 객체의 원시 값을 복사를 하는 것이기 때문에 초기값인 num : 1가 출력된다.

(내 생각) number2는 새로운 데이터 주소를 할당 받을 것 같다.

 

배열 함수 새로고침 (새로고침이 잘못 번역된거 같음 뭐가 되새김? 그런 비슷한 뜻이 더 어울릴거 같음)

그냥 기억 되짚어보기인듯 하다.

 

 

차세대 자바스크립트는 아니지만 중요합니다.

다음과 같은 자바스크립트 array 함수가 있습니다: map() , filter() , reduce().

많은 React 개념이 (불변의 방식으로) 배열 작업에 의존하기 때문에 제가 그것들을 꽤 많이 사용하는 것을 보게 될 것입니다.