728x90
반응형
- 2024-08-20 : First posting.
- 렌더링 단계:
- 초기 렌더링: 리액트는 컴포넌트 트리의 루트에서 시작하여 모든 자식 컴포넌트를 순차적으로 렌더링합니다. 이 과정에서 JSX 문법으로 작성된 코드를 React.createElement() 호출로 변환하여 React 엘리먼트를 생성합니다.
- 리렌더링: 상태(state)나 속성(props)이 변경되면 해당 컴포넌트와 그 자식 컴포넌트들이 다시 렌더링됩니다. 리액트는 변경된 부분만을 효율적으로 업데이트하기 위해 가상 DOM(Virtual DOM) 을 사용합니다.
- 재조정 (Reconciliation):
- 리액트는 새로운 가상 DOM 트리와 이전 가상 DOM 트리를 비교하여 변경된 부분만 실제 DOM에 반영합니다. 이 과정을 재조정이라고 하며, 이를 통해 성능을 최적화합니다.
-
커밋 단계:
- 변경 사항이 계산된 후, 리액트는 이를 실제 DOM에 적용합니다. 이 단계에서 컴포넌트의 라이프사이클 메서드(componentDidMount, componentDidUpdate 등)와 훅(useEffect 등)이 호출됩니다.
- 리액트의 이러한 렌더링 방식은 UI 업데이트를 효율적으로 처리하고, 불필요한 DOM 조작을 최소화하여 성능을 향상시킵니다.
계층 구조로
### 대문자로 시작되는 tag 는 user-defined tag 라고 생각하고 React 가 rendering 을 한다.
```[.lang-jsx]
function MyComponent({ title, content }) {
return (
<div>
<h1>{title}</h1>
<p>{content}</p>
</div>
);
}
const element = (
<div>
<MyComponent title="Hello, World!" content="This is a custom component." />
<MyComponent title="Another Title" content="More content here." />
</div>
);
```/
```[.lang-js]
function MyComponent({ title, content }) {
return React.createElement(
'div',
null,
React.createElement('h1', null, title),
React.createElement('p', null, content)
);
}
const element = React.createElement(
'div',
null,
React.createElement(MyComponent, { title: 'Hello, World!', content: 'This is a custom component.' }),
React.createElement(MyComponent, { title: 'Another Title', content: 'More content here.' })
);
```/
## 리액트에서 Virtual DOM 이 무엇인지, 이를 사용하는 이유는 무엇인지 설명
리액트의 Virtual DOM 은 실제 DOM(Document Object Model) 의 가벼운 복사본으로, UI 의 변화를 효율적으로 처리하기 위해 사용됩니다. 이를 통해 리액트는 성능을 최적화하고, 사용자 경험을 향상시킬 수 있습니다.
### Virtual DOM의 정의
Virtual DOM 은 메모리에 존재하는 가상 DOM 트리입니다. 리액트는 컴포넌트의 상태가 변경될 때마다 새로운 Virtual DOM 트리를 생성하고, 이를 이전의 Virtual DOM 트리와 비교하여 실제 DOM 에 최소한의 변경만을 반영합니다1.
### Virtual DOM 을 사용하는 이유
React.createElement([tagname], [properties], [children list])
와 같이 변환된다.
```
<tagname prop0="prop0" prop1="prop1" ...>
<child propC0="propC0" propC1="propC1" ...>
<subChild></subChild>
</child>
<child propC2="This is propC2."/>
</tagname>
```/
```
React.createElement(
'tagname',
{ prop0: 'prop0', prop1: 'prop1', ... },
[
React.createElement(
'child',
{ propC0: 'propC0', propC1: 'propC1', ... },
[React.createElement('subChild', null, null)]
),
React.createElement('child', { propC2: 'This is propC2.' }, null)
]
);
```/
위와 같은 React.createElement 함수로 다음과 같은 JSON Object (Virtual DOM) 이 생성된다고 보면 된다. (정확히 이렇게 되는지는 잘 모르겠다. React version 마다도 조금씩 다르고 변화가 생겼을 것으로 예상된다.)
```
{
"type": "tagname",
"props": {
"prop0": "prop0",
"prop1": "prop1",
...
},
"children": [
{
"type": "child",
"props": {
"propC0": "propC0",
"propC1": "propC1",
...
},
"children": [
{
"type": "subChild",
"props": {},
"children": null
}
]
},
{
"type": "child",
"props": {
"propC2": "This is propC2."
},
"children": null
}
]
}
```/
- 성능 최적화:
- 실제 DOM 조작은 비용이 많이 드는 작업입니다. DOM 요소의 변경은 브라우저의 레이아웃 재계산과 리플로우, 리페인트 과정을 유발하기 때문입니다.
- Virtual DOM 을 사용하면, 리액트는 변경 사항을 메모리 내에서 먼저 처리하고, 변경된 부분만 실제 DOM 에 반영하여 성능을 최적화합니다.
- 효율적인 업데이트:
- 리액트는 Virtual DOM 을 통해 변경된 부분만을 효율적으로 찾아내어 업데이트합니다. 이를 통해 불필요한 DOM 조작을 최소화하고, 빠른 UI 업데이트를 가능하게 합니다.
- 개발자 경험 향상:
- Virtual DOM 은 리액트의 선언적 프로그래밍 방식을 지원합니다. 개발자는 UI 의 상태를 선언적으로 정의하고, 리액트는 이를 기반으로 효율적으로 업데이트를 처리합니다.
- 문법:
- 함수형 컴포넌트는 함수로 정의되고, 클래스 컴포넌트는 클래스로 정의됩니다.
- 함수형 컴포넌트는 return 문을 사용하여 JSX 를 반환하고, 클래스 컴포넌트는 render 메서드를 사용합니다.
- 상태 관리:
- 함수형 컴포넌트는 useState 와 같은 훅을 사용하여 상태를 관리합니다.
- 클래스 컴포넌트는 this.state 를 사용하여 상태를 관리합니다.
- 생명주기 메서드:
- 함수형 컴포넌트는 useEffect 훅을 사용하여 생명주기 메서드를 대체합니다.
- 클래스 컴포넌트는 componentDidMount, componentDidUpdate, componentWillUnmount 등의 생명주기 메서드를 사용합니다.
- 간결함:
- 함수형 컴포넌트는 코드가 더 간결하고 이해하기 쉽습니다.
- 클래스 컴포넌트는 상대적으로 더 복잡할 수 있습니다.
728x90
반응형
'[IT/Programming] > HTML related' 카테고리의 다른 글
SNS 내보내기/공유하기 (Sharing a URI link through SNS) (2) | 2024.08.26 |
---|---|
Super Easy Edit (SEE) of docuK: 사용 설명서 (Manual | Documentation | Tutorial). (2) | 2024.08.26 |
말풍선, inRef 만들기, 만드는 법 in HTML by JavaScript (아랫쪽, 윗쪽, 왼쪽, 오른쪽 말풍선) - 안내서 만들기 (0) | 2024.08.26 |
인스타그램 (Instagram) 퍼오는 법 (2) | 2024.08.24 |
Encode/Unescape and Decode/Escape URI Component (0) | 2024.08.20 |
week3 위클리 페이퍼 (var, let, const 를 서로 비교 // 자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명 // 렉시컬 스코프(Lexical Scope)의 개념과 그 특성에 대해 설명) (0) | 2024.08.20 |
코드잇 풀스택 2기 - Week 6 (0) | 2024.08.20 |