모던 리액트 Deep Dive - 자주 사용되는 자바스크립트 문법

⚡리액트 개발을 위해 꼭 알아야할 자바스크립트 - 1.6 리액트에서 자주 사용되는 자바스크립트 문법

1.6.1 구조 분해 할당

🌚구조 분해 할당(Destructuring assignment)

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

💡배열 구조 분해 할당

useState(value,setter)  : 2개짜리 배열을 반환하는 함수

🌓 useState가 객체가 아닌 배열을 반환하는 이유는? 심플하고, 순서 기반으로 의미를 전달하기 위해서

• 객체 구조 분해 할당은 원하는 이름으로 변경하는 것이 번거로움( 변수 이름이 강제되고, 불필요하게 장황 )
• 배열 구조 분해 할당은 자유롭게 이름을 선언할 수 있기 때문에 직관적이고 간결하다. useState는 배열을 반환하는 것
• 배열 구조 분해 할당은 ,의 위치에 따라 값이 결정됨

const array = [1, 2, 3, 4, 5]
const [first, , , , fifth] = array //2,3,4는 아무런 표현이 없어 변수 할당이 생략됨

first // 1
fifth // 5

→ 이러한 방법은 실수를 유발할 가능성이 커서 일반적으로 배열의 길이가 작을 때 주로 쓰임

🌓 배열 분해 할당의 기본값 선언
- 사용하고자 하는 배열의 길이가 짧거나 값이 없는 경우(undefined)에는 기본 값을 사용할 것
- 주의할 것은 반드시 undefined일 때만 기본값을 사용한다는 것

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

💡객체 구조 분해 할당

• 객체에서 값을 꺼내온 뒤 할당하는 것
• 배열 구조 분해 할당과 다르게 객체는 객체 내부 이름으로 꺼내온다는 차이점이 있음
• 새로운 이름으로 재할당하는 것도 가능
• 배열과 동일하게 기본값을 주는 것도 가능

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

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

const object = {
  a: 1,
  b: 1,
}

const { a: first, b: second } = object
// first 1
// second 2

const object = {
  a: 1,
  b: 1,
}

const { a = 10, b = 10, c = 10 } = object
// a 1
// b 1
// c 10

이러한 방식은 리액트 컴포넌트인 props에서 값을 바로 꺼내올 때 매우 자주 쓰는 방식!

function SampleComponent({ a, b }) {
  return a + b
}

SampleComponent({ a: 3, b: 5 }) // 8

단순히 값을 꺼내오는 것 뿐만이 아니라 변수에 있는 값으로 꺼내오는 계산된 속성 이름 방식도 가능

const key = 'a'
const object = {
  a: 1,
  b: 1,
}

const { [key]: a } = object
// first 1

계산된 속성 이름을 사용하려면 반드시 이름을 선언하는 : a와 같은 변수 네이밍이 필요하며, 그렇지 않으면 에러 발생함!

이러한 에러는 계산된 이름인 [key]로 값을 꺼내기만 했을 뿐, 어느 변수명으로 할당해야 할지 알 수 없기 때문!

const {[key]} = object // Uncaught SyntaxError: Unexpected token '['

• 배열 구조 분해 할당과 동일하게 전개연산자 ...를 사용하면 나머지 값을 모두 가져올 수 있음
• 배열과 동일하게 전개 연산자는 순서가 중요함

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

const { a, b, ...rest } = object
// rest {c: 1, d: 1, e: 1}

const { ...rest, a, b } = object
// Uncaught SyntaxError: Rest element must be last element

---

1.6.2 전개구문

🌚 전개 구문(Spread Syntax)

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

💡배열의 전개 구문

• 배열 내부에서 ...배열을 사용한다면 해당 배열을 마치 전개하는 것처럼 선언하고, 이를 내부 배열에서 활용할 수 있음
• 기존 배열에 영향을 미치지 않고 배열을 복사 하는 것 가능

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

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

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

arr1 === arr2 // false. 실제로 값만 복사되고 참조는 다르므로 false를 반환한다.

💡객체의 전개 구문

• 객체에서도 배열과 비슷하게 사용이 가능
• 객체를 새로 만들 때 전개 구문을 사용할 수 있으며, 배열의 전개 구문과 동일하게 객체를 합성하는 데 편리함을 줌
• 중요한 것은 객체 전개 구문에 있어서 순서가 중요함
• 위에 선언됐을 때와 아래에 선언됐을 때 작동의 순서 차이로 인해 전혀 다른 객체가 생성 될 수 있음

