[React] 리액트란 / 차세대 자바스크립트

2023/06/12

Udemy 리액트란 / 차세대 자바스크립트

리액트란?

리액트란?

자바스크립트 라이브러리
사용자 인터페이스를 만드는데 이용된다.
화면전환이 원활하다.
전통적인 웹 사이트 : 링크나 버튼 클릭시 서버로 요청이 전송되고, 새로운 HTML페이지가 브라우저로 보내져 화면에 보여진다.
자바스크립트는 새로운 html 페이지 요청 없이 동작을 가능케한다.
리액트는 클라이언트 사이드의 자바스크립트 라이브러리이다.
리액트는 새로운 HTML페이지 로드 없이 화면에 보이는 것들을 변경하기 위해 자바스크립트를 사용한다.
싱글 페이지 어플리케이션

자바스크립트가 아니라 리액트를 사용하는 이유

복잡한 사용자 인터페이스를 쉽게 구축할 수 있도록 해준다.
선언형 방식, 선언현 컴포넌트를 이용하여 수행한다.

리액트 대안

앵귤러: 컴포넌트 기반 UI 프레임워크, 다양한 내장 기능, 내장된 타입스크립트, 대규모 커뮤니티 개발
Vue.js: 컴포넌트 기반 UI 프레임워크, 리액트와 앵귤러 사이의 언어, 라우팅 기능 내장

차세대 자바스크립트

let & const

var 자바스크립트 변수 선언
let 값이 수정 가능한 변수 선언
const 변경 불가능한 변수 선

화살표 함수 Arrow Functions

this 키워드로 발생하는 문제 해결
인수가 하나라면 () 삭제 가능
중괄호를 생략하면 return 생략 가능

Exports & Imports (Modules)

export default person default 키워드는 파일에서 어떤 것을 가져오면, 항상 기본값으로 가져온다는 의미이다.

즉, 다른 이름으로 import를 해도 파일을 import하면 그 파일안에 있는 export default를 데리고 온다.

단순히 export한 것은 중괄호로 데리고 오는데, 정확한 이름으로 불러와야한다.

+) 특수문자 *를 통해 모든 것을 import할 수 있다. ex. import * as bundled from './utility.js'

Classes

class는 property와 Method를 갖는다.

Method : 클래스 정의 함수
Property : 클래스에 정의한 변수

부모 자식 class

차세대 자바스크립트에서는 프로퍼티를 위해 생성자 함수를 사용하지 않아도 된다.
화살표함수를 사용할 수 있다.
this 키워드를 사용하지 않아도 된다.

… 연산자 | spread | rest

rest : 인수로 무제한을 받을 수 있다.
spread : 배열이나 객체의 내용을 받아올 수 있다. 쉽게 배열이나 객체를 복사한다.

=>

구조분해할당 destructuring

이름을 정해주는 것

참조형/기본형 자료 타입

const number = 1 기본형

const num2 = number number의 값을 복사 - 참조형

재할당하거나 다른 변수의 값을 복사하는 것이 참조형 자료형 하지만, 이것은 복사가 아니고, 단지 포인터를 복사하고 메모리의 동일한 객체를 가리키게 하는 것이다.

=> 예상치 못한 결과를 초래하게 할 수 있다. 값을 copy하고 원본의 값을 변경시키면, copy한 변수도 변경된 값을 가지기 때문이다. (포인터가 같은 메모리를 가리키고 있기 때문에!) 재할당은, 포인터의 복사이다.

복사하는 방법! => 스프레드 연산자의 사용.