[TIL] React 기본 용어

SPA란?

'Single Page Application' 으로 리액트가 SPA의 형식이다.

페이지가 하나라는 뜻으로 하나의 페이지안에 자바스크립가 필요한 페이지나 정보만 동적으로 그려준다.

 

 

JSX란?

JSX(JavaScript XML)는 JavaScript의 확장 문법으로, React에서 UI를 작성할 때 주로 사용된다. 

JSX는 HTML과 유사한 구문을 가지고 있어 React 컴포넌트의 가독성을 높이고 작성을 간편하게 한다. 

JSX에서 중괄호를 사용해 JavaScript 표현식을 삽입할 수 있다. 

이를 통해 동적인 값이나 변수를 JSX에 포함시킬 수 있다. 

const btn = <button onClick={() => alert('Clicked!')}>Click me</button>;

 

 

Element(엘리먼트)

 

 

React 앱의 가장 작은 단위로 React 엘리먼트는 일반 객체이며(plain obj) 쉽게 생성할 수 있다.

엘리먼트는 컴포넌트의 "구성 요소"로, 컴포넌트와는 다르다.

엘리먼트는 불변객체로, 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다. 

엘리먼트는 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여준다. 

UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 이를 ReactDOM.render()로 전달하는 것이다.

 

 

React DOM

 

React DOM은 React에서 사용되는 라이브러리 중 하나로, 가상 DOM을 실제 DOM에 렌더링하고 상호작용하는 역할을 한다. 여기서 "DOM"은 문서 객체 모델을 의미하며, 웹 페이지의 구조를 나타내고 조작하는데 사용된다.

 

1. virtual DOM

React는 가상 DOM이라는 개념을 사용한다. 이는 메모리에 존재하는 가벼운 복사본으로, 실제 DOM과 동기화된다.

브라우저 안에 또 하나의 작은 브라우저를 만들고, 이 작은 브라우저를 "가상 DOM"이라고 부르는 것이다.

React 앱의 상태가 변경되면 가상 DOM이 다시 렌더링되고, 변경된 부분을 효율적으로 찾아내어 기존 실제 DOM에 반영된다.

2. 컴포넌트 기반

이 컴포넌트는 재사용 가능하고, 각각이 독립적으로 동작한다.

3. React DOM 라이브러리

React 앱을 웹 브라우저에서 보여주려면 react-dom이라는 라이브러리를 사용한다.