[React.JS] 소개

 

 

 

---

 

 

 

📑 React.js 소개  - https://ko.react.dev/

리액트는 SPA(Single Page Application)을 위한 자바스크립트 라이브러리입니다.

2013년 페이스북(현 메타)에서 공개하였습니다. 리액트는 웹 UI를 작성하기 위한 목적으로 만들어졌으며 순수하게 자바스크립트만을 이용해서 만들 수 있고, UI영역의 재사용을 위해 '컴포넌트'라는 작은 단위 기반으로 개발을 하는데요. 이렇게 만들어진 여러 개의 컴포넌트를 조합하여 UI를 작성하게 됩니다. 

 

라이브러리(Library)란 단순 활용가능한 도구들의 집합이다.
개발자가 만든 클래스들의 나열로, 다른 프로그램들에서 사용자가 원하는 방식으로 사용할 수 있도록 제공하는 방식이다. 라이브러리 기능으로 코드 재활용성, 추상화, 모듈화, 유연성이 있다.

 

장점	단점
- React 공식 문서 가이드와 방대한 커뮤니티, 자료를 통해 쉽게 접하고 배울 수 있다. - Component 하나로 관리를 하기 때문에 간편하다. - 성능이 뛰어난 가비지 콜랙터, 메모리 관리 기능을 지원한다. - UI 수정과 재사용성이 좋고, 코드 가독성을 높일 수 있다. - 다른 프레임워크나 라이브러리와 병행해서 사용하기 좋다.	- IE8 이하 버전은 지원하지 않는다. - 데이터 모델링, 라우팅, ajax 등 기능 지원이 안된다. - 로딩 시간이 길다. - javascript 배경지식이 필수적이다.

 

 

👍특징

1. Component 기반 구조

Component는 독립적인 단위의 소프트웨어 모듈을 말합니다. React는 애플리케이션을 재사용 가능한 컴포넌트 단위로 분리하여 관리할 수 있습니다. 각 컴포넌트는 독립적이며 재사용 가능하므로 개발 및 유지보수가 용이합니다.

 

2. Virtual DOM(가상돔) 기반

DOM은 html, xml, css등 트리 구조로 인식하고 데이터를 객체로 간주하며 관리합니다.

React는 DOM tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있습니다. 이벤트를 발생할 때마다 Virtual DOM을 만들고 필요한 최소한의 변경사항만 DOM에 반영하여 효율성과 속도를 개선합니다. 

 

* 가상 DOM은 UI를 메모리 상에서 먼저 렌더링하고 실제 DOM과의 차이를 계산하여 필요한 부분만 업데이트.

 

3. Data Flow (단방향 데이터 바인딩)

React는 데이터 흐름이 단방향으로 이루어지며, 상태 관리가 명확하고 예측 가능합니다. 데이터의 변화를 추적하고 디버깅하기가 쉽습니다. (only 부모 ➡️ 자식 )

 

4. JSX(JavaScript XML)

JSX는 JavaScript와 HTML을 결합한 문법으로, 코드 가독성을 높이고 UI의 구조를 직관적으로 작성할 수 있도록 돕습니다.

const App = () => {
  const hello = 'Hello world!';
  return <div>{hello}</div>;
};

 

5. 강력한 커뮤니티와 생태계 

React는 대규모 커뮤니티와 다양한 서드파티 라이브러리를 갖추고 있어 확장성과 지원이 뛰어납니다. React 단독으로 사용할 수도 있지만, 주로 다른 라이브러리나 프레임 워크와 함께 사용이 가능합니다.

 

 

 

💻 핵심개념

✅ 컴포넌트(Component)

✅ JSX (JavaScript XML)

✅ Props (속성)

✅ State (상태)

✅  Hook