[JS] React에서 자주 사용되는 JS 문법 몇가지

오늘은 React에서 자주 사용되는 JS 최신 문법(es6) 몇가지에 대해 알아보자.

 

1. Object Shorthand Assignment

예를 들어 name, age라는 2개의 변수와 person이라는 객체가 있다고 가정하자.

그 객체 안의 key와 value의 값은 아래와 같다.

let name = "Lee"
let age = "20"

let person = {
  name: name,
  age: age
}

console.log(person);

콘솔창에 찍어보면 name에 변수 name이

age에는 변수 age가 잘 들어간 것을 볼 수 있다.

 

위의 경우처럼 key의 이름과 value의 이름이 서로 같다면

아래처럼 위의 코드보다 간결하게 코드를 작성할 수 있다.

let name = "Lee"
let age = "20"

let person = {
  name,
  age
}

console.log(person);

다시 말해, key와 value가 같다면 그냥 하나로 줄여서 사용할 수 있다.

 

물론, 아래 코드처럼 변수명과 객체의 키 이름이 다르면 줄여서 쓸 수 없다.

let name2 = "Lee"
let age = "20"

let person = {
  name,
  age
}

console.log(person);

(name에 값이 안들어 간 것을 볼 수 있다.)

---

2. Destructuring

name:"Lee", age:"20"이라는 값을 가지는 객체가 있다고 했을 때

name 혹은 age를 따로 뽑아서 변수에 저장하고 싶을 때가 있을 수 있다.

옛날 문법같은 경우 아래 코드처럼 작성을 해야했다.

let person = {
  name: "Lee",
  age: 20
}

let name = person.name
let age = person["age"]

console.log(name, age); //Lee 20

하지만 최신 기술을 통해 조금 더 간결하게 작성할 수 있다.

let person = {
  name: "Lee",
  age: 20
}

// let name = person.name
// let age = person["age"]

let {name, age} = person;

console.log(name, age); // Lee 20

두 줄짜리 코드가 let {name, age} = person;로 짧아진 것을 볼 수 있다.

person이라는 객체에서 name이라는 키값과 age라는 키값을 가지고 와서 let으로 선언해 주는 것이다.

 

만약, name의 값만 가지고 오고 싶다면 아래 코드처럼 age를 빼버리면 된다.

let person = {
  name: "Lee",
  age: 20
}

// let name = person.name
// let age = person["age"]

let { name } = person;

console.log(name); // Lee

---

이 문법은 객체뿐만 아니라 배열에서도 적용이 가능하다.

예시를 통해 알아보자.

let array = [1,2,3,4]
let= [a, b] = array

console.log(a,b) // 1, 2

배열이라고 딱히 바뀌는건 없다. 

만약, array라는 배열에서 첫번째와 두번째 인덱스를 가져오고 싶다면

위의 코드같이 선언해주면 된다.

---

그렇다면 1,2를 제외한 나머지 값들은 어떻게 가져올까?

바로 'rest 파라미터 문법'을 사용하면 된다.

...rest를 통해 a,b를 제외한 나머지 값들을 가져올 수 있다.

(많이 사용되지는 않으나 알아는 놓자!)

let array = [1,2,3,4]
let= [a, b, ...rest] = array

console.log(rest) // [3, 4]

 

※ 이 Destructuring 문법은 state에서 사용되니 필수로 알아놓자!

---

3. spread

spread는 위의 ...rest와 생김새가 비슷하다.

 

person이라는 객체가 있다고 가정해보자.

그 객체를 복사하고 싶을 때 spread를 사용할 수 있다.

let 변수명 = {...복사할 객체명}의 구조를 가지고 있다.

let person = {
  name: "Lee",
  age: 20
}

let person2 = { ...person }

console.log(person2);

---

여기서 잠시 아래코드를 살펴보자

let person = {
  name: "Lee",
  age: 20
}

let person2 = { ...person }
let person3 = person

console.log(person2);
console.log(person3);

...를 사용한거나 person 객체를 바로 준거랑 결과값이 차이가 없다.

그렇다면 굳이 ...를 붙여서 할 필요없이

person 객체 자체를 주면 되지 않을까?라는 의문이 생길 수 있다.

 

하지만 두 방법은 복사하는 매커니즘이 다르다.

 

1. 바로 객체를 할당하는 것은 객체의 주소값만을 복사하는 것이다.

(즉, 객체는 하나이고 그 객체를 참조하는 변수가 두개가 된다는 것이다.)

 

2. ...은 객체를 하나 더 생성하는 것이다.

(그렇기 때문에 두 객체는 완전히 다른 것이 된다.)

---

...을 사용하는데 내용을 더 추가하고 싶을 때는

그냥 뒤에 내용을 더 추가하면 된다.

let person = {
  name: "Lee",
  age: 20
}

let person2 = { ...person, address:"busan" }


console.log(person2);

---

복사한 객체 안의 내용을 바꿀 때는 아래와 같이 수정할 수 있다.

let person = {
  name: "Lee",
  age: 20
}

let person2 = { ...person, name:"Park" }


console.log(person2);

이 문법 또한 배열도 가능하니 참고하자.

---

4. 삼항연산자

마지막은 es6문법은 아니지만 React에서 많이 사용되기때문에 추가했다.

삼항연산자는 조건문을 간단하게 한줄로 나타낼 수 있기 때문에 많이 사용된다.

삼항연산자의 구조는 '조건?true일경우 실행:false일 경우 실행' 이다.

let person = {
  name: "Lee",
  age: 20
}

// if(person){
//   console.log(person.name)
// }else{
//   console.log("there is no person")
// }

console.log(person?person.name:"there is no person")

 위의 코드를 보면 if문을 대체해서 한줄로 작성할 수 있는 것을 보여준다.