[개념정리 11탄]React 시작 전(ES6 문법)

React를 시작하기 전에 ES6 문법에 대해 알아야 하는데 6가지 목차 정도는 알고 React를 시작해야 해서 정리하려 한다.

 

• 화살표 함수
• 객체와 배열 구조 분해 할당
• 함수 인자에서 구조분해 할당
• Spread Operator(전개 구문)
• Rest Operator(나머지 매개변수 구문)
• map, filter 함수

화살표 함수

자바스크립트에서 기본적으로 함수를 만드는 방법은 2가지 있다.

Function 키워드를 사용하는 방법, Arrow function을 사용하는 방법

 

React에서는 2가지 방법에 큰 차이는 없다. 코딩하는데 본인이 편한 방법을 사용하면 된다.

 

기본적인 방법으로 function 키워드를 사용해 함수를 정의해보면

// Function keyword (함수 선언식)
function sayHello () {
return "hello wordl!"
}

// Function keyword (함수 표현식)
const sayHellow = function() {
return "hello world!"
}

함수 선언식은 호이스팅에 영향을 받고, 함수 표현식은 호이스팅에 영향을 받지 않는다.

 

화살표 함수

함수 표현식보다 단순하고 간결하며 익명함수와 암시적 반환을 가능하게 해주기 때문에 굉장히 많이 사용하게 될 함수다.

 

Arrow function 방법 1

const sayHello = () => {
//<----함수 로직----->
	return "hello world!"
}

Arrow function 방법 2(암시적 반환)

// return을 생략하는 방식
const sayHello = () => "hello world!"

Arrow function 방식 - 익명함수

이름을 가진 함수는 해당 변수명을 호출해 몇 번이든 재사용할 수 있다는 장점이 있지만, 간단한 함수를 일회성으로 사용할 때 화살표 함수에 익명 함수를 사용할 수 있다.

// 예시1 - 기본적인 함수 표현 방법
const sayHelloOnClick = () => {
	console.log('hello friend')
}
<App onClick={sayHelloOnClick} />

// 예시1 - 익명함수
<App onClick={() => console.log('hello friend')} />

// 예시2 - 기본적인 함수 표현 방법
const ReturnItem = (item) => {
	return <div>{item}</div>
}
{array.map(ReturnItem)}

// 예시2 - 익명함수
{array.map((item)=> <div>{item}</div>))}

구조 분해 할당

객체나 배열을 구조 분해하여 나타낼 수 있다.

// 객체
// 구조분해 할당을 사용하지 않을 때
const user = {name: "홍길동", age: 30};
console.log(user.name) // 홍길동
console.log(user.age) // 30

// 구조분해 할당을 사용했을 때
const { name, age } = user
console.log(name) // 홍길동
console.log(age) // 30

// 배열
// 구조분해 할당을 사용하지 않을 때
const games = ['배틀그라운드', '리그오브레전드'];
console.log(game[0]) // 배틀그라운드
console.log(game[1]) // 리그오브레전드

// 구조분해 할당을 사용했을 때
const [battleGround, LoL] = games;
console.log(battleGround); // 배틀그라운드
console.log(LOL); // 리그오브레전드

// 함수
// 함수의 인자가 배열/객체일 경우 위와 동일한 방법으로 구조분해할당이 가능하다.

// 구조분해 할당을 사용하지 않을 때
// user가 객체일 때
const getUserName = (user) => {
return user.name
}

// user가 배열일 때
const getUserName = (user) => {
return user[0]
}

// 구조분해 할당을 사용했을 때
// 객체일 때
const getUserName = ({name, age}) => {
	return name;
};

// 배열일 때
const getUserName = ([name,age]) => {
	return name
};

전개 구문(Spread Operator)

기존에 있는 객체나 배열의 내용을 그대로 가져오거나 새로운 값을 덧붙여서 새로운 객체나 배열을 생성할 수 있고 기존의 데이터에는 전혀 영향을 주지 않고 복사해서 새로운 것을 만든다.(불변성과 연관 있다.)

const box = {size : "big", color: "red"}
const newBox = {...box}; // {size : "big", color : "red"}
const newBlueBox = {...box, color: "blue"} // {size : "big", color : "blue"}

나머지 매개변수 구문(Rest Operator)

Rest문법은 Spread와 비슷해 보이지만 조금 다른 기능을 하는데 객체나 배열에서 구조 분해 할당을 했을 때, 나머지 정보를 묶어서 표현할 수 있다.

const user = {id: 1, name: "둘리", age: 10, location: "seoul"};

// rest 사용
const {name, ...rest} = user;

// console에 rest를 찍어보면, 구조분해 할당을 한 정보를 제외한 나머지 값을 보여준다.
console.log(rest) // {id: 1, age: 10, location: "seoul"}

 

React에 자주 쓰는 함수

 

map() 함수와 filter() 함수

 

map() 함수 = 배열 내 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

const array1 = [1, 4, 9, 16]
const map1 = array1.map(x => x * 2);
console.log(map1) // [2, 8, 18, 32]

filter() 함수 = 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

const fruits = ['사과','귤','배','감','바나나','키위']
const result = fruits.filter(fruit => fruit.length > 2)
console.log(result) // ['바나나']