// 전개 구문 이후에 값 할당이 있다면 값 할당이 전개 구문의 값을 덮어씌움 
const obj = { a: 1, b: 1, c: 1, d: 1, e: 1 } 
const aObj = { ...obj, c: 10, } 

console.log(aObj); // {a: 1, b: 1, c: 10, d: 1, e: 1} 
// 반대는 오히려 전개 구문이 값 할당의 값을 덮어씌움 

const bObj = { c: 10, ...obj, } 
console.log(bObj); // {c: 1, a: 1, b: 1, d: 1, e: 1}

aObj와 bObj의 결과값은 다름 > 전개구문 이후에 값 할당이 있다면 전개 구문이 할당한 값으로 덮어씌움

---

1.6.3 객체 초기자

🌚객체 초기자(object shorthand assignment)

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

const a = 1;
const b = 2;

const obj = {
  a,
  b,
};

console.log(obj); // {a: 1, b: 2}

원래대로라면 객체 안의 키와 값을 a: a와 같은 형식으로 작성해야 했었는데, 넣어야 할 키와 값이 각각 a와 1이고, 이미 해당 내용으로 선언된 변수가 있다면 위와 같은 형식으로 축약해서 선언하는 것이 가능해진 것

---

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

• 모두 배열과 관련된 메서드
• 기존 배열의 값을 건드리지 않고 새로운 값을 만들어 내기 때문에 기존 값이 변경될 염려없이 사용가능함

💡Array.prototype.map

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

const arr = [1, 2, 3, 4, 5];
const doubledArr = arr.map((item) => item * 2);

console.log(doubledArr); // [2, 4, 6, 8, 10]

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

const arr = [1, 2, 3, 4, 5];
const Elements = arr.map((item) => {
	return <Fragment key = {item}>{item}</Fragment>
 });

💡Array.prototype.filter

• 메서드는 콜백 함수를 인수로 받음
• 콜백 함수에서 truthy 조건을 만족하는 경우에만 해당 원소를 반환하는 메서드
• filter의 결과에 따라 원본 배열의 길이 이하의 새로운 배열이 반환됨
• 주로 어떤 조건에 맞는 배열을 반환할 때 사용

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

console.log(evenArr); // [2, 4]

💡Array.prototype.reduce

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

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

console.log(sum); // 15

0 : reduce의 결과를 누적할 초기값
reducer 콜백 함수의 첫 번째 인수: 선언한 초기값의 현재값을 의미
reducer 콜백 함수의 두 번째 인수 : 현재 배열의 아이템을 의미

콜백의 반환값을 계속해서 초기값에 누적하면서 새로운 값을 만듬

• reducer은 단순히 합계를 구하는 것 뿐만이 아닌 배열을 하나의 객체로 반환하는 등 다양하게 사용됨
• filter와 map의 작동을 reduce 하나로도 구현할 수 있는데, 사용법이 복잡하고 코드가 직관적이진 않아서 상황에 맞게 선택하는 것이 좋음

const arr = [1, 2, 3, 4, 5];

const result1 = arr.filter((item) => item % 2 === 0).map((item) => item * 100);

const result2 = arr.reduce((result, item) => {
  if (item % 2 === 0) {
    result.push(item * 100);
  }
  return result;
}, []);

console.log(result1); // [200, 400]
console.log(result2); // [200, 400]

💡Array.prototype.forEach

• 콜백 함수를 받아 배열을 순회하면서 단순히 그 콜백 함수를 실행하기만 하는 메서드
• forEach는 반환값은 undefined로 의미 없음
• 콜백 내부에서 반환하는 작업을 수행하지 않기에 반환값은 undefined가 되고, forEach는 실행되는 순간 에러를 던지거나 프로세스를 종료하지 않는 이상 멈출 수 없음

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


function run() {
  const arr = [1, 2, 3];
  arr.forEach((item) => {
    console.log(item);
    if(item === 1) {
      console.log('finished!');
      return;
    }
  })
}

run();
// 중간에 return이 존재해 함수 실행이 끝났음에도 불구하고, forEach 콜백이 실행됨
// 이는 return이 함수의 return이 아니라 콜백 함수의 return으로 간주됨

---

1.6.5 삼항 조건 연산자

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

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

• 기존의 if 조건문을 간단하게 쓸 수 있다는 점에서 리액트에서 자주 쓰임

JSX 내부에서 조건부로 렌더링하기 위해서 가장 널리 쓰이는 방법

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

• 가급적이면 중첩해서 쓰지 않는 편이 좋음