[React] - 자주 사용되는 ES6 문법

01. object

key - value pair

const age = 21;

const someObject = {
    name: '서근',
    age: age, //key와 value가 같은 모양이면 value 생략 가능 
    blog: 'https://seons-dev.tistory.com,
    someFunc: () => { }
};

1) 얕은 복사

const obj1 = {
    somekey1: 10,
    somekey2: '안녕',
};

const obj2 = obj1;
obj1.somekey1 += 1;

console.log('obj1', obj1); //{somekey1: 11, somekey2: '안녕'}
console.log('obj2', obj2); //{somekey1: 11, somekey2: '안녕'}

문제점) 위 코드처럼 obj2 변수에 obj1을 복사하면 얕은 복사가 되어 obj2 객체의 키 또는 값을 복사하면 obj1도 수정되게 된다.

 

왜 이런 현상이?
복사한 값이 obj1의 key와 value를 복사한 것이 아닌 obj1 이라는 주소값을 그대로 복사했기 때문!

 

그래서 obj1과 obj2의 주소값이 같아지게 된 것!

2) 깊은 복사

그렇다면 주소값을 복사하는 것이 아닌 새로운 객체를 생성해서 복사해 줘야 된다.

 

이것을 깊은 복사라고 하는데, 문자열 형태로 풀었다가 JSON형태로 묶어주면 새로운 객체가 복사되어 주소값을 생성하게 된다.

 

JSON안에는 parse라는 API가 존재하는데, 우선 JSON파일의 형태로 풀었다가, 다시 JSON파일로 합쳐줘야 한다.

const obj1 = {
    somekey1: 10,
    somekey2: '안녕',
};

const obj2 = obj1;
const obj3 = JSON.parse(JSON.stringify(obj1));
obj1.somekey1 += 1;

console.log('obj1', obj1); //{somekey1: 11, somekey2: '안녕'}
console.log('obj2', obj2); //{somekey1: 11, somekey2: '안녕'}
console.log('obj3', obj3); //{somekey1: 10, somekey2: '안녕'}

이렇게 깊은 복사로 객체를 복사해 오면 주소값 자체가 원본과 다르기 때문에, 원복의 값을 해치지 않게 되는 것이다.

 

이렇게 원본을 지켜줄 수 있는 방법이 React 에는 여러 가지가 존재하는데 예를 들어 map, filter, spread operator 등이 있다.

02. Template Literals

백틱을 사용하여 문자열 안에 자바스크립트의 변수를 사용할 수 있다. 이것을 템플릿 리터럴이라고 한다.

    let name = '서근';
    console.log(`안녕하세요 제 이름은 ${name} 입니다.`)

또한 멀티라인을 쓸 때 의미가 있다.

    let someVale = `
    안녕하세요
    제 이름은 
    ${name}
    입니다.
    `

03. 배열/객체 비구조화 (Array/Object Destructuring)

구조 분해 할당이라고 한다.

1) 객체

객체에서 구조 분해 할당을 하려면 key값이 같아야 한다.

//구조 분해 할당
//De(반대) + structur(구조) + ing - 배열의 구조를 뜯어버린다.

const person = {
    name: '서근',
    age: 28,
};
/*
const name = person.name;
const age = person.age
*/ 이 코드를 아래와 같이 간단하게 구조 분해 할당해 줄 수 있다.

const {name, age} = person; //person을 name과 age변수로 각각 뜯어낸다.

console.log('name', name); // name 서근
console.log('age', age); // age 28

2) 배열

배열에서 구조 분해 할당을 하려면 위치가 같아야 한다.

const arr = [1, 2, 3, 4, 5];
const [하나, 둘, 셋] = arr; //하나, 둘, 셋이 arr의 1, 2, 3과 맵핑 되게 된다.

console.log('하나', 하나); //하나 1
console.log('둘', 둘); //둘 2
console.log('셋', 셋); //셋 3

04. 전개 연산자 Spread Operator

스프레드(...)를 이용해 다음과 같이 활용 가능하다.

case1 - 나머지 연산자

name은 '서근'과 맵핑이 도지만 ...info는 나머지 전체를 의미한다.

let [name, ...info] = ['서근', 28, '대전'];

case2

배열의 구조를 깨고 나온다.

let names = ['미진', '희진', '종수'];
let students = ['서근', ...names, ...names];

console.log(students); //['서근', '미진', '희진', '종수', '미진', '희진', '종수']

let arr = ['사과', '오렌지', '딸기', '수박', '메론'];
let [사과, 오렌지, ...rest] = arr;
console.log(rest); //['딸기', '수박', '메론']

case3

let seogun = {
    name: '서근',
    age: 28,
    region: '대전',
    email: 'seogun1302@gmail.com',
    puppy: '초코',
};

const { name, age, ...rest} = seogun;
console.log(rest) //{region: '대전', email: 'seogun1302@gmail.com', puppy: '초코'}

05. 화살표 함수 Arrow Functions

ES6에서 새로 추가된 함수 선언 방식. 함수 표현식에서 사용 가능

