[모던 리액트 딥다이브] 1.6장 리액트에서 자주 사용하는 자바스크립트 문법

구조 분해 할당

• 배열 또는 객체의 값을 분해해 개별 변수에 즉시 할당하는 것
• 주로 어떠한 객체나 배열에서 선언문 없이 즉시 분해해 변수를 선언하고 할당하고 싶을 때 사용함
• 배열 구조 분해 할당
  • useState
  • 2개 짜리 배열을 반환하는 함수
  • 첫 번째 값을 value, 두번 째 값을 setter로 사용 가능함
  • 배열을 반환하는 이유는 자유롭게 이름을 선언할 수 있기 때문
  • 배열 분해 할당은 기본값을 사용할 수 있음
  • undefined일 때 기본값을 사용함
  • ... 전개 연산자를 사용하면 여러 개의 값을 가져 올 수 있음

const array = [1,2]
const [a = 10, b = 10, c = 10] = array
// a 1
// b 2
// c 10

 

• 객체 구조 분해 할당
  • 말 그래도 객체에서 값을 꺼내온 뒤 할당하는 것
  • 객체 내부 이름으로 꺼내와야 함
  • 새로운 이름으로 다시 할당하는 것도 가능함
  • 기본값을 사용할 수 있음
  • 리액트 컴포넌트인props에서 값을 바로 꺼내올 때 매우 자주 쓰는 방식
  • .. 전개 연산자를 사용하면 여러 개의 값을 가져 올 수 있음
  • 배열 구조 분해 할당보다 번들링 크기가 상대적으로 큼

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

const {a : first, b : second} = obj

// first 1 
// second 2

 

 

 

전개 구문

• 배열이나 객체, 문자열과 같이 순회할 수 있는 값에 대해 말 그대로 전개해 간결하게 사용할 수 있는 구문
• 배열
  • 배열 내부에서 ...배열을 사용하면 해당 배열을 마치 전개하는 것처럼 선언하고, 이를 내부 배열에서 활용할 수 있음
  • 기존 배열에 영향을 미치지 않고 배열을 복사하는 것도 가능

const arr1 = ['a','b']
const arr2 = arr1

arr1 === arr2 // true. 내용이 아닌 참조를 복사하기 때문에

const arr1 = ['a','b']
const arr2 = [...arr1]

arr1 === arr2 // false. 값이 복사되고 참조는 다름

• 객체
  • 새로운 객체나 객체를 합성할 때 편리함
  • 순서가 중요함
  • 순서에 따라 값을 받아들일지, 값을 덮어쓸지 달라지기 때문

const obj1 = {
	a : 1,
    b : 2,
}

const obj2 = {
	c : 3,
    d : 4,
}

const obj = {...obj1, ...obj2}

 

 

 

객체 초기자

• 객체를 선언할 때 객체에 넣고자 하는 키와 값을 가지고 있는 변수가 이미 존재한다면 해당 값을 간결하게 넣어줄 수 있는 방식
• 객체를 좀 더 간편하게 선언할 수 있고, 트랜스파일 이후에도 큰 부담이 없음

const a = 1
const b = 2

const obj = {
	a,
    b,
}

 

 

 

Array 프로토타입 메서드

• 기존 배열의 값을 건드리지 않고 새로운 값을 만들어 내기 때문에 변경될 염려 없이 안전하게 사용할 수 있음
• Array.prototype.map
  • 인수로 전달받은 배열과 똑같은 길이의 새로운 배열을 반환하는 배열
  • 배열의 각 아이템을 순회하면서 각 아이템을 콜백으로 연산한 결과로 구성된 새로운 배열을 만들 수 있음
• Array.prototype.filter
  • 콜백 함수를 인수로 받는데, 이 콜백 함수에서 truthy 조건을 만족하는 경우에만 해당 원소를 반환하는 메서드
  • 필터링 역할
  • 원본 배열의 길이 이하의 새로운 배열이 반환됨
• Array.prototype.reduce
  • 콜백 함수와 함께 초깃값을 추가로 인수로 받는 배열
  • 초깃값에 따라 배열이나 객체, 또는 다른 무언가를 반환할 수 있는 메서드
  • reducer 콜백 함수를 실행하고, 이를 초깃값에 누적해 결과를 반환함
  • 단순히 합계를 구하는 것뿐만 아니라 배열을 원하는 하나의 객체로 변환하는 등 다양하게 활용 가능함
  • filter와 map의 작동을 reduce 하나로 구현 가능함

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

• Array.prototype.forEach
  
  • 콜백 함수를 받아 배열을 순회하면서 단순히 콜백 함수를 실행하는 메서드
  • 아무런 반환값이 없음
  • 실행되는 순간 에러를 던지거나 프로세스를 종료하지 않는 이상 멈출 수 없음
  • break, return 모두 소용 없음 => 콜백함수의 것으로 간주되기 때문임

 

 

 

 

삼항 조건 연산자

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

 

• if 조건문을 간단하게 쓸 수 있음
• 특히 JSX 내부에서 조건부로 렌더링할 때 널리 쓰임
• 가급이면 중첩해서 쓰지 않기