이 글은 <Do it! 리액트 프로그래밍 정석>을 참고하여 작성하였습니다.
정리 느낌으로 작성하였으므로 내용이 정확하지 않고 구체적이지 않을 수 있습니다.
템플릿 문자열
var string1 = 'ㅎㅇ';
var string2 = '반가워';
var greeting = '${string1} ${string2}';
병합 연산자 +보다 간편하다
배열 전개 연산자
기존 문법으로 배열 다루기
var array1 = ['one','two'];
var array2 = ['three','four'];
var combined = array1.concat(array2); // 합치기
var combined = [].concat(array1, array2); // ""
var three = array1[2] || 'empty';
-> || 연산자는 배열 NULL일 때 기본값 지정 가능
function func(){
var args = Array.prototype.slice.call(this, arguments);
var others = args.slice(1, args.length);
-> 배열 저 범위만큼 추출
}
//특수 변수(arguments)를 사용해 함수 내 인자들을 배열로 변환
ex) func(a,b,c)하면 a,b,c가 각각 args[0],[1],[2]로 할당
* js에서 arguments는 모든 함수 내에서 사용 가능한 지역변수이다. *
ES6 전개 연산자(...) 도입
var array1 = [1,2]
var array2 = [3,4]
const combined = [...array1, ...array2];
-> 두 배열을 전개 연산자로 합쳤다.
const [ first , second , three = 'empty' , ...others ] = array1;
-> first = 1, second = 2, three = 'empty', others = []
이런 식으로 배열을 쪼개서 변수에 저장
...other는 추출 후 남은 요소 배열로 추출
!! 올바르지 못한 예시
var wrongArr = ...array1;
-> 전개 연산자를 배열 표현식 없이 사용하면 안됨
func(...args){var [frist,...others] = args;
-> 함수 인자 배열을 args 변수에 할당
객체 전개 연산자
기존 문법으로 객체 다루기
var objectOne = { one: 1, two: 2, other: 0};
var objectTwo = { three: 3, four: 4, other: -1};
var combined = Object.assign({},배열1,배열2);
->assign()으로 합치기, 중복되는 key값이 있으면 덮어씀 (앞에꺼 우선)
var others = Object.assign({},combined);
delete others.other;
-> key:other인 요소 삭제
ES6 전개 연산자(...) 도입
var objectOne = { one: 1, two: 2, other: 0};
var objectTwo = { three: 3, four: 4, other: -1};
var combined = {
...objectOne,
...objectTwo,
};
-> 이것도 병합될 때 중복되는 key값이 있으면 덮어슴 (앞에꺼 우선)
var { other, ...others } = combined;
-> others = { one:1,two:2,three:3,four:4 }
가변 변수,불변 변수
가변 변수 let:읽거나 수정 가능
let num - 1;
불변 변수 const:할당은 안되지만 변경은 가능!!!
const num - 1;
num = 3; -> 오류
하지만 내장함수(push,splice,...)사용하면 값 변경 가능
const arr2 = [];
arr2.push(1); -> 오류 x
무결성에 위배되었다.(일관성이 없음),그러므로 내장함수로 수정하는 것을 암묵적으로 금지
수정은 x,하지만 값을 복사해서 새로 정의하는 것은 o.
concat(),slice() 등을 사용하면 o!
클래스
기존 문법 -> prototype으로 클래스 표현
함수를 생성자(constructor) 형태로 선언한 다음 상속이 필요한 변수나 함수를 prototype 객체에 할당하는 방법을 사용
ex)
function Shape (x , y) {
this.name = 'Shape';
this.move = (x , y); // prototype 객체에 move() 정의되어있음
}
//static 함수 선언
Shape.create = function(x, y) { return new Shape(x ,y) }
//인스턴스 함수 선언
Shape.prototype.move = function(x, y) {
this.x = x;
this.y = y;
}
ES6에서는 class 키워드로 클래스 정의 가능
class Shape {
static create(x, y) { return new Shape(x, y); } // 클래스 변수(static)
move (x, y) {
this.x = x;
this.y = y;
}
area() {
return 0;
}
}
var s = new Shape(0, 0);
s.area(); // 0
Java와 유사하지만 다중 상속이나 인터페이스는 지원하지 않음
화살표 함수
! '==' -> 값만 비교, '===' 값,자료형 비교 !
익명 함수와 유사
var add = (first, second) => {
return first + second;
}
이나
var add = (first, second) => first + second;
반환값이 객체라면
var addAndMultiple = (first, second) => ({add: first + second, multiply: first * second});
function addNumber(num) {
return function(value) {
return num + value;
};
}
//계단형 함수 선언..(함수 표현식 반환)
-> 화살표 함수로 간결하게 가능
var addNumber = num => value => num + value;
//함수 표현식을 간결하게 반환
객체 확장 표현식
var obj ={ x, y};
//키 이름 생략하면 자동으로 키의 이름이 키 값이됨
var obj2 = {
methodA() { console.log('method A'); }
// fucntion 생략하고 선언
}
구조 분해
좌변:값이 '담길' 변수 우변:값
const [a,b] = [1,2];
var foo = [1,2,3];
[one,two,three] = foo;
// 변수 one,two,three에 1,2,3 할당
var [a,b] = [1,2];
[a,b] = [b,a];
// 스와핑
var a = { p: 42, q: true };
var { p, q } = a;
// p = 42 , q = true
key:value 형태랑 변수에 값을 넣는 형태랑 헷갈리지 말자
라이브러리 의존성 관리
의존성:어떤 파일이나 코드가 다른 파일이나 코드를 필요로 하는 것
기존에는
-> ES6부터 의존성 문제 해결 : import 구문 이용
ex) import ~ from ~
의존 파일을 모두 내려받고 코드를 구동하도록 변경
export const ~~; -> 변수나 클래스를 다른 파일에서 참조할 수 있도록 정의
배열 함수
forEach()
쿼리 스트링: 웹 주소에 포함시키는 문자열
기존 예제(쿼리 스트링 'banana=10&apple=20&orange=30'을 & 문지열을 기준으로 분리하여 객체에 담아 반환하는 parse()함수 선언
function parse(qs) {
var queryString = qs.substr(1)
var chunks = qs.split('&');
var result = {};
for(var i = 0;i < chunks.length; i++){
var parts = chunks[i].split('=');
var key = parts[0];
var value = parts[1]
result[key] = value; // result = { banana : '10' }
// 딕셔너리 할당 방법 변수이름[키 이름] = 내용;
return result;
}
forEach() 함수를 사용하면 반복문 순번,배열의 크기를 따로 변수에 저장하는 과정을 생략할 수 있음.
chunks.forEach((chunk) => {
const [key, value] = chunk.split('=') // 구조 분해
result[key] = value;
});
return result;
map()함수 : 배열 가공하여 새 배열 만드는 함수
consr result = chunks.map((chunk) => {
const [ key, value] chunk.split('=');
return { key: key, value: value };
});
forEach()와 같은 결과 반환
reduce(): 배열을 객체로 만들어줌
비동기 함수 처리
동기:서버에서 요청을 보냈을 때 응답이 와야 다음 작업 가능
비동기:응답에 상관 없이 다음 작업 수행 -> 스레드 낭비 x
ex) 음식점 진동벨
기존 js에서는 지연 작업을 해야하는 함수가 늘어나면 callback hell이 열림 {{{{}}}}}} ex) setTimeout()
* callback 함수: 특정 함수가 특정 함수에 전달되어 어떤 조건에 의해 호출되는 함수
바뀐 점 나중에
디바운스와 스로틀
디바운스: 내용 입력하다가 특정 시간 대기하고 있으면 마지막에 입력된 내용을 바탕으로 서버요청을 하는 방법
ex) 연관 검색어 창,입력을 멈추면 목록 쭈루룩 뜸
스로틀:디바운스와 비슷하지만 입력되는 동안에도 바로 이전에 요청한 작업을 주기적으로 실행
ex)페이스북에서 스크롤 내리면 게시물 계속 나옴
