[모던 리액트 Deep Dive] 1장. 리액트 개발을 위해 꼭 알아야 할 자바스크립트

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

웹 페이지에 접근하는 사용자의 브라우저와 버전은 개발자와 다르게 항상 최신 버전이 아니고, 크롬, 사파리, 파이어폭스 등 다양하기 때문에 이러한 다양한 브라우저에서 문법 지원 또한 염두에 두어야 함

1.6.1 구조 분해 할당

• 배열 또는 객체의 값을 말 그대로 분해해 개별 변수에 즉시 할당하는 것
• 주로 어떠한 객체나 배열에서 선언문 없이 즉시 분해해 변수를 선언하고 할당하고 싶을 때 사용

배열 구조 분해 할당

const array = {1, 2, 3, 4, 5}

const [first, second, third, ...arrayRest] = array
// first 1
// second 2
// third 3
// arrayRest [4, 5]

🔖 useState 함수는 2개 짜리 배열을 반환하는 함수이며, 첫 번째 값을 value로, 두 번째 값을 setter로 사용 가능

💡 useState가 객체가 아닌 배열을 반환하는 이유는 무엇?
객체 구조 분해 할당은 사용하는 쪽에서 원하는 이름으로 변경하는 것이 번거로움
배열 구조 분해 할당은 자유롭게 이름을 선언할 수 있기 때문에 useState는 배열을 반환하는 것을 추측할 수 있음

• 배열의 구조 분해 할당은 ,의 위치에 따라 값이 결정
  • 중간 인덱스에 대한 할당을 생략하고 싶다면 다음과 같이 선언 가능
  • const [first, , , , fifth] = array => 실수 유발 가능성이 큼
• 사용하고자 하는 배열의 길이가 짧거나 값이 없는 경우에는(undefined) 기본값 사용할 것
  • 반드시 undefined일 때만 기본값 사용
  • const [ a = 1, b = 1, c = 1, d = 1, e = 1] = [undefined, null, 0, '']

객체 구조 분해 할당

• 객체에서 값을 꺼내온 뒤 할당하는 것을 의미
  • 배열 구조 분해 할당과는 객체 내부 이름으로 꺼내온다는 차이

const object = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: 5,
}

const { a, b, c, ...objectRest } = object
// a 1
// b 2
// c 3
// objectRest = {d: 4, e: 5}

 

🔖 새로운 이름으로 다시 할당하는 것 가능
🔖 배열과 마찬가지로 기본값을 주는 것 가능
🔖 변수에 있는 값으로 꺼내오는 이른바 계산된 속성 이름 방식 가능

 

1.6.2 전개 구문

배열의 전개 구문

• 과거 : 배열간에 합성을 하려면 push(), concat(), splice() 등의 메서드 사용

const arr1 = ['a', 'b']
const arr2 = [...arr1, '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 }

• 순서가 중요, 위에 있을 때와 아래에 있을 때의 작동의 순서 차이로 인해 전혀 다른 객체가 생성될 수 있음
• 단순히 값을 복사하는 배열과는 다르게, 객체의 경우 객체의 속성값 및 설명자 확인, 심벌 체크 등 때문에 트랜스파일된 코드가 커짐
• 객체 전개 연산자 또한 트랜스파일되면 상대적으로 번들링이 커지기 때문에 사용시 주의

1.6.3 객체 초기자

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

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

Array.prototype.map

• 인수로 전달받은 배열과 똑같은 길이의 새로운 배열을 반환하는 메서드
• 배열의 각 아이템을 순회하면서 각 아이템을 콜백으로 연산한 결과로 구성된 새로운 배열을 만들 수 있음

Array.prototype.filter

• 콜백 함수를 인수로 받는데, 이 콜백 함수에서 truthy 조건을 만족하는 경우에만 해당 원소를 반환하는 메서드
• 필터링하는 역할의 메서드이며, filter의 결과에 따라 원본 배열의 길이 이하의 새로운 배열이 반환
• 앞선 map과 다르게 같은 크기의 배열이 나오지 않을 수도 있음

Array.prototype.reduce

• 콜백 함수와 함께 초깃값을 추가로 인수로 받는데, 이 초깃값에 따라 배열이나 객체, 또는 그 외의 다른 무언가를 반활할 수 있는 메서드
• 콜백의 반환값을 계속해서 초깃값에 누적하면서 새로운 값을 만듦

Array.prototype.forEach

• 콜백 함수를 받아 배열을 순회하면서 단순히 그 콜백 함수를 실행하기만 하는 메서드
• forEach는 아무런 반환값이 없음
  • 단순히 콜백 함수를 실행할 뿐, map과 같이 결과를 반환하는 작업은 수행하지 않음
  • 콜백 함수 내부에서 아무리 반환해도 모두 의미 없는 값이 됨
  • 반환값 : undefined로 의미 없다
• forEach는 실행되는 순간 에러를 던지거나 프로세스를 종료하지 않는 이상 멈출 수 없음
  • break, return, 그 무엇을 이용해도 배열 순회를 멈출 수 없음
  • return이 함수의 return이 아닌 콜백 함수의 return으로 간주되기 때문
  • 내부의 콜백 함수는 무조건 O(n)만큼 실행되므로 코드 작성과 실행 시에 반드시 최적화할 가능성이 있는지 검토

1.6.5 삼향 조건 연산자

• 3개의 피연산자를 취할 수 있는 문법
  • 조건문 ? 참일_때_값 : 거짓일_때_값
• 삼향 조건 연산자는 기존의 if 조건문을 간단하게 쓸 수 있다는 점에서 리액트에서 자주 쓰임
  • JSX 내부에서 조건부로 렌더링하기 위해서 가장 널리 쓰이는 방법

function Component({ condition }) {
    return <>{condition ? '참' : '거짓'}</>
}

• 삼향 연산자는 가급적이면 중첩해서 쓰지 않는 편이 좋음

1.6.6 정리

• 코드를 사용할 준비는 돼 있는지, 즉 바벨과 같은 도구를 이용한 트랜스파일을 지원하는지, 혹은 사용자의 디바이스에서 별도 조치 없이 사용가능한지를 꾸준히 점검한다면 안정적인 리액트 애플리케이션을 만드는데 큰 도움이 됨