[React 공부 전 알아야 할 JavaScript]_데이터 조작 핵심 기술

이번 포스트에선 '구조분해할당', '스프레드 연산자', '나머지 매개변수'에 대해 포스팅 했습니다.

구조 분해 할당 (Destructuring Assignment)

객체나 배열에서 필요한 데이터만 추출해서 변수로 만드는 것을 말해요.

배열분해 : 순서 중요

const colors = ['red', 'blue', 'green'];

// 고전적인 방식
const first = colors[0];
const second = colors[1];


// 구조 분해
const [first, second] = colors; // first에는 'red', second에는 'blue'가 들어감

// 구조 분해(,으로 순서 구분하여 원하는 데이터 추출)
const [,first, second] = colors; // first에는 'blue', second에는 'green'이 들어감

객체분해 : key 중요

const user = { name : '홍길동', age : 25 };

// 고전적인 방식
const name = user.name; // 또는 const name = user['name']


// 구조 분해
const { name, age } = user; 
console.log(name); // '홍길동'

// 구조 분해(key와 '다른 변수명'으로 저장)
const { name : id, age } = user;
console.log(id) // '홍길동'

// 구조 분해(key값이 없거나 undefined 일 경우 '기본값 설정')
const { name, age, job = 'dev' }
console.log(job) // 'dev'

이렇게 구조분해를 사용하면 가독성이 증가할뿐만 아니라 유지보수가 용이하고 기본값을 설정할 수 있어 편리합니다.

스프레드 연산자 (Spread Operator)

스프레드 단어 뜻처럼 배열이나 객체의 요소들을 낱개로 분리하여 복사한 후 값을 추가하거나 수정하는 것을 말합니다.
사용할 때는 기존의 변수 앞에 '...'(점 세개)를 붙여서 사용하고 매개변수로 적을 때는 맨 앞에 적어 사용합니다.

배열

// 배열 값 추가
const base = [1, 2];
const newArray = [...base, 3, 4]; // [1, 2, 3, 4]

// 배열 값 수정
const updateArray = [...newArray.slice(0,2), 5, ...newArray.slice(3)]
// [1, 2, 5, 4]

객체

const user = { name : '홍길동', age : 25 };
const updatedUser = { ...user, age : 26, job : 'dev'};
// name은 유지하고 age 수정, job 추가

리액트에는 기존의 데이터를 직접 수정하지 않고 복사본을 사용해야하는 '불변성 유지'라는 규칙이 있기 때문에 스프레드 연산자가 매우 유용합니다.

나머지 매개변수 (Rest Parameter)

rest도 단어 뜻처럼 (지정한 데이터를 제외한) 나머지 값들을 모아줍니다.
사용할 때는 rest도 스프레드처럼 '...'(점 세개)하고 뒤에 변수명(변수명은 자신이 지정)을 붙입니다. 스프레드와는 반대로 매개변수로 적을 때는 무조건 맨 뒤에 적어 사용합니다.

함수 파라미터

function exRest(first, sencond, ...others) {
  console.log(first);  // 1
  console.log(second); // 2
  console.log(others); // [3, 4, 5]
}
exRest(1, 2, 3, 4, 5);

객체 구조 분해와 함께 사용

const user = { id : 1, name : '홍길동', age : 25, region : '서울' };
const { id, ...rest } = user;

console.log(id);   // 1
console.log(rest); // { name: '홍길동', age: 25, region: '서울' }

특정 데이터를 변수로 할당하거나 추출하고 남은, 나머지 데이터들을 모아서 (배열이나 객체 형태로) 한꺼번에 전달할 때 사용합니다.

다음 포스트에서는 리스트 렌더링에 대해 포스팅하겠습니다.