리액트 필수 자바스크립트 문법 정리

김찬우·2024년 7월 30일

개발일기

목록 보기
2/2
요즘 여러 대회를 동시에 참가하면서 프로젝트를 웹으로 구현할 일이 생겨 최근에는 웹에 대해서 공부하는 시간을 가지고 있다.

유튜브로 리액트를 공부하다가 필수라고 생각되는 JS 문법을 보고!
공유하고 싶어 포스팅하려고 한다.

'코딩알려주는누나'라는 유튜브를 보고 참고했으며
항상 지식을 공유하려 노력해주시는 분들께 감사를 표하고 싶다.

 

1. Object Shorthand Assignment

키와 키값에 들어가는 변수의 이름이 같을 때 축약하여 쓸 수 있다.

 

2. Destructuring

사전에서 값을 추출해 각각을 변수에 개별적으로 담고 싶을 때 위와 같이 사용할 수 있다.

 

배열도 다음과 같이 사용 가능하다.

 

3. Spread

...을 통해 주소값을 통한 참조가 아닌 아예 다른 객체를 생성 및 복사할 수 있다.
person3은 객체의 주소값만 복사할 수 있다.
즉, person 객체를 참조하는 변수가 두 개가 되는 것이다.(person, person3)
하지만 person2는 값은 같지만 아예 다른 객체를 생성한다.
심지어 name: "noona" 처럼 복사해오는 객체의 일부를 변경할 수도 있다.

 

4. Ternary Operator

person이라는 사전 안에 내용이 있으면 name을 출력하고
내용이 없으면 특정 문자열을 출력해야하는 상황을 가정해보자.

삼항연산자를 알기 전에 생각할 수 있는 코드다.
if-else문을 통해 각각의 상황을 기록해줘야 하는 수고로움이 생긴다.

 

삼항연산자를 사용한 코드다. 위 if-else문을 사용한 코드와 논리 구조는 똑같지만 삼항연산자를 통해 단 한 줄로 표현해낼 수 있었다.

0개의 댓글