React.js란 ?
- 자바스크립트 라이브러리이다.
- facebook에서 주도하고 있는 오픈소스 프로젝트로, facebook과 instagram에 사용된다.
React의 특징
1. MVC패턴중 V(View)를 구현하는 라이브러리이다.
참고 : 하지만 MVC패턴을 사용하여 대규모 애플리케이션을 사용하면 너무 빠르고 복잡해진다는 단점이 있다. 이를 해결하기 위해 Fulx 아키텍처를 적용하여 보안한다.
(Fulx 부분은 나중에 다뤄보도록 . . .)
2. 가상돔(Virtual DOM)을 사용하여 웹 애플리케이션의 성능을 극대화 시킨다.
Q. 어떻게 성능을 극대화 시킬까 ?
리액트는 리플로우와 리페인트가 자주 수행되는 문제를 해결하기 위해 화면에 표시되는 DOM과 동일한 DOM을 메모리상에 만들고, DOM 조작이 발생하면 메모리상에 생성한 가상 돔에 모든 연산을 수행한 후, 실제 DOM을 갱신하여 리플로우,리페인트 연산을 최소화한다.
리플로우와 리페인트가 궁금하다면 ?
https://mandelina-code.tistory.com/63
[FE] 웹페이지 렌더링과 page reflow & repaint
웹 페이지 렌더링 - 브라우저가 HTML파일을 화면에 그려내는 과정 1. 파싱 : HTML파일을 DOM으로 변환 (파싱) 2. 스타일 계산 : CSS를 CSSOM으로 파싱 3. 레이아웃 : CSSOM 정보를 토대로 레이아웃 트리(렌더
mandelina-code.tistory.com
3. 단방향 데이터 바인딩을 사용한다.
단방향 데이터 바인딩 VS 양방향 데이터 바인딩
Q. 먼저 데이터 바인딩이란 ?
두 데이터 혹은 정보의 소스를 모두 일치시키는 기법으로 즉, 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 기법이다.
Q. 양방향 데이터 바인딩 ?
사용자 UI의 데이터 변경을 감시하는 Watcher와 자바스크립트 데이터의 변경을 감시하는 Watcher과 자바스크립트 데이터를 자동으로 동기화 시켜주는 방식이다.
따라서 하나에 데이터 동기화에 두 개의 Watcher가 생성되므로 , 성능저하가 발생할 수 있다.
Q. 단방향 데이터 바인딩? ▷ 리액트가 사용!
단 하나의 Watcher가 자바스크립트의 데이터 갱신을 감지하여 사용자 UI를 갱신하는 방식이다.
(때문에 양방향 데이터 바인딩 방식보다 성능이 좋고 , 더 확실하게 데이터를 추적할 수 있게 해준다.)
4. JSX문법을 갖는다. (JSX = JS + XML )
5. 컴포넌트 기반이다.
(컴포넌트를 재사용할 수 있기때문에 개발 생산성을 향상시킬 수 있다.
또한, 컴포넌트 별로 관리하므로 코드를 유지보수하는데 용이하다.)
Q. 컴포넌트가 뭔가요?
특정 부분이 어떻게 생겼는지 정의한것으로, JS에서의 class처럼 코드 구조를 재사용 할 수 있다.
실무 페이지를 구성할 때에는 재사용 가능성이 있는 매우 작은 부분들까지 컴포넌트로 만들고, 이를 합성하여 사용해 재사용성을 극대화 시키는것이다.
참고로, React에서 만든 컴포넌트의 식별자는 대문자로 시작한다.
6. 선언형 프로그래밍이다.
Q.선언형 프로그래밍 vs 명령형 프로그래밍
명령형 : 결과물을 얻기 위한 과정에 집중
선언형 : 결과물을 얻기 위한 결과에 집중
(JS에서 메서드를 사용하기때문에 구체적인 메소드의 로직을 알 필요 없이 사용하면 된다.)
'FE > REACT' 카테고리의 다른 글
| [React] SPA(Single Page Application)를 Q&A방식으로 알아보자! (0) | 2022.06.11 |
|---|---|
| [React] 자바스크립트 안에 스타일을 선언하는 방법 (CSS-in-JS) (0) | 2022.06.11 |
| [React - Hook] useEffect을 사용해 시계만들기 (0) | 2022.06.09 |
| [React] useState에서 사용하는 State는 정확히 무엇을 말하는걸까? (2) | 2022.06.09 |
| [React - Hook] React에서 변하는 데이터 처리하는방법 ( Hook이 뭐고 useState는 뭐야? ) (0) | 2022.06.09 |