리엑트 주특기 1일차

경원님 블로그 보고 정리 잘 해주셔서 그걸로 공부하고, 

모르는 부분을 여기에 남겨보기로 함. 

https://rosie0418.tistory.com/114

리액트 입문주차 1주차 - 1

중요한 부분 모음

 

단축속성

const name = "wonjang";
const age = 21;

const testObj = {
  name,
  // age: age, 키와 value가 같은 모양이 있으면 ES6에서 이를 생략할수 있게해줌
  age,
  company: "Team Sparta",
  doSomething: () => {},
};

 

얕은복사 주의. 

const obj3 = JSON.parse(JSON.stringify(obj1)); 사용

const obj1 = {
  value1: 10,
};

const obj2 = obj1; // 1번째 방법
// obj2.value1 += 1;
const obj3 = JSON.parse(JSON.stringify(obj1)); // 새로운 객체, 새로운 메모리를 만들어냄

obj1.value1 += 1;

// 만약에 복사한 obj2를 바꾸면 어떻게 될까?
// 예상: obj2가 바뀌면 됨
// 실제: obj1도 함께 바뀌어버림

console.log("obj1", obj1);
console.log("obj2", obj2); // obj2 { value1: 11 }
console.log("obj3", obj3); // obj3 { value1: 10 }

 

전개연산자

밑에 일부 속성만 변경에도 사용 가능함에 유의

const tom = {
    name: "Tom",
    age: 10,
    region: "Seoul",
};

const steve = {
    ...tom,
    name: "Steve",
};
console.log(`tom ${tom}`);
console.log(`steve ${JSON.stringify(steve)}`);

 

 

yarn을 사용하자.

설치 npm install -g yarn

yarn create react-app 이름

yarn start

yarn add 패키지이름