React 자주 쓰일 자바스크립트 문법

1. 변수의 이름과 객체의 키의 이름이 같으면 객체의 값을 이렇게 불러올 수 있다.

let name = 'minseok';
let age = 20;

let obj = {
	name,
	age,
}

console.log(obj) // {name: 'minseok', age: 20}

2. 구조분해할당

객체

person.name의 값과 person.age의 값을 가져온다

let person = {
	name: 'minseok',
	age: 20
}

let {name, age} = person;

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

배열

1. 배열의 첫번째 값과 두번째 값을 가져오고 싶을 때 이렇게 쓰면 순서대로 가져온다.

let array = [1, 2, 3, 4];

let [a, b] = array;

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

2. 그럼 3과 4라는 나머지 값을 가져오고 싶을 때는 어떻게?

let array = [1, 2, 3, 4];

let [a, b, ...rest] = array;

console.log(rest); // 3, 4

3. spread operatror

참조 값이 다른 객체나 배열을 복사한다.

let numberA = [1, 2, 3];
let numberB = [...numberA];

let number = numberA === numberB;
console.log(number); // false

객체는 같은 값을 참조하고 있다는 예시문

let numberA = [1, 2, 3];
let numberB = numberA

let number = numberA === numberB;
console.log(number); // true

4. 삼항연산자

바닐자 자바스크립트에서는 조건문을 if문으로 작성했었는데, 리액트에서는 이렇게 표현함!

1. 바닐라 자바스크립트

let babi = 17;

if (babi === 17) {
	console.log("babi는 17살임");
} else if (babi === 17) {
	console.log("bibi는 17살이 아님")
}

2. 리액트

let babi = 17;

const text = () => {
	return babi === 17 ? "babi는 17살임" : "babi는 17살이 아님" 
};