Updating UI with Javascript

이 장에서는 JavaScript와 DOM 메서드를 사용하여 프로젝트에 h1 태그를 추가하여 프로젝트를 빌드하기 시작합니다.

코드 편집기를 열고 새 index.html 파일을 만듭니다. HTML 파일 내부에 다음 코드를 추가합니다.

index.html

<html>
  <body>
    <div></div>
  </body>
</html>

그런 다음 나중에 타겟팅할 수 있도록 div에 고유한 ID를 부여합니다.

index.html

<html>
  <body>
    <div id="app"></div>
  </body>
</html>

HTML 파일 내부에 JavaScript를 작성하려면 스크립트 태그를 추가하세요.

index.html

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript"></script>
  </body>
</html>

이제 스크립트 태그 내부에서 DOM 메서드인 getElementById()를 사용하여 <div> 요소를 해당 id로 선택할 수 있습니다.

index.html

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
      const app = document.getElementById('app');
    </script>
  </body>
</html>

DOM 메서드를 계속 사용하여 새로운 <h1> 요소를 생성할 수 있습니다.

index.html

<html>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
      // Select the div element with 'app' id
      const app = document.getElementById('app');

      // Create a new H1 element
      const header = document.createElement('h1');

      // Create a new text node for the H1 element
      const text = 'Develop. Preview. Ship.';
      const headerContent = document.createTextNode(text);

      // Append the text to the H1 element
      header.appendChild(headerContent);

      // Place the H1 element inside the div
      app.appendChild(header);
    </script>
  </body>
</html>

모든 것이 제대로 작동하는지 확인하려면 선택한 브라우저에서 HTML 파일을 엽니다. ’개발. 미리보기. 발송.’이라는 h1 태그가 표시되어야 합니다.

HTML vs. the DOM

브라우저 개발자 도구 내부의 DOM 요소를 살펴보면 DOM에 <h1>요소가 포함되어 있음을 알 수 있습니다. 페이지의 DOM은 소스 코드와 다릅니다. 다시 말해, 원래 만든 HTML 파일과 다릅니다.

HTML은 초기 페이지 콘텐츠를 나타내는 반면 DOM은 작성한 JavaScript 코드에 의해 변경된 업데이트된 페이지 콘텐츠를 나타내기 때문입니다.

일반 JavaScript로 DOM을 업데이트하는 것은 매우 강력하지만 장황합니다. 텍스트가 있는 <h1> 요소를 추가하기 위해 이 모든 코드를 작성했습니다.

index.html

<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을 업데이트하는 방법을 알아내도록 하는 것이 좋지 않을까요?

Imperative vs. declarative programming

위의 코드는 명령형 프로그래밍의 좋은 예입니다. 사용자 인터페이스를 업데이트하는 방법에 대한 단계를 작성하고 있습니다.

하지만 사용자 인터페이스를 빌드할 때는 선언적 접근 방식이 종종 선호되는데, 이는 개발 프로세스를 가속화할 수 있기 때문입니다. DOM 메서드를 작성하는 대신 개발자가 표시하려는 내용(이 경우 텍스트가 있는 h1 태그)을 선언할 수 있다면 도움이 될 것입니다.

즉, 명령형 프로그래밍은 요리사에게 피자를 만드는 방법에 대한 단계별 지침을 제공하는 것과 같습니다. 선언적 프로그래밍은 피자를 만드는 데 필요한 단계에 대해 신경 쓰지 않고 피자를 주문하는 것과 같습니다. 🍕

react는 사용자 인터페이스를 구축하는 데 사용할 수 있는 인기 있는 선언형 라이브러리입니다.

React: A declarative UI library

개발자로서, 당신은 React에 사용자 인터페이스에 어떤 일이 일어나기를 원하는지 말할 수 있고, React는 당신을 대신하여 DOM을 업데이트하는 단계를 알아낼 것입니다.

다음 섹션에서는 React를 시작하는 방법을 살펴보겠습니다.

Additional Resources

HTML vs. the DOM
How declarative UI compares to imperative

(참고) 선언적 프로그래밍

선언적 프로그래밍은 “무엇(What) 을 할 것인가”에 집중하는 프로그래밍 패러다임입니다.. 즉, 프로그램이 어떻게(How) 동작할지에 대한 절차적인 과정을 명시하는 것이 아니라, 결과를 명확하게 기술하는 방식입니다.

1. 명령형 프로그래밍 (Imperative Programming)

명령형 방식에서는 어떻게(How) 실행할 것인지를 명확히 지정해야 합니다.

# 명령형 방식: for 루프 사용
numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
squared_evens = []

for num in numbers:
    if num % 2 == 0:  # 짝수인지 확인
        squared_evens.append(num ** 2)  # 제곱하여 추가

print(squared_evens)  # [4, 16, 36, 64, 100]

for 루프를 사용하여 단계별로 직접 구현하기 위해서 리스트를 만들고, 조건문으로 짝수 필터링, 제곱 연산 수행 후 저장합니다.

2. 선언적 프로그래밍 (Declarative Programming)

선언적 방식에서는 무엇(What)을 할 것인지를 표현합니다.

# 선언적 방식: filter() + map() 사용
numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

squared_evens = list(map(lambda x: x**2, filter(lambda x: x % 2 == 0, numbers)))

print(squared_evens)  # [4, 16, 36, 64, 100]

filter()를 사용하여 짝수만 선택하고 map()을 사용하여 제곱 연산을 적용합니다.