본문 바로가기

[IT/Programming]/HTML related

week4 위클리 페이퍼 (리액트가 렌더링 하는 방식을 설명, 리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명, React 에서 컴포넌트란 무엇이며, 함수형 컴포넌트와 클래스 컴포넌트의 차이점을 설명)

728x90
반응형
# week4 위클리 페이퍼 (리액트가 렌더링 하는 방식을 설명, 리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명, React 에서 컴포넌트란 무엇이며, 함수형 컴포넌트와 클래스 컴포넌트의 차이점을 설명) ## PH
  • 2024-08-20 : First posting.
## TOC ## 리액트가 렌더링 하는 방식을 설명 리액트의 렌더링 방식은 컴포넌트 기반의 UI 를 효율적으로 업데이트하고 관리하는 데 중점을 둡니다. 주요 단계는 다음과 같습니다:
  1. 렌더링 단계:
    • 초기 렌더링: 리액트는 컴포넌트 트리의 루트에서 시작하여 모든 자식 컴포넌트를 순차적으로 렌더링합니다. 이 과정에서 JSX 문법으로 작성된 코드를 React.createElement() 호출로 변환하여 React 엘리먼트를 생성합니다.
    • 리렌더링: 상태(state)나 속성(props)이 변경되면 해당 컴포넌트와 그 자식 컴포넌트들이 다시 렌더링됩니다. 리액트는 변경된 부분만을 효율적으로 업데이트하기 위해 가상 DOM(Virtual DOM) 을 사용합니다.
  2. 재조정 (Reconciliation):
    • 리액트는 새로운 가상 DOM 트리와 이전 가상 DOM 트리를 비교하여 변경된 부분만 실제 DOM에 반영합니다. 이 과정을 재조정이라고 하며, 이를 통해 성능을 최적화합니다.
  3. 커밋 단계:
    • 변경 사항이 계산된 후, 리액트는 이를 실제 DOM에 적용합니다. 이 단계에서 컴포넌트의 라이프사이클 메서드(componentDidMount, componentDidUpdate 등)와 훅(useEffect 등)이 호출됩니다.
    • 리액트의 이러한 렌더링 방식은 UI 업데이트를 효율적으로 처리하고, 불필요한 DOM 조작을 최소화하여 성능을 향상시킵니다.
