React 개요
안녕하세요. 오늘은 첫 개인 프로젝트를 시작하기 전 필요한 리액트 기초 지식을 공유드리겠습니다.
react
react란?
- React는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스(UI)를 만들기 위해 사용됩니다. facebook에서 만들어 2013년도에 배포된 프론트엔드 라이브러리입니다. Vue.js와 비교하여 크고 복잡한 어플리케이션 제작에 유용합니다.
- react docs
react의 장점
- Virtual Dom을 사용하여 어플리케이션의 성능을 향상시킵니다. Vue.js도 Virtual Dom을 사용하고 있습니다.
- module과 비슷하게 Component 단위로 작성되어 가독성이 높고 재사용성이 높습니다.
react의 특징
- Virtual Dom을 사용합니다.
- React에서 사용하는 JS 확장 문법인 JSX를 사용합니다.
- 단방향 데이터 흐름: Vue.js와 큰 차이점입니다. React는 상위 → 하위 컴포넌트로만 데이터 전달이 가능합니다.
- Component의 재사용성이 높습니다.
Virtual DOM
Real DOM
- Document Object Model
- 객체로서 문서 구조를 표현하는 방법
- 화면이 한 부분만 바뀐다 하더라도 전체를 재 렌더링함
- DOM에 변경 시, 성능 이슈가 발생
- 웹브라우저는 DOM을 활용하여 UI를 표현
예를 들어서 만약 10가지의 리스트가 있고 그중 1가지의 리스트만 Update 된다면 전체 10개의 리스트를 Reload해야합니다.
Virtual DOM
반면에 Vitual DOM은 바뀐 1가지의 리스트 아이템만 DOM에서 바꿔줍니다.
- 가상의 DOM에서 새로운 HTML 트리를 만들어 한번에 교체하는 방식
- 초당 60 프레임으로 제한하여 성능 최적화
- 필요한 부분만 찾아서 변경
- 처리방법
- 데이터 업데이트 → UI를 Virtual DOM에 렌더링
- 현재 DOM의 내용과 Virtual DOM의 내용을 비교
- 바뀐 부분만 실제 DOM에 렌더링
그럼 Virtual DOM은 어떻게 바뀐 부분만 실제 DOM에 렌더링 할 수 있는 걸까요?
Real DOM과 Virtual DOM은 같은 Properties들을 갖고 있으며 가볍게 Real DOM을 카피한 것이 Virtual DOM이라고 생각하면 됩니다. 예를 들어 10개의 리스트가 있으면 Vitual DOM을 이용하여 리스트 10개에 대한 스냅샷을 찍어 놓고 기억해놓습니다. 그때 리스트 1개가 업데이트 되면 Virtual DOM이 스냅샷 찍어둔 것과 새로 살펴본 것의 차이를 분석하여 바뀐 부분만 Real DOM에서 바꿔줍니다.
var, let, const의 차이점
var
- 중복선언 O, 재할당 O, 전역범위/함수범위에서는 선언+할당 가능
- block scope가 적용되지 않음
let
- 중복선언 X, 재할당 O, 전역범위/블록범위 내에서는 선언+할당 가능, 함수범위에서는 불가
- 재선언 시
Identifier '변수명' has already been declared에러 발생const(상수, Constant)
- 중복선언 X, 재할당 X, 어떤 범위에서는 선언+할당만 해야함 → 값이 변하지 않는다는 뜻으로 변수의 반댓말
- 재할당 시
Assignment to constant variable에러 발생 - 상수나 축약어는 대문자와 스네이크 케이스 방식으로 작성한다.
const HTML = "Hyper Text Markup Lanuage"; const MAX_LEVEL = "99"; - const가 좋은 이유
- 보안성이 좋다. 해커들로 부터 값이 변경될 우려가 없다.
- thread에서 안전하다. 다양한 thread들이 동시에 값을 변경할 수 있는데, 변경되지 않는 const는 이로부터 안전하다.
hoisting
어디에 선언했는지 상관 없이 항상 제일 위로 선언을 끌려 올려주는 것을 뜻한다. 자바스크립트 엔진은 ‘선언’을 최우선적으로 해석한다.
hoisting은 var, let, const 선언부를, 함수에서도 선언부를 먼저 해석하는 것. 선언+할당이 적용되는 경우 선언부를 자동으로 hoisting함
