[React] 리액트 사용 이유?

React는 2013년 페이스북에 의해 출시되어 페이스북에서 제공해주는 프론트엔드 라이브러리 이다.

리액트는 기존 뷰를 날려버리고 Virtual DOM을 사용하여 처음부터 새로 랜더링하는 방식으로 좀 더 빠른 속도로 뷰를 변경시켜 준다.

 

리액트의 장점

• Virtual DOM 사용으로 인해 속도가 빠름
• 캐치프라이즈, 자바스크립트와 리액트의 간단한 개념만 알면 웹, 앱 모두 개발 가능
• 자바스크립트 친화적이며, 불변성 관리에 초점을 두고 있는 도구이다
• 이미 많이 사용되고 있기에 다양한 라이브러리가 존재하고, 질문과 답변이 활발하게 이루어짐

 

리액트의 특징

1. 컴포넌트 (Component) 구조

리액트는 모든 것이 컴포넌트.

컴포넌트는 레고 블록과 같이 작은 단위로 만들어서 그것들을 조립하듯이 개발할 수 있게 해줌

=> 캡슐화, 확장성, 결합성, 재사용성 증가

 

2. 단방향 데이터 흐름

리액트에서는 부모 컴포넌트와 자식 컴포넌트 간에 데이터를 전달할 수 있는데,

데이터를 전달할 때 부모에서 자식에게로만 데이터 전달이 가능.

 

3. ECMAScript 6

리액트는 ES6 문법을 사용함

 

• let
  기존의 var를 대체할 수 있는 키워드
  var는 선언문의 생략, 중복된 변수명 선언, 함수 블록에서의 스코프 설정, 함수 호이스팅 등으로 개발에 혼란을 주고 가독성이 떨어지기 때문에 ES6에서는 var를 지양함

///// 함수가 아닌 블록에서의 var 스코프 설정
var a = 100;
if(a > 0){
	var a = 200;
    console.log(a); // 200출력
}
console.log(a); // 200 출력


///// let으로 변경한 경우
let a = 100;
if(a > 0){
	let a = 200;
    console.log(a); // 200출력
}
console.log(a); // 100 출력

 

• const
  변경할 수 없는 변수로, 값을 재할당 할 필요가 없는 경우 사용
  변수와 달리 선언 할 때 반드시 초기값을 할당해줘야 하며, 스코프 범위는 let과 동일하게 블록 레벨임

const NAME; // 초기값을 할당하지 않아 SyntaxError 발생
const NAME = 'Jo';
NAME = 'Lee'; // 값을 변경하려 하면 TypeError 발생

 

• 화살표 함수(Arrow function)
  함수표기 구문을 화살표 `=>`로 하여 구문 길이를 줄여줌

// 기존 함수 구문
var add = function(a, b){
	return a + b;
};

// 화살표 함수 구문
let add = (a, b) => {
	return a + b;
}


// === 블록구문 {}을 생략한 표현식 사용 가능 *return 은 사용 불가 * ===
// 블록 구문 사용
let add = (a, b) =>{
	console.log(a + b);
}
// 블록 구문 생략
let add = (a, b) => console.log(a + b);

// ===== 단일 인자만 넘겨받는 경우에도 괄호 생략 가능
// 괄호 사용
let print = (message) => document.write(message);
// 괄호 생략
let print = message => document.write(message);

 

 

• 펼침 연산자 (spread operator)
  `...`을 사용하는 연산자
  배열 또는 객체의 모든 값을 복사할 수 있음

let a = [1, 2, 3];
let b = a;
b.push(4);
console.log(a); // [1, 2, 3, 4]
console.log(b); // [1, 2, 3, 4]

 

JavaScript에서 배열이나 객체 같은 참조형 데이터 타입은 변수에 할당될 때, 그 값 자체가 아닌 메모리 주소가 할당됨
위 예시처럼 두 변수가 같은 배열을 참조하게 되는 경우 모든 데이터가 교체됨.

 

이를 방지하기 위해 나온 문법이 바로 펼침 연산자 ! (데이터 불변성과 관련있음)

let a = [1, 2, 3];
let b = [...a, 4];
console.log(a); // [1, 2, 3]
console.log(b); // [1, 2, 3, 4]

 

 

• 클래스 (class)
  class 를 사용하여 Prototype을 사용하지 않고도 간단하게 상속 사용 가능

// class 키워드 뒤에 클래스명 붙여 선언하고 블록 안쪽에 구문 작성
class Display {
}
const display = new Display();

 

 

• 상속
  ES6에서는 extends 키워드를 사용하여 보다 쉽게 상속을 구현할 수 있음
  부모(상위) 클래스의 속성이나 기능을 자식에게 전달함

class Display{
	constructor(x, y){
    	this.x = x;
        this.y = y;
    }
}

/* 
React 클래스 선언문 뒤에 extends를 붙여 선언된 Display 클래스를 상속 받음
*/
class React extends Display{
	constructor(x, y, width, height){
    super(x, y);
    this.width = width;
    this.height = height;
    }
}

 

 

참고 : https://medium.com/hivelab-dev/react-js-tutorial-part1-c632e34fc32

 

▶ React 를 실습하기 전 알아두어야 할 개념✨❗