리액트로 한걸음 더 나아가기 위한 JS 문법 4가지

SW 배움터/리액트

리액트로 한걸음 더 나아가기 위한 JS 문법 4가지

kusson 2022. 9. 12. 09:20

728x170

이번 시간에는 JS에서 리액트로 더 나아가기 위한 JS 문법을 몇가지 알아보기로 하자. 리액트에서 많이 쓰이는 4가지 문법을 위주로 설명한다.

1.object shorthand assignment

우리말로 하면 '단축 할당'정도로 번역되는 말인데 반복되는 변수에 대해서 하나를 생략해서 간단히 표기하는 방법이다. 자바에서나 파이썬에서는 this를 사용하는데 JS에서는 아예 반복되는 변수 하나를 생략해 버린다. name 변수와 age 변수에 값을 입력하고 그 값들을 객체로 만든 후 변수를 하나씩 출력해 보는 코드를 작성해 보자. person 객체를 생성하고 name과 age에 변수를 대입한다. 이때 자신의 객체 name과 age에 위에서 선언된 이름과 나이를 대입하는 것인데 자바나 파이썬에서는 자신의 객체라는 것을 표기하기 위해 this를 쓴다. 즉 자바나 파이썬이라면 this.name, this.age로 표기한다는 말이다. 그러나 여기서는 JS를 설명하므로 JS의 문법을 따르자. person객체에 name과 age가 제대로 들어왔는지 console.log로 화면에 나타내 보자. {name:"Hongildong", age:20"} 이 제대로 들어와 있다.

위의 name: name, age:age처럼 반복되는 변수들이 있으면 JS에서는 한 변수를 생략해 버린다. 출력을 해 보아도 결과는 똑같다. 이러한 방식을 JS에서는 'object shorthand assignment'라고 한다.

2.Destructuring

이번에는 구조를 해체해서 각각의 변수들을 다시 정의 하는 방법이다. person 객체들의 변수를 아래 그림의 7,8행 처럼 다시 정의해 주자. 그리고 다시 console.log(naem, age)로 화면에 출력해 보자. 이번에는 Hongildong 20이라고 출력되었다. 1번의 출력과는 좀 차이가 있다.

이번에도 "let name = person.name, let age = person['age']"를 "let {name, age} = person"으로 축약해서 표기했다. 찍어봐도 결과는 똑 같다.

객체 안에서name과 age중 하나만 뽑아 내고 싶다면 하나만 인수로 넣어서 출력하면 된다.

age도 마찬가지다.

배열에 대해서도 똑같이 적용해 볼 수 있다. array에 4개의 변수를 입력하고 앞의 2개의 변수만 출력해 보고 싶다면 다음 그림과 같이 나타낸다.

뒷 부분을 출력하고 싶으며 rest를 이용한다.

Destrucring방식도 많이 쓰이는 방식이므로 잘 알아두자.

3.spread

이번에는 spread 방식에 대해서 알아보자. spread는 객체를 복사해서 퍼트리는 방법을 말한다. person 객체를 만들고 이 객체를 복사해 보자. let person2 = {...person}이라고 입력하면 person2에 person 객체가 복사되어 입력된다. 여기서 '...'를 주목해야 하는데 '...'는 객체를 복사해서 하나의 다른 객체를 만들라는 의미이다. 즉 person과 person2는 완전히 다른 객체가 되는 것이다. 출력되는 내용은 같은 것으로 나타나지만 다른 객체라는 말이다.

또 다른 복사방식 하나를 소개한다. 바로 'let person3 = person' 이라는 방식이다. 이 방식은 person 이라는 객체를 그대로 복사해서 똑같은 내용을 person3에 입력하라는 말이다. person2와 person3를 찍어보면 똑 같은 내용으로 출력된다.