[React] 개요

React

facebook에서 만든 프론트엔드 프레임워크

웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용됨

 

 

[Web Frameworks]

react는 인기가 많다.!

 

 

[React의 장점]

선언형

React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줌

애플리케이션의 각 상태에 대한 간단한 뷰만 설계하면 됨

그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 랜더링 함

 

선언형 뷰는 코드를 예측가능하고 디버그하기 쉽게 만들어줌

 

 

컴포넌트 기반

스스로 상태를 관리하는 캡슐화된 컴포넌트

이를 조합해 복잡한 UI를 만듬

 

컴포넌트 로직은 템플릿이 아닌 JavaScript로 작성됨

다양한 형식의 데이터를 앱 안에서 손쉽게 전달할 수 있고, DOM과는 별개로 상태를 관리할 수 있음

 

 

한 번 배워서 어디서나 사용하기

기술 스택의 나머지 부분에는 관여x

기본 코드를 다시 작성하지 않고도 React의 새로운 기능을 이용해 개발할 수 있음

 

React는 Node 서버에 렌더링을 할 수 도 있고, React Native를 이용하면 모바일 앱도 만들 수 있음

 

 

※ DOM

먼저, DOM은 Document Object Model의 약자

DOM은 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리함

React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있음

Virtual DOM은 가상의 Document Object Model을 말함

거대한 트리구조가있고 그게 웹사이트에서 동작을 하게되는 것

 

 

※ Component

Component는 독립적인 단위의 소프트웨어 모듈임
즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 볼 수 있음

5개의 컴포넌트로 이루어진 앱

초록색안에 8가지 컴포넌트가 있음

 

※ Virtual DOM

 

이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선함

 

ex1) 페이스북에서 댓글을 쓰면 댓글쓴 창은 지워지고 댓글은 추가로 보여짐 (변경된부분 -> 빨강색)

    나머지 수백개의 글들은 그대로 있음 (변경되지 않은 부분 -> 파란색)

 

ex2) 게시물 좋아요를 누르면 페이지가 새로고침 되지않고 좋아요만 1개 증가함

 

 

 

[우리가 할 수 있는 것]

 

1. 전체 컴포넌트의 구조를 먼저 기획

2. 각 컴포넌트가 가지는 상태와 변화를 생각

3. 컴포넌트를 만듬

4. 컴포넌트에 HTML 비슷한 것(JSX)을 통해 구조를 만듬

5. CSS를 통해 꾸밈

6. 여러 React의 함수를 통해 기능을 추가