[모던 리액트 Deep Dive] 리액트에서 자주 사용하는 자바스크립트 문법

구조 분해 할당

배열 또는 객체의 값을 말 그대로 분해해 개별 변수에 즉시 할당하는 것.

배열 구조 분해 할당  : 배열의 요소를 개별 변수에 할당하는 방법

기본 사용법 ▼

const array = [1, 2, 3, 4, 5]

let [first, second, third, fourth ,fifth] = array;
console.log(first); // 1
console.log(second); // 2
console.log(third); // 3
console.log(fourth); // 4
console.log(fifth); // 5

 

일부 요소 건너뛰기 ▼

쉼표를 사용하여 배열의 일부 요소 건너뛰기

const array = [1, 2, 3, 4, 5]

let [first, , , ,fifth] = array;
console.log(first); // 1
console.log(fifth); // 5

 

기본값 설정 ▼

배열의 요소가 undefined인 경우 기본값을 설정할 수 있다.

- 기본값을 사용하는 것은 a, e

a : 명시적으로 undefined 지정

e : 배열의 길이를 넘어서서 구조 분해 할당됐으므로 undefined 평가됨.

const [a=1, b=1, c=1, d=1, e=1] = [undefined, null, 0, '']
a // 1
b //null 
c // 0
d // ''
e // 1

 

Rest 패턴 ▼

나머지 요소를 하나의 배열로 모아서 할당

const array = [1, 2, 3, 4, 5]

let [first, second, ...arrayRest] = array;
console.log(first); // 1
console.log(second); // 2
console.log(arrayRest); // [3,4,5]

 

객체 구조 분해 할당 : 객체에서 값을 꺼내온 뒤 할당하는 것

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

const obj = {a:1, b:1, c:1, d:1, e:1}

const { a, b, c, ...objRest} = obj
// a 1
// b 1
// c 1
// objRest = {d:1, e:1}

 

새로운 이름으로 재할당, 배열과 마찬가지로 기본값을 주는 것도 가능하다.

---

전개 구문

배열이나 객체, 문자열과 같이 순회할 수 있는 값에 대해 말 그대로 전개해 간결하게 사용할 수 있는 구문

 

배열의 전개 구문

const arr1 = ['a', 'b']
const arr2 = [...arr1, 'c', 'd', 'e'] // ['a', 'b', 'c', 'd', 'e']

배열 내부에서 ...배열을 사용하면 해당 배열을 마치 전개하는 것처럼 선언하고 활용 가능

기존 배열에 영향을 미치지 않고 배열을 복사하는 것도 가능하다.

 

객체의 전개 구문

const obj1 = { a:1, b:2 }
const obj2 = { c:3, d:4 }

const newObj = { ...obj1, ...obj2 }
// { a:1, b:2, c:3, d:4 }

 

▼ 객체 전개 구문에 있어서 순서가 중요하다. 순서의 차이로 인해 값이 덮여쓰여질 수 있기 때문이다.

const obj = { a:1, b:2, c:3, d:4 }

const newObj = { ...obj, c:10 }
// { a:1, b:2, c:10, d:4 }

객체 전개 구문 이후에 c:10으로 값을 덮어씀.

const obj = { a:1, b:2, c:3, d:4 }

const newObj = { c:10, ...obj}
// { a:1, b:2, c:3, d:4 }

객체 전개 구문이 c:10의 값을 3으로 덮어씀.

---

객체 초기자

객체에 넣고자 하는 키와 값을 가지고 있는 변수가 존재한다면 해당 값을 간결하게 넣어줄 수 있는 방식이다.

const a = 1
const b = 2

const obj = {
	a, b
}
// { a:1, b:2 }

---

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

Array.prototype.map

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

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

const arr = [1, 2, 3, 4, 5]
const dbArr = arr.map((item) => item * 2)
// [2, 4, 6, 8, 10]

 

Array.prototype.filter

말 그대로 필터링 역할을 하는 메서드, 어떠한 조건을 만족하는 새로운 배열을 반환할 때 주로 사용

인수로 받는 콜백함수에서 truthy 조건을 만족하는 경우에만 해당 원소를 반환한다.

const arr = [1, 2, 3, 4, 5]
const evenArr = arr.filter((item) => item % 2 === 0)
// [2, 4]

 

Array.prototype.reduce

콜백 함수와 함께 초깃값을 추가로 인수를 받는데, 이 초깃값에 따라 배열이나 객체, 또는 그 외의 다른 무언가를 반환할 수 있는 메서드

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

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

0 > 결과를 누적할 초깃값

콜백 함수의

첫 번째 인수 : 앞서 선언한 초깃값의 현재

두 번째 인수 : 현재 배열의 아이템

>> 콜백의 반환값을 계속 초깃값에 누적하면서 새로운 값을 만드는 것.

 

Array.prototype.forEach

콜백 함수를 받아 배열을 순회하면서 단순히 그 콜백 함수를 실행하는 메서드

const arr = [1, 2, 3]

arr.forEach((item) => console.log(item))
// 1, 2, 3

 

※ 주의할 점

1. 반환 값이 없다. 단순히  그 콜백 함수를 실행할 뿐이다. 반환 값은 undefined로 의미가 없다.

2. 메서드가 실행되고 에러를 던지거나, 프로세스를 종료하지 않는 이상 이를 멈출 수 없다.

---

삼항 조건 연산자

3개의 피연산자를 취할 수 있는 문법

조건문 ? 참일 때 값 : 거짓일 때 값

조건부 렌더링 : if 조건문을 간단하게 쓸 수 있다는 점에서 리액트에서 자주 쓰인다.

※ 간단하지만 중첩해서 사용하면 가독성이 떨어지기 때문에 가급적이면 중첩해서 쓰지는 말자