const mysum1 = (x, y) => x + y;
const mysum2 = (x, y) => {x, y};
const mysum3 = (x, y) => ({x: x, y: y});
const mysum4 = (x, y) => { return {x: x, y: y}};
const mysum5 = function(x, y) { return {x: x, y: y}};
function mysum6(x, y) { return {x: x, y: y}};

console.log(mysum1(1, 2));
console.log(mysum2(1, 2));
console.log(mysum3(1, 2));
console.log(mysum4(1, 2));
console.log(mysum5(1, 2));
console.log(mysum6(1, 2));

화살표 함수 주의 사항

this를 객체에서 찍으면이 this는 자기 자신을 가리킨다.

하지만, 화살표 함수에서 표현이 되었다면 This는 자기 자신이 아니게 된다. 여기선 undefined가 찍히게 된다.

• 화살표 함수 This !== 자기 자신
• 화살표 함수 This === Window global

06. 배열 메서드

1. map()

배열 안의 요소들을 처리하여 새 배열을 만들 때 사용 (재배열)
요소 하나하나 로직을 돌려 재배열

const arr = [1, 3, 5, 7, 9];
const mapArr = arr.map((x) => x + 1)

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

index 접근도 가능하다.

const arr = [1, 2, 3, 4, 7];
const isOddArr = arr.map((x) => x % 2 == 1) //홀수 판별 boolean

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

• [[15-1. 반복되는 컴포넌트 처리 1#React에서 Map 사용|React에서 map 사용법]]

2. Filter()

콜백의 조건에 충족하는 값만 뽑아온다. (일치하는 애들만 뽑음)

const arr = [1, 2, 3, 4, 5, 6];
const oddArr = arr.filter((x) => x % 2 === 1) 

console.log(oddArr) //[1, 3, 5]

const arr = ['김서근', '이미진', '김희진', '박준홍'];
const kimArr = arr.filter((x) => x[0] === '김')

console.log(kimArr) //['김서근', '김희진']

• [[15-1. 반복되는 컴포넌트 처리 1#React에서 Filter 사용|React에서 filter 사용법]]

3. reduce()

배열의 값을 줄여서 하나의 값으로 만든다.

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((acc, cur) => acc + cur, 100) //100은 기본 값이 된다. 생략 가능. 여기선 100부터 배열을 모두 더해준다.

console.log(sum) // 115

• acc - 콜백에서 넣을 결과를 누적시킨 값
• cur - 현재 값
• curIndex - 현재 인덱스
• arr - 원본 배열

// 초기 값이 없을때 
[1,2,3,4,5].reduce((acc, cur, curIndex, arr) => { 
// acc는 초기값이 없으므로 [1,2,3,4,5]에서 첫번째 인덱스의 값인 1이 됩니다. 
// cur는 acc가 초기 값을 사용했으므로 [1,2,3,4,5]에서 그 다음 인덱스의 값인 2가 됩니다. 
// curIndex는 cur값이 2이므로 2의 인덱스인 1이 됩니다. 
// arr는 원본 배열인 [1,2,3,4,5]가 됩니다. 
}); 

// 초기 값이 있을때 
[1,2,3,4,5].reduce((acc, cur, curIndex, arr) => { 
// acc는 초기값이 있으므로 0이 됩니다. 
// cur는 [1,2,3,4,5]에서 1이 됩니다. 
// curIndex는 cur값이 1이므로 1의 인덱스인 0이 됩니다. 
// arr는 원본 배열인 [1,2,3,4,5]가 됩니다. 
}, [0]);

기본 템플릿

const rank = [7, 10, 7, 8, 8];
const total = rank.reduce((a, b) => a + b) // 배열의 총 합
const cnt = rank.length

// 토탈 / 개수

console.log(total) //40
console.log(cnt) //5
console.log(total / cnt) //8

4. forEach()

배열의 각 요소에 대해 함수를 실행한다.

const arr = ['서근', '희진', '미진'];
arr.forEach((x, i) => console.log(x.repeat(i + 1)))

/*
서근
희진희진
미진미진미진
*/

07. for of, for in 반복문

1) for of

객체에서 for of는 처음부터 끝까지 다 돈다는 단점이 존재한다.

const arr = ['서근', '미진', '희진', '준홍'];
for (let x of arr) {
    console.log(x) //x 라는 변수로 arr 배열의 앨리먼트의 값들을 받아온다.
}

//서근
//미진
//희진
//준홍

2) for in

객체에서

const obj = {
    flower: '무궁화',
    flag: '태극기'
};

for (let i in obj) {
    console.log(i) // i라는 변수로 arr 배열 앨러먼트의 key 값을 가져옴
}
// 객체에서 for in에서는 key 값을 출력한다.
// flower
// flag

배열 (비권장)

const arr = ['서근', '희진', '미진'];
for (let i in arr) {
    console.log(i)
}

// 배열에서 for in은 배열을 출력 한다. (비원장)
//0
//1
//2

배열에서는 for in 사용 지양!

• 순서 보장 안되어 있기 때문! - 배열은 index 순서가 굉장히 중요한데, 이를 무시함.
• 끝까지 순회하기 때문!
• complexity(복잡도)의 낭비가 있을 수 있기 때문!

---

React관련 파일 Github로 보기

GitHub - Seogun95/React_Note: 👨🏼‍💻 리액트 자료 정리 with 옵시디언