뉴스 레터를 읽기 전 알아야할 배경 지식
HTML 속성 vs DOM 프로퍼티
- HTML 속성과 DOM 프로퍼티는 모두 HTML 요소의 특성을 나타내지만, 다음과 같은 차이가 있음
- 차이점
- HTML 속성: HTML 문서에 직접 작성되는 추가 정보로, 대소문자를 구분하지 않고 문자열로 표현됨
- DOM 프로퍼티: HTML 요소가 DOM 객체로 변환되면서 생성되는 동적 속성으로, 대소문자를 구분하고 다양한 데이터 타입을 가질 수 있음
- 즉, HTML 속성은 HTML 문서 자체에 존재하는 정적인 속성인 반면, DOM 프로퍼티는 브라우저가 HTML을 파싱하여 생성한 동적인 객체 속성임
뉴스레터 내용 중 어려웠던 부분
1. '핵심 차이점' 꼭지의 '직렬화'의 의미
HTML 속성은 HTML 문서에 직접 작성되므로 직렬화되지만 DOM 프로퍼티는 HTML 문서에 직접 작성되지 않으므로 직렬화되지 않는다는 내용이 있었으나 나는 이 내용에서 '직렬화'의 뜻을 몰랐음
HTML 직렬화의 의미
- 직렬화(Serialization)란 객체의 상태를 바이트 스트림으로 변환하여 저장하거나 전송하는 과정을 의미함
- HTML에서 직렬화는 DOM 요소의 속성(Attribute)을 문자열로 변환하는 과정을 말함
HTML 요소의 속성과 프로퍼티
- HTML 요소는 속성(Attribute)과 프로퍼티(Property)로 구성됨
- 속성은 HTML 태그 내에 정의되는 키-값 쌍입니다. 예를 들어
<div foo="bar">...</div>에서foo="bar"가 속성임 - 프로퍼티는 DOM 객체의 속성으로, JavaScript에서 접근할 수 있는데 예를 들어
div.hello = 'world'에서hello가 프로퍼티임
직렬화 과정
div.setAttribute('foo', 'bar')로 설정한 속성foo="bar"는 HTML 직렬화 과정에서<div foo="bar"></div>와 같이 문자열로 출력됨- 반면
div.hello = 'world'로 설정한 프로퍼티hello는 HTML 직렬화 과정에서 포함되지 않음 - 따라서 브라우저 개발자 도구의 요소 패널에서는 프로퍼티가 아닌 요소의 속성만 볼 수 있음
요약
- HTML 직렬화는 DOM 요소의 속성을 문자열로 변환하는 과정임
- HTML 요소는 속성과 프로퍼티로 구성되며, 직렬화 과정에서 속성만 포함됨
- 따라서 브라우저 개발자 도구에서는 요소의 프로퍼티가 아닌 속성만 확인할 수 있음
2. renderToString() 메서드
리액트는 프로퍼티를 선호하는 정해진 경우 외에도 속성을 설정합니다. 따라서 render-to-string 메서드의 로직이 비슷해집니다.
renderToString() 메서드란?
- renderToString() 메서드는 React 컴포넌트를 HTML 문자열로 렌더링하는 데 사용됨
- renderToString을 호출하면 앱을 서버 응답과 함께 보낼 수 있는 HTML 문자열로 렌더링할 수 있음
- 이 메서드는 주로 서버 측 렌더링(Server-Side Rendering, SSR)에 사용됨
이 부분은 이해가 잘 안된다...나중에 다시 읽어봐야 겠음
회고
-
getter와 setter에 대해 알아야 겠다.
- JavaScript에서 Getter와 Setter는 객체 프로퍼티의 값을 가져오고 설정하는 메서드임
-
input 태그에서 value 속성은 기본값을 구성하는 반면, value 프로퍼티는 현재 상태를 제공한다는 사실이 신기했고, 이 사실을 내가 코드를 짤 때는 어떻게 이용해야 할까?
-
아래 내용이 흥미로웠음
라액트가 속성 처럼 보이는 것에 class 대신 className을 사용하는 것이 대중화되었다는 것입니다. 그러나 속성 이름이 아닌 프로퍼티 이름을 사용하더라도 리액트는 내부적으로 class 속성을 설정합니다.
-
React와 Next.js를 주로 사용하다 보니 프로퍼티와 속성의 차이에 대해서는 전혀 생각해보지 않았는데 뭔가 나도 몰랐던 가려운 부분을 조금 긁은 느낌? 이런 식으로 DOM에 대해 더 파헤쳐 보고 싶다.
뉴스레터 링크
아이디어와 구현을 좋아합니다!