티스토리 뷰

무스마

두 번째 과제

하몬드 2023. 8. 7. 19:45

알아볼 것들

 

1. DOM과 VDOM

2. Flutter LifeCycle

 

 

DOM이란?

 

 

DOM은 Document Object Model의 약자로

문서 객체 모델을 의미한다.

 

웹 페이지(HTML, XML)의 콘텐츠 및 구조,

그리고 스타일 요소를 구조화 시켜 표현하여

프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록

API를 제공하는 일종의 인터페이스이다.

 

 

DOM의 비효율성

 

웹페이지에서 동적으로 할 일(list)을 추가하는 기능을 구현하려면

JS를 사용해 DOM을 조작해야 한다. 

 

<!DOCTYPE html>
<html>
<head>
  <title>비효율적인 DOM 조작 예시</title>
</head>
<body>
  <ul id="itemList">
    <li>항목 1</li>
    <li>항목 2</li>
    <li>항목 3</li>
  </ul>

  <button id="addItemBtn">항목 추가</button>

  <script>
    const addItemBtn = document.getElementById('addItemBtn');
    const itemList = document.getElementById('itemList');

    addItemBtn.addEventListener('click', function() {
      const newItem = document.createElement('li');
      const newItemText = document.createTextNode('새로운 항목');
      newItem.appendChild(newItemText);
      itemList.appendChild(newItem);
    });
  </script>
</body>
</html>

 

위 코드에선 "항목 추가" 버튼을 클릭할 때마다

새로운 <li> 요소를 생성하고, 그 요소를 <ul> 목록에 추가한다.

 

위 코드가 비효율적인 점 2가지

1. <li> 요소를 실제 DOM에 반복적으로 생성하고 추가해,

DOM 조작 작업 비용이 증가하고 성능을 저하시킬 수 있다.

 

2. "항목 추가" 버튼을 여러 번 누르면 실제 DOM에 대한 조작이 빈번하게 일어나게 된다.

이는 브라우저 렌더링에 더 많은 시간을 소요하게 하는 원인이 된다.

 

개선방안

더 복잡하고 규모가 큰 웹 애플리케이션에서는 DOM 조작이 빈번하게 발생하며,

이로 인해 성능에 영향을 끼치는 경우가 많다.

 

따라서 이러한 경우엔 Virtual DOM을 사용해

DOM조작을 최소화하고 성능을 향상시킬 수 있다.

 

 

Virtual Dom

 

 

Virtual DOM은 웹 개발에서 성능 최적화를 위해 사용되는 개념이다.

실제 DOM과 별개로 메모리 상에서만 존재하는 가상의 DOM을 의미한다.

 

VDOM은 애플리케이션 상태를 가상 DOM에 반영하여

실제 DOM과 가상 DOM의 차이점을 계산하고,

이 차이를 최소화하여 필요한 변경점만 DOM에 적용한다.

 

메모리 상에서 동작하므로 기존 DOM보다 훨씬 빠르게 동작하고,

실제 렌더링이 되지 않아 연산 비용이 적다.

 

 

VDOM 사용

 

React와 같은 라이브러리를 활용해 Virtual DOM을 사용할 수 있다.

아래는 React를 사용하여 위의 코드를 개선한 예시이다.

 

<!DOCTYPE html>
<html>
<head>
  <title>개선된 Virtual DOM 예시</title>
</head>
<body>
  <div id="app"></div>

  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone/babel.min.js"></script>

  <script type="text/babel">
  
    // React 컴포넌트 정의
    class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          items: ["항목 1", "항목 2", "항목 3"],
        };
      }
      
      
      // items 배열에 요소 추가
      handleAddItem = () => {
        this.setState((prevState) => ({
          items: [...prevState.items, '새로운 항목'],
        }));
      };

      // key값을 활용해 items의 요소를 리스트로 렌더링 
      render() {
        return (
          <div>
            <ul>
              {this.state.items.map((item, index) => (
                <li key={index}>{item}</li>
              ))}
            </ul>
            <button onClick={this.handleAddItem}>항목 추가</button>
          </div>
        );
      }
    }

    // React 컴포넌트를 실제 DOM에 렌더링
    ReactDOM.render(<App />, document.getElementById('app'));
  </script>
</body>
</html>

 

1. React를 사용하여 App 컴포넌트를 정의합니다.

이 컴포넌트는 상태(state)에 items라는 배열을 갖습니다.

 

2. "항목 추가" 버튼을 클릭할 때 handleAddItem()을 호출해 상태를 업데이트 후 새 항목을 배열에 추가한다.

이때 React는 VDOM을 활용하여 이전 상태와 새 상태를 비교 후 실제 DOM에 필요한 최소한의 변경만을 적용한다.

 

3. render()에서 this.state.items 배열의 요소를 리스트로 출력해 목록을 렌더링 한다.

이때 key 속성을 사용해 렌더링 성능을 최적화하고, 변경된 항목만 업데이트한다.  

 

 

VDOM 사용 이유에 대한 간단한 설명

 

🔄 요소가 100개가 바뀌면 레이아웃을 100개씩 새로 렌더링 하는 것이 아닌

모든 변화를 하나로 묶어서 딱 한 번만 실행시킨다.

연산 횟수를 줄어들기 때문에 실제 DOM 리렌더링에 비해서 효율적이다.

 

 

Flutter Lifecycle

 

 

위젯은 생성되면 가장 먼저 생성자(Constructor)가 호출된다.

만약 위젯이 Stateful Widget이라면 createState 함수를 호출하는데,

이 함수는 위젯의 상태를 관리하기 위한 플러터 엔진의 구조적 단계이다.

 

그다음 위젯의 상태를 초기화하기 위한 함수인 initState()가 호출된다.

주로 한 번만 호출되며, 초기 설정을 수행하는 데 사용된다.

 

initState()가 완료되면 위젯은 build()가 호출되며 화면에 그려지게 된다.

build 함수는 모든 위젯이 가지고 있는 함수이며, 위젯을 반환 값으로 갖는다.

 

Stateful Widget은 setState()라는 상태를 변화시킬 수 있는 함수를 가지고 있는데,

setState함수를 호출하게 되면 위젯은 다시 build함수를 호출하게 된다. 

위젯의 상태가 변하여 다시 그려야 하는 상황엔 setState()를 호출하면 됩니다.

 

Stateless Widget은 상태 변화가 없기 때문에 initState함수도 없고 setState함수도 없다.

생성자로 전달된 값을 통하여 한번 build를 호출하고 계속 그 모습을 유지한다.

 

마지막으로 위젯은 자신이 속한 페이지를 나가거나, 프로그램에서 사라져야 한다면

dispose()를 호출하며 화면에서 사라지게 됩니다.

 

 

'무스마' 카테고리의 다른 글

다섯번째 과제 (4번째 과제 보충)  (0) 2023.09.05
네 번째 과제  (0) 2023.08.21
세 번째 과제  (0) 2023.08.13
첫 번째 과제  (0) 2023.07.31
개발 블로그 시작  (0) 2023.07.20
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
글 보관함