[React]리액트란 무엇인가?

✔ 왜 리액트?

원래 백엔드만 공부하려고 했는데... 이번 캡스톤 프로젝트에 프론트엔드가 없어서 공부해보기로 했다.

어차피 백엔드도 프론트엔드 조금 알고있어도 손해는 아니잖아?

 

 

 

📝 SPA - Single Page Application

하나의 페이지로 복잡한 HTML 환경을 구현할까?

• HTML 파일 하나로 바디 태그 내부를 동적으로 채워넣는 방법으로 사용한다.
• 리액트는 이것을 채워넣는 역할을 한다.

📝JavaScript

자바 스크립트는
웹 페이지를 생명을 불어넣듯이 동적으로 사용할 수 있게 해준다.

• 스크립트 언어의 제일 큰 특징은 런타임에 코드가 해석되고 실행된다.

🚩자바 스크립트의 자료형

• 변수를 선언할 때 자료형을 선언하지 않고 var를 선언하는 동적 타이핑 방식을 사용한다.

// 정수형
let n1 = 1234;
let n2 = 5.678;
// 문자형
let s1 = "hello";
let s2 = "world";
// 불리언타입
let b1 = true;
let b2 = false;
// null
let n = null;
// 선언만 한것
let u1;
let u2 = undefined;
// 배열형
let arr = [1,2,3,4];
// 인덱스형
let obj = {a: "apple", b: "banana", c: "carrot"};

 

• 변수 선언형은 크게 3가지로 var, let, const가 있다.

// var는 블록 스코프를 무시할 수 있지만 이것은 좋은 방법이 아니다.
var name = "John";

// let은 선언된 변수가 해당 블록 내에서만 유효하며, 재할당이 가능하다.
let age = 30;

// const는 한번 할당하면 값이 변경되지 않는 상수를 의미한다.
const PI = 3.14;

 

📝리액트란 무엇일까?

리액트를 한마디로 정리해보면
사용자 인터페이스를 만들기 위한 자바 스크립트 라이브러리이다.

🚩장점

• 빠른 업데이트와 렌더링 속도
  • 리액트는 Virtual Dom을 이용하여 실제 Dom을 조작하는 대신 가상의 Dom을 메모리에 유지하고 필요한 경우 실제 Dom에 반영함으로써 빠른 업데이트와 렌더링을 가능하게 한다.
  • 여기서 Dom이란 웹사이트가 담고있는 정보를 총칭이다. 
• Component-Based 
  • 리액스의 또다른 장점은 컴포넌트 기반이라는 것이다.
  • 레고를 조립하듯 컴포넌트를 조합해서 개발하는 방식이기에 매우 간편한다.

🚩단점 

• 방대한 학습량
  • 새로운 개념의 툴이기때문에 배울 것이 많다.
• 계속 바뀜
  • 프론트엔드의 특징이다...
• 높은 상태관리 복잡도 : 리액트 컴포넌트의 상태를 의미하며 매우 중요한 개념

📝JSX 

JSX란?
자바스크립트의 확장 문법을 의미한다.
JavaScript + XML/HTML

const element = <h1>Hello, world!</h1>;

 

🚩JSX의 장점

• 코드가 간결해지고 가독성이 향상된다.

// JSX 사용
<div>Hello, {name}</div>

// JSX 미사용
React.createElement('div',null,'Hello, ${name}');

• Injection Attacks 방어 
  • 스크립트 공격인 XSS 같은 것을 방지할 수 있다.

🚩JSX 사용법

• JSX는 모든 자바스크립트 문법과 XML, HTML을 지원한다.

const name = '테스트';
const element = <h1>안녕, {name}</h1>;

ReactDOM.render(
	element,
	document.getElementById('root')
};

• 위 코드처럼 XML, HTML을 사용하려면 {} 사이에 넣으면 된다.