React 동작 설명
1. React
대화형 사용자 인터페이스를 구축하기 위한 Javascript 라이브러리로 사용자 인터페이스를 구축하기 위한 선언적이고 효율적인 방법을 제공합니다.
1-1. 라이브러리 이란?
React가 UI를 구축하는데 유용한 기능(API)을 제공하지만 애플리케이션에서 이러한 기능을 사용할 위치는 개발자에게 맡긴다는 의미를 나타낸다
2. 사용자 인터페이스 UI 렌더링
사용자가 웹페이지를 방문하면 서버는 다음과 같이 HTML 파일을 브라우저에 반환한다.
브라우저는 HTML 을 읽고 DOM(문서 개체 모델)을 구성한다
2-1. DOM 이란?
DOM 은 HTML 요소의 객체 표현이다.
코드와 사용자 인터페이스 사이의 브리지 역할을 하며 상위 및 하위 관계가 있는 트리와 같은구조를 갖는다
3. Javascript로 UI 업데이트
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
// 1. 'app' ID를 가진 div 요소를 선택합니다.
const app = document.getElementById('app');
// 2. 새로운 H1 요소를 생성합니다.
const header = document.createElement('h1');
// 3. H1 요소에 대한 새로운 텍스트 노드를 생성합니다.
const text = 'Develop. Preview. Ship.';
const headerContent = document.createTextNode(text);
// 4. 텍스트를 H1 요소에 추가합니다.
header.appendChild(headerContent);
// 5. H1 요소를 div 안에 배치합니다.
app.appendChild(header);
</script>
</body>
</html>
3-1. HTML 대 DOM
브라우저 개발자 도구 내부의 DOM 요소를 보면 DOM 에 <h1> 요소가 포함되어 있지만 페이지의 DOM 은 소스코드, 즉 사용자가 만든 원본 HTML 파일과 다르다.
이는 HTML이 초기 페이지 콘텐츠를 나타내는 반면 DOM 은 작성한 Javascript 코드에 의해 변경된 업데이트된 페이지 콘텐츠를 나타내기 때문이다.
Javascript로 DOM 을 업데이트 하는것은 매우 강력하지만 장황하다. 일부 텍스트가 포함된 요소를 추가하기 위해 이 코드를 모두 작성하게 된다.
<script type="text/javascript">
const app = document.getElementById('app');
const header = document.createElement('h1');
const text = 'Develop. Preview. Ship.';
const headerContent = document.createTextNode(text);
header.appendChild(headerContent);
app.appendChild(header);
</script>
앱이나 팀의 규모가 커짐에 따라 이러한 방식으로 애플리케이션 구축하는것은 점점 어려워 지게 된다.
이 접근 방식을 사용하면 개발자는 컴퓨터에게 작업 수행 방법을 알려주는데 많은 시간을 소비하게 된다. 하지만 보여주고 싶은것을 설명하고 컴퓨터가 DOM 을 업데이트하는 방법을 알아내도록 하는것이 좋지 않을까?
4. React로 UI 업데이트
JSX란?
HTML과 같은 구문으로 UI를 설명할수 있게 해주는 Javascript용 구문확장이다.
그러나 브라우저는 기본적으로 JSX를 이해하지 못하기 때문에 Babel과 같은 Javascript 컴파일러가 필요하다
const domNode = document.getElementById('app');
const root = ReactDOM.createRoot(domNode);
root.render(<h1>Develop. Preview. Ship.</h1>);선언형 vs 명령형
<script type="text/jsx">
const domNode = document.getElementById("app")
const root = ReactDOM.createRoot(domNode);
root.render(<h1>Develop. Preview. Ship.</h1>);
</script>
- 선언적 React 코드
<script type="text/javascript">
const app = document.getElementById('app');
const header = document.createElement('h1');
const text = 'Develop. Preview. Ship.';
const headerContent = document.createTextNode(text);
header.appendChild(headerContent);
app.appendChild(header);
</script>
- 명령형 Javascript 코드
React를 사용하면 많은 반복코드를 줄일수 있는지 확인할수 있다.
React는 사용자를 대신하여 작업(UI업데이트)을 수행하는 재사용 가능한 코드 조각이 포함된 라이브러리 이다.
5. React 렌더링
5-1. 렌더링 이란?
React 애플리케이션은 컴포넌트라고 불리는 작은 조각들로 구성된다.
각 컴포넌트는 상태(State)와 속성(Properties)을 기반으로 UI를 렌더링하게 된다.
렌더링은 상태나 속성이 변경될 때 해당 컴포넌트를 갱신하고, 변경된 내용을 화면에 반영하는 프로세스를 포함한다.
5-2. 함수
function MyComponent() {
return (
<div id="myDiv" className="container">
<h1>Hello, Virtual DOM!</h1>
<p>This is a virtual DOM example.</p>
</div>
);
}
- • 리액트 함수 문법으로 컴포넌트를 작성을 한다
5-3. VirtualDOM
const virtualDOM = {
type: 'div',
props: {
id: 'myDiv',
className: 'container',
children: [
{
type: 'h1',
props: {
children: 'Hello, Virtual DOM!'
}
},
{
type: 'p',
props: {
children: 'This is a virtual DOM example.'
}
}
]
}
};
- 컴포넌트 기반으로 가상 돔의 객체가 생성된다.
5-4. RealDOM
<div id="myDiv" class="container">
<h1>Hello, Virtual DOM!</h1>
<p>This is a virtual DOM example.</p>
</div>
- VirtualDOM 기반으로 HTML 이 생성된다.
5-5. 렌더링 과정
함수와 DOM 사이에 가상의 객체(VirtualDOM) 과정이 생긴다
Render → 함수호출
Commit → VirtualDOM 에서 RealDOM 에 적용된다
따라서 개발자는 함수만 작성하고 나머지는 리액트가 작성한다
컴포넌트에서 RealDOM 에 접근할때는 ref를 사용한다
'Front-End > React' 카테고리의 다른 글
| 리액트 컴포넌트 패턴: 프레젠테이션 vs 컨테이너 (0) | 2024.02.19 |
|---|---|
| React Router v5에서 v6로의 업그레이드: API 단순화와 새로운 기능 소개 (2) | 2024.02.15 |
| useState() 리액트 상태 관리 마스터하기 (0) | 2024.02.13 |
| React18 변경한 부분 (0) | 2023.12.01 |
| React 렌더링 (0) | 2023.09.23 |
