리액트, 웹에 관한 간단한 개념 소개 및 자바스크립트 문법 정리
Section 1
React.js
- 클라이언트 사이드의 JavaScript 라이브러리
과거에는 사용자가 링크나 버튼을 클릭하면, 서버와 통신 후 새로운 HTML 페이지를 보여줌
이제는 자바스크립트를 통해서 새 페이지를 요청하지 않고, JS가 HTML DOM 요소를 조작해서 사용자에게 화면을 보여줄 수 있게 됨
리액트가 필요한 이유 ?
자바스크립트만 이용한다면 한 개의 기능에 필요한 모든 단계의 코드들이 전부 서술되어야 함 = 명령적 접근법 (Imperative Approach)
낮은 단계의 코드들 (예를 들어 document.createElement)은 React 라이브러리에 의해 미리 정의되어서 사용됨
=> 이러한 이유로 리액트는 개발자가 복잡한 사용자 인터페이스를 훨씬 쉽게 구현할 수 있도록 해줌
SPAs (Single-Page-Applications)
: 한 개의 HTML 페이지에서 필요한 부분의 UI 요소만 가져와서 사용자에게 화면을 보여주는 방식
리액트 개발을 VSC에서 하면서 쓰기 좋은 extensions
- Prettier
- Material Icon Theme
Section 2
JavaScript Refresher
리액트 앱은 보통 가장 최신 버전의 자바스크립트 문법들로 구성되기 때문에 이 콘텐츠가 있는 것으로 보임
1. 자바스크립트 exports / imports 코드 예시
2. 클래스
1) ES6 version
class Human {
constructor() {
this.gender = 'female';
}
printGender() {
console.log(this.gender);
}
}
class Person extends Human {
constructor() {
// 상속을 할 때는 부모클래스를 초기화하는 부모생성자인 super();를 써줘야 한다.
super();
this.name = 'JungAh';
this.gender = 'secret';
}
printMyName() {
console.log(this.name);
}
}
const person = new Person();
person.printMyName();
person.printGender();2) ES7 version
- 생성자, this 키워드를 사용하지 않아도 됨
- 메소드를 화살표 함수처럼 작성함
class Human {
gender = 'female';
printGender() {
console.log(this.gender);
}
}
class Person extends Human {
name = 'JungAh';
gender = 'secret';
printMyName = () => {
console.log(this.name);
}
}
const person = new Person();
person.printMyName();
person.printGender();
3. 전개 연산자
Spread : Used to split up array elements OR object properties = 배열, 객체를 펼쳐준다
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4];
console.log(newNumbers);const person = {
name: 'JungAh'
};
const newPerson = {
...person,
age: 26
}
console.log(newPerson);Rest : Used to merge a list of function arguments into an array = 함수 인수 목록을 배열로 병합하는데 사용된다
const filter = (...args) => {
return args.filter(el => el === 1);
}
console.log(filter(1, 2, 3)); // [1] 출력
4. 구조분해할당 (Destructuring)
Destructuring : Easily extract array elements or object properties and store them in variables
= 배열 요소들 또는 객체 속성들을 쉽게 추출해 변수에 저장하도록 한다
const numbers = [1, 2, 3];
[num1, num2] = numbers;
console.log(num1, num2); // 1 2 출력-> 변수 하나에 한개의 요소만 담게 된다
5. 원시타입, 참조타입
원시타입 (Primitive Type) : 숫자, 문자열, 불리언은 이 타입에 속한다.
참조타입 (Reference Type) : 객체, 배열이 이 타입에 속한다.
const person = {
name: 'Max'
};
// Person 객체는 메모리에 저장되고 상수 person에는 해당 위치에 대한 포인터를 메모리에 저장한다.
const secondPerson = person;
// secondPerson의 name 값만 바뀐 것이 아니라, person의 name 값도 바뀐다.
// 그 이유는 포인터를 복사한 것이 메모리에 똑같은 객체를 가리키기 때문이다.
person.name = 'JungAh';
console.log(secondPerson);const person = {
name: 'Max'
};
// 객체를 복사하는 방법
const secondPerson = {
...person
};
person.name = 'JungAh';
console.log(secondPerson);
출처