서론

리엑트 공부 다시 시작하기

배울 기술들

Redux : 상태 관리 라이브러리
컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시킬 수 있다.

Next.js : React의 서버 사이드 렌더링 프레임 워크

TypeScript : 코드에 목적을 명시하여 변수 / 함수에서 타입에 관한 버그를 사전에 제거.
코드 자동완성, 실행 전 피드백을 제공해 작업의 효율향상과 디버깅을 제공.

카테고리

1. 리엑트에 관한 기본적인 것들
   리엑트에서 제공하는 핵심기능을 다룬다
   컴포넌트의 구축과 결합
   그리고 컴포넌트의 접근과 사용자 인터페이스 구축
   이벤트 제어, props & state 제어
   컴포넌트의 스타일링
   그리고 리엑트의 여러가지 Hook 들

2. 리엑트의 고급기능. 심화기능
   실제 앱에 꼭 필요한 개념.
   Side Effects
   Refs & 다른 리엑트 Hook
   context API 와 Redux 를 사용한 상태관리
   사용자의 요청 및 HTTP 요청 처리
   Routing 을 구현하고 다루는 방법, 배포. 그리고 Nest.JS

---

1. 자바스크립트 Refresh

let vs const

let : 값을 수정할 수 있는 변수
const : 값을 수정할 수 없는 상수(새로운 값을 할당할 수 없음

Arrow Function

function myFunc(){
}

==

const myFunc = () => {
}

arrow function 의 this는 항상 정의한 객체를 나타낸다.
파라미터가 오직 한 개만 있다면 소괄호를 생략할 수 있으며,
return 로직이 한줄이라면 대괄호까지 생략할 수 있다.

Exports & Imports (Modules)

코드를 여러 파일로 나누고, 다른 파일에서 코드를 불러올 수 있는 방법.

// default export
import person from './perseon.js'
import prs from './perseon.js'

// export default 로 내보낸 객체는 자유롭게 작명하여 쓸 수 있다.

// named export
import { smth } from './utility.js'
import { smth as Smth } from './utility.js'
// as 키워드로 name export 한 객체를 작명할 수 있다.
import { * as bundled from './utility.js'}
// * as 키워드로 해당 모듈의 모든 객체를 불러와서 객체에서 키를 사용하듯 사용할 수 있다.
// 예를들어, bundled.name, bundled.age 처럼 객체를 사용할 수 있다.

Class

객체를 정의하고 만드는 자바스크립트의 객체 청사진.
보통 Class 로 정의된 명의 첫글자는 대문자로 쓰는게 원칙.

class Person {
	constructor() {
	name = 'soo'
	} // property
	call = (name) => {
		console.log(name)
	} // Method
}

const myPerson = new Person()

exteds 키워드로 상속기능도 구현할 수 있다.
그럴 때 super() 라는 키워드를 이용해 상속할 클래스의 property 들을
피상속 클래스에 상속시킬 수 있다.

class Person {
  constructor(name){
    this.name = name
  }
  myName(){
    console.log(this.name)
  }
}

class Woman extends Person {
  constructor(name){
    super(name)
    this.name = name
    this.gender = 'woman'
  }
  myGender() {
    console.log(this.gender)
  }
}
const soo = new Woman('soo')

soo.myName();  // Person class 의 myName 함수 상속
soo.myGender();  // Person class 를 상속받은 Woman class 의 함수

// soo
// woman

Spread & Rest Operator

Spread Operator : 배열이나 객체를 펼쳐서 전개하는 키워드

const numbers = [1,2,3]
const numbers1 = [numbers,4]
const numbers2 = [...numbers,4]

console.log(numbers1) // [[1,2,3],4]
console.log(numbers2) // [1,2,3,4]

const person = {
	name : 'Max'
}

const howOld = {
	...person,
	age : 28;
}

//{name:"Max", age:28}

배열이나 1 depth 객체의 깊은복사도 쉽게 수행할 수 있다.

Rest Operator : 함수의 파라미터들을 배열로 병합하는 키워드

const filter = (...args) => {
  return args.reduce((acc,cur)=>{return acc+=cur},0)
}

console.log(filter(1,2,3,4,5,6,7,8,9,10))
// 55

내부의 args 는 배열이므로 Array 객체의 내장함수도 사용할 수 있다는점이 장점.

Destructuring

배열의 원소나 객체의 프로퍼티를 추철해서 변수에 저장할 수 있도록 해주는 기능

const numbers = [1,2,3,4,5];
let[num1,num2] = numbers;
console.log(num1)
console.log(num2)

console.log(num1, num2) // 1,2

배열 디스트럭처링은 배열에서 필요한 요소만 추출하여 변수에 할당하고 싶은 경우에 유용하다.