[React] 개요

React

---

: 사용자 인터페이스(UI)를 구축하기 위한 자바스크립트 라이브러리

 

-공식사이트

https://ko.react.dev/

React

 

 

왜써야하나? 주요 특징

---

 

1. 컴포넌트 기반 유연성

UI를 독립적인 재사용 가능한 컴포넌트로 나누어 개발해 코드의 유지보수와 확장성 up

*컴포넌트 : 프로그래밍의 한 부분으로 재사용이 가능한 최소 단위

function Hello(){
	return(
    	<div>
    		<h1>Hello! 방가방가</h1>;
    	<div>
    );
}

<Hello /> //재사용가능

 

 

2. 가상 DOM (Virtual DOM)

Virtual DOM은 실제 DOM의 가벼운 복사본으로

DOM 트리의 변화를 감지하여 DOM 변경을 묶어서 처리하고, 꼭 필요한 부분만 실제 DOM에 한번에 반영하는 것

=> 실제 DOM은 변경 시 브라우저가 화면을 다시 렌더링해야 하므로 처리 속도가 느린 반면 변경된 부분만 실제 DOM에 적용되어 성능 최적화

 

-작동방식

Source:  https://www.cnblogs.com/xuntu/p/6800547.html

초기 컴포넌트 렌더링 중 데이터가 Virtual DOM으로 먼저 렌더링된 다음 Virtual DOM의 내용을 기반으로 실제 DOM이 생성되고 브라우저 화면에 렌더링

 

Source:  https://www.cnblogs.com/xuntu/p/6800547.html

상태(state)나 속성(props)이 변경되면 새로운 Virtual DOM이 생성되고 이전 Virtual DOM과 새 Virtual DOM을 비교하여 변경된 부분만 확인 후 실제 DOM에 적용.( 전체를 다시 렌더링X)

 

3. 단방향 데이터 흐름

단방향 데이터 흐름 (One-Way Data Flow)는 데이터를 부모에서 자식으로만 전달하는 방식으로, 데이터의 흐름을 예측 가능하게 하고, 애플리케이션의 상태를 관리하기 용이.

 

• 상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 props를 통해 데이터 전달
• 부모 컴포넌트가 데이터를 관리하고, 필요한 데이터를 자식 컴포넌트에 전달합니다.
• 자식 컴포넌트는 props를 읽을 수는 있지만, 직접적으로 수정 불가 (데이터 변경하려면 부모 컴포넌트에서 처리)
• 데이터(상태)가 변경되면 상위 컴포넌트가 업데이트되고, 이 변경 사항이 다시 자식 컴포넌트로 전달