[ 3D Web : Front_React.js ] React란 무엇인가?
∇ FrontEnd_React : React.js란 무엇인가??
목 차
1. React란.
2. React의 특징.
Ⅰ . React란?
☆ React란 : UI [사용자 인터페이스]를 구축하기 위한 선언적*효율적이며 유연한 JavaScript 라이브러리.
==>> ◎ "컴포넌트"라고 불리는 코드블록을 활용해, 복잡한 UI를 구성하도록 돕습니다.
◆ React를 사용하는 이유는 무엇일까?
√ 순수 JS만을 사용하여 화면을 구현하려면 관리가 힘들고,
프로덕트의 규모가 커질수록 성능 저하의 원인이 될 수 있습니다.
√ 위에서 말한 것처럼, React는 '컴포넌트'를 기반으로 해서 효율적으로 UI를 쉽게 구현 가능하게 설계되었습니다.
√ 컴포넌트와 더불어서, 리액트의 사용 이유를 매력적으로 만들어주는 요소는 " Virtual DOM(가상 DOM)" 입니다.
◇ 웹 브라우저가 웹사이트의 텍스트 문서(HTML)을 읽어서
DOM(Document Object Model)이라는 트리구조로 변경하여 유저에게 보여주게 되는데,
JS를 사용하는 웹 개발자들은 사용자의 반응에 따라 DOM 트리구조를 변경하여 웹사이트의 내용을 갱신합니다.
However,
== >> 매번 화면상에 작은 변화라도 발생 할 때마다 전체 화면을 재 렌더링 하는 것은 성능에 좋지 않습니다.
☆ React는 이 문제를 해결하기 위해서 Virtual DOm이라는 개념을 도입하였습니다.
*버츄얼 돔의 개념은 추후에 더 자세히..
- 리엑트를 사용해 개발을 한다면, Virtual DOM을 사용해, UI를 자동으로 업데이트해줘서 빠른 성능을 유지가능합니다.
- Virtual DOM이란 메모리 상에 가상으로 존재하는 DOM으로 JavaScript의 객체 형태로 존재합니다.
- 다양한 커뮤니티와 폭넓은 개발자-생태계를 유지하고 있기 때문에,
개발에 필요한 자료등을 쉽게 얻을 수 있고, 다양한 라이브러리와 도구룰 활용해 개발 생산성을 높일 수 있습니다.
Ⅱ . React의 특징.
1. Data_Flow
√ React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가집니다.
: 데이터가 부모 - > 자식 방향으로만 흐른다는 뜻!
2. Component 기반 구조.
◎ "Component"란, 독립적인 단위의 소프트웨어 모듈을 의미합니다.
◎ React는 화면을 "Component" 로 분할*조합해서 만듭니다.
== 하나의 페이지 내에서도 여러 부분들을 독립된 컴포넌트로 제작하고,
이 컴포넌트들을 조립해 화면을 구성합니다.
√ 컴포넌트 단위로 기능이 쪼개져 있기 때문에, 전체 코드 구성 파악이 용이합니다.
√ 기능 단위, UI 단위로 캡슐화 시켜서, 코드를 관리하기 때문에 재사용성이 높습니다.
==>> 코드 반복 입력 없이, "Component"만 import 시켜서 사용하면 된다는 간편함이 있으며
프로덕트가 복잡해지더라도 전체 코드의 유지보수 * 관리가 용이합니다.
3. Virtual DOM
∇ DOM은 html / xml /css 등을 트리 구조로 인식하고, "데이터를 객체로 간주하고 관리" 합니다.
∇ React는 이러한 DOM Tree 구조와 같은 구조체를 "Virtual DOM"으로 가지고 있습니다.
==> 이벤트 발생시마다 Virtual DOM을 만들고, 그 때마다 실제 DOM과 비교하면서
변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해 앱의 효율성과 속도를 개선 가능합니다.
4. Props와 State
∇ Props.
- Props란, 부모 컴포넌트 상에서 자식 컴포넌트로 전달해주는 데이터 입니다.
- "자식 컴포넌트" 측에서 전달받은 props는 변경이 불가능하고,
props를 전달해준 "부모 컴포넌트"측에서만 props를 변경 가능합니다.
∇ State.
- State란, 컴포넌트 내부에서 선언하며 내부에서 값을 임의로 변경 가능합니다.
- State는 동적인 데이터를 다룰 때 사용하며,
유저와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용합니다.
==>> 이는 " 클래스형 컴포넌트 " 에서만 사용 가능하고, 각각의 State는 독립적으로 유지됩니다.
∇ JSX.
- JSX란, React 상에서 사용하는 문법입니다.
- JS와 HTML을 동시에 사용하며, HTML에 자바스크립트 변수들을 바로 사용할 수 있는 일종의 템플릿 언어.
'Front_End [JS기반] > React.js + Next.js' 카테고리의 다른 글
| [ 3D Web : Front & Back_Next.JS ] Next.JS의 렌더링이 동작하는 원리. (2) | 2024.11.28 |
|---|---|
| [ 3D Web : Front_React.js ] React.JS : React란? (0) | 2024.11.26 |
| [ 3D Web : Front & Back_Next.JS ] Next.JS란 무엇이고, 왜 사용하는걸까 (4) | 2024.11.25 |
| [ 3D Web : Front_React.js ] React의 JSX & 컴포넌트 & prop & state (2) | 2024.11.23 |
| [ 3D Web : Front_React.js ] React의 동작원리 정리. (1) | 2024.11.21 |