### JSX 문법 JavaScript 에서 HTML DOM 문법을 활용하기 위해 도입된 것으로 아래와 같은 JSX 는 ```[.lang-jsx] const user = { name: 'Jane Doe', age: 28, hobbies: ['reading', 'traveling', 'coding'] }; const element = ( <div> <h1>Profile</h1> <p>Name: {user.name}</p> <p>Age: {user.age}</p> <h2>Hobbies</h2> <ul> {user.hobbies.map((hobby, index) => ( <li key={index}>{hobby}</li> ))} </ul> </div> ); ```/ 바로 아래와 같이 변형되어 compile 된다고 보면 된다. HTML DOM 문법으로 DOM 비스무리한 JSON Object 를 만들어 내는 것이라고 생각하면 되겠다. ```[.lang-js] const user = { name: 'Jane Doe', age: 28, hobbies: ['reading', 'traveling', 'coding'] }; const element = React.createElement( 'div', null, React.createElement('h1', null, 'Profile'), React.createElement('p', null, `Name: ${user.name}`), React.createElement('p', null, `Age: ${user.age}`), React.createElement('h2', null, 'Hobbies'), React.createElement( 'ul', null, user.hobbies.map((hobby, index) => React.createElement('li', { key: index }, hobby) ) ) ); ```/
계층 구조로 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 } ] } ```/
### 대문자로 시작되는 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 을 사용하는 이유
  1. 성능 최적화:
    • 실제 DOM 조작은 비용이 많이 드는 작업입니다. DOM 요소의 변경은 브라우저의 레이아웃 재계산과 리플로우, 리페인트 과정을 유발하기 때문입니다.
    • Virtual DOM 을 사용하면, 리액트는 변경 사항을 메모리 내에서 먼저 처리하고, 변경된 부분만 실제 DOM 에 반영하여 성능을 최적화합니다.
  2. 효율적인 업데이트:
    • 리액트는 Virtual DOM 을 통해 변경된 부분만을 효율적으로 찾아내어 업데이트합니다. 이를 통해 불필요한 DOM 조작을 최소화하고, 빠른 UI 업데이트를 가능하게 합니다.
  3. 개발자 경험 향상:
    • Virtual DOM 은 리액트의 선언적 프로그래밍 방식을 지원합니다. 개발자는 UI 의 상태를 선언적으로 정의하고, 리액트는 이를 기반으로 효율적으로 업데이트를 처리합니다.
## React 에서 컴포넌트란 무엇이며, 함수형 컴포넌트와 클래스 컴포넌트의 차이점을 설명 리액트에서 컴포넌트는 UI 를 구성하는 독립적이고 재사용 가능한 코드 조각입니다. 컴포넌트는 자바스크립트 함수와 유사하며, 입력값(속성, props)을 받아서 화면에 표시할 UI 를 반환합니다. 리액트 컴포넌트는 크게 두 가지 유형으로 나뉩니다: 함수형 컴포넌트와 클래스 컴포넌트. ### 함수형 컴포넌트 함수형 컴포넌트는 자바스크립트 함수로 정의되며, 상태(state)와 생명주기 메서드를 사용하기 위해 리액트 훅(Hooks)을 활용합니다. 함수형 컴포넌트는 간결하고 작성하기 쉬우며, 최근 리액트 개발에서 더 많이 사용됩니다. 예시 ```[.lang-jsx] import React from 'react'; const MyComponent = ({ title, content }) => { return ( <div> <h1>{title}</h1> <p>{content}</p> </div> ); }; export default MyComponent; ```/ ### 클래스 컴포넌트 클래스 컴포넌트는 ES6 클래스 문법을 사용하여 정의되며, 상태와 생명주기 메서드를 직접 사용할 수 있습니다. 클래스 컴포넌트는 리액트의 초기 버전에서 주로 사용되었지만, 함수형 컴포넌트와 훅의 등장으로 점차 사용이 줄어들고 있습니다. 예시 ```[.lang-jsx] import React, { Component } from 'react'; class MyComponent extends Component { render() { const { title, content } = this.props; return ( <div> <h1>{title}</h1> <p>{content}</p> </div> ); } } export default MyComponent; ```/ ### 주요 차이점
  1. 문법:
    • 함수형 컴포넌트는 함수로 정의되고, 클래스 컴포넌트는 클래스로 정의됩니다.
    • 함수형 컴포넌트는 return 문을 사용하여 JSX 를 반환하고, 클래스 컴포넌트는 render 메서드를 사용합니다.
  2. 상태 관리:
    • 함수형 컴포넌트는 useState 와 같은 훅을 사용하여 상태를 관리합니다.
    • 클래스 컴포넌트는 this.state 를 사용하여 상태를 관리합니다.
  3. 생명주기 메서드:
    • 함수형 컴포넌트는 useEffect 훅을 사용하여 생명주기 메서드를 대체합니다.
    • 클래스 컴포넌트는 componentDidMount, componentDidUpdate, componentWillUnmount 등의 생명주기 메서드를 사용합니다.
  4. 간결함:
    • 함수형 컴포넌트는 코드가 더 간결하고 이해하기 쉽습니다.
    • 클래스 컴포넌트는 상대적으로 더 복잡할 수 있습니다.
리액트 공식 문서에서도 함수형 컴포넌트를 우선적으로 사용할 것을 권장하고 있습니다. ## RRA
  1. https://react.dev/
  2. https://github.com/facebook/react
728x90
반응형