리액트에서 자주 사용되는 자바스크립트 문법

구조 분해 할당

구조 분해 할당은 객체의 값을 분해해 개별 변수로 할당함을 의미

배열과 객체에서 주로 사용하고 주로 객체나 배열에서 선언문 없이 즉시 분해해 변수에 할당하고 싶을 때 사용함.

배열 구조 분해 할당

useState에서 쉽게 볼 수 있는 문법


const arry = [1, 2, 3]
const [f, s, t] = arry;

배열 구조 분해 할당은 , 의 위치에 따라 값이 결정된다. 위치를 기준으로 결정하기에 사용하는 측에서 이름을 자유롭게 지정할 수 있고 이런 이유때문에 useState가 배열로 반환한다고 추측된다.


const arry = [1, 2, 3]
const [f, , t] = arry;

만약 건너뛰고 할당을 하고 싶다면 , 로 건너뛰기가 가능한데 실수를 유발할 가능성이 크기에 배열이 작을 때 사용한다.

또 기본값을 선언할 수 있다.


const [a = 1, b = 2, c = 3, d = 4, e = 5] = [undefined, null, 0, '']

주의할점은 undefined인 경우에만 기본값 할당을 지원한다.

a 는 undefined라 기본값이 할당되었 e는 리스트 범위를 넘어가 자동으로 undefined이 할당되어 기본값을 사용한다.

객체 구조 분해 할당

객체 에서 꺼낸 값을 할당하는 것.

배열 구조 할당과 달리 객체는 내부 이름으로 꺼내온다.

객체 구조 분해 할당은 배열과

전개 구문

배열의 전개 구문

이전엔 push(), concat(), splice() 등의 메서드를 사용해야 했지만 전개 구문을 활용하면 쉽게 배열을 합성할 수 있음.


const a = [1, 2]
const b = [...a, 3, 4, 5]

복사도 가능하다


const a = [1, 2]
const b = a
a === b //true 참조를 복사했기 때문

const c = [...a]
a === c //false 값만 복사했기 때문에

객체의 경우에도 사용이 가능한데 순서가 중요하다.

이름이 같으면 덮어씌워버리기 때문에.

Array 프로토타입 메서드: map, filter, reduce ,forEach

Array.prototype.map, Array.prototype.filter, Array.prototype.reduce 모두 배열과 관련된 메서드

기존 배열 값을 건드리지 않고 새로운 값을 만들어 내기 때문에 기존 값이 변경될 염려 없이 안전하게 사용 가능.

Array.prototype.map

전달 받은 배열과 똑같은 길이의 새로운 배열을 반환하는 메서드.

각 아이템을 순회하며 . 각아이템을 콜백으로 연산한 결과로 구성된 새로운 배열을 만들 수 있음.

리액트에서 특정 배열을 기반으로 리액트 요소를 반환하고자 할 때 많이 사용됨

Array.prototype.filter

콜백 함수를 인자로 받고 이 콜백 함수에서 truthy 조건을 만족하는 경우에만 해당 앙이템을 반환함.

필터링 역할을 하는 메서드이고 filder의 결과에 따라 원본 이하 길이의 배열이 반환됨.

기존 배열에 조건을 추가해 조건을 만족하는 배열을 반환할 때 사용함

Array.prototype.reduce

두 메서드와 달리 조금 복잡한 메서드.

콜백 함수와 함께 초깃값을 추가로 인수로 받는다.

이 초기 값에 따라 배열이나 객체, 또는 그 외 무언가를 반환할 수 있는 메서드.

reduce 콜백 함수를 실행하고 이를 초기값에 누적해 결과를 반환함.


const a = [1, 2, 3, 4, 5]
const sum = a.reduce((resualt, item) => {
	return resualt + item
}, 0)) // 15

reduce는 배열을 원하는 하나의 객체로 변환하는 등 다양한 예제에 사용됨.

filter와 map의 작동을 reduce하나로 구현이 가능한데 reduce는 두 메서드와 비교해 사용법이 복잡해 코드가 직관적이지 않아 짧은 코드라면 filter와 map을 활용해 구현하는것도 경우에 따라 나쁘지 않음.


const a = [1, 2, 3, 4, 5]
const re1 = a.filter((item) => item % 2 === 0)).map((item) => item * 100)
const re2 = a.reduce((result, item) => {
	if(item % 2 === 0){
		result.push(item * 100)
	}
}, [])

Array.prototype.forEach

forEach는 반환값이 undefined다. 즉, 단순히 배열을 돌며 콜백 함수를 실행할 뿐 결과를 반환하지 않는다.

forEach는 실행되는 순간 에러를 던지거나 프로세스를 종료하지 않는 이상 멈출 수 없다.

break, return 그 무엇도 멈출 수 없다.

return 을 내부에서 하더라도 콜백의 리턴으로 간주되기 때문이다.