리액트 정리

Template Strings

console.log(lastName + ", " + firstName + " " + middleName)

console.log(`${lastName}, ${firstName} ${middleName}`)

ES6 Objects and Arrays
- Destructuring Assignment

// sandwich 객체
var sandwich = {
 bread: "dutch crunch",
 meat: "tuna",
 cheese: "swiss",
 toppings: ["lettuce", "tomato", "mustard"]
}

// 구조 분해
var {bread, meat} = sandwich
console.log(bread, meat) // dutch crunch tuna

// 구조 분해해도 원본은 변경 안됨
var {bread, meat} = sandwich
bread = "garlic"
meat = "turkey"
console.log(bread) // garlic
console.log(meat) // turkey
console.log(sandwich.bread, sandwich.meat) // dutch crunch tuna

// regularPerson 객체
var regularPerson = {
 firstname: "Bill",
 lastname: "Wilson"
}

//
var lordify = regularPerson => {
 console.log(`${regularPerson.firstname} of Canterbury`)
}
lordify(regularPerson) // Bill of Canterbury

// 함수 인자에 구조분해 사용
var lordify = ({firstname}) => {
 console.log(`${firstname} of Canterbury`)
}
lordify(regularPerson) // Bill of Canterbury




배열 구조분해할당

const array = [1,2,3,4,5]
const [first, second, ...arrayRest] = array

// first 1
// second 2
// arrayRest [3,4,5]



const [first, , , , fifth] = array

// first 1
// fifth 5


* 기본값 선언
* 배열의 길이가 짧거나 값이 없는 경우(undefined) 기본값 사용함
const array = [1, 2]
const [a=10, b=20, c=30] = array
// a 1  // 배열에 값이 있으므로 해당값 보여줌
// b 2  // 배열에 값이 있으므로 해당값 보여줌
// c 30 // 기본값 사용

* 스프레드 연산자
const array = [1, 2, 3, 4, 5]
const [first, ...rest] = array

// first 1
// rest [2, 3, 4, 5]


객체 구조분해할당
const object = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
  e: 5,
}

const {a, b, c, ...objectRest} = object

// a 1
// b 2
// c 3
// objectRest {d: 4, e: 5}

// 새로운 이름으로 할당
const {a:first, b:second} = object

// first 1
// second 2

// 기본값 설정
const {a=10, b=20, z=30} = object
// a 1
// b 2
// z 30

// 속성명을 변수값으로 설정해서 값을 가져오기
const key = 'a'
const object = {
  a: 1, 
  b: 2
}

const { {key}: a } = object
// a 1

---

# 책 소스

Do It! 리액트 모던 웹 개발 with 타입스크립트

 

프로젝트 생성 (타입스크립트용 리액트 프로젝트)

npm -g uninstall create-react-app : 설치된 create-react-app 삭제

npx create-react-app 프로젝트명 --template typescript

---

# 책 소스

https://github.com/velopert/learning-react

GitHub - velopert/learning-react: [길벗] 리액트를 다루는 기술 서적에서 사용되는 코드

 

# 프로젝트 생성

npm init react-app hello-react
cd hello-react
npm start

http://localhost:3000

# 주석
{/* 주석 */}