인프런 커뮤니티 질문&답변

역시 격려와 칭찬은 롱런에 크나큰 양분이 되는것같네요^^ 답글 감사하구요

주말 마무리잘하셔요☺

1번, 2번으로 정리하신 내용 모두 제가 봤을 때는 문제가 없네요!

Truestart 님께서 잘 정리해 주셔서 이 내용을 다른 분들도 많이 보셨으면 좋겠다는 생각이 드네요.

감사합니다~👍

세상에나... 디테일한 설명 감사드립니다!

저의 상상력이 문제였네요 ㅎㅎ
역시 외딴길로 빠지면 되돌아 나오기가...
Vue 를 사용해보지 않아서 의문만 늘어가는게 Vue 도 나중에 공부해야겠어요..
강의 일부분의 분량을 다시 설명해주셨군요. 리스팩합니다!!
감사한 마음으로 궁금했던 부분과 윗 글을 상황별로 다시 요약정리 해보았습니다.

1. Vue 컴포넌트
   1. `최상위요소` 정의
      • • <template> 문에서, 직계 자식태그를 `최상위 요소`라고 한다
        • 최상위 요소는 `하나`만 작성이 가능하다( 추가 설정시 다중작성 가능 )
   2. 전제상황 - Parent 에서 <child > 요소에 `전역속성`지정 시
      
      1. Child `최상위 요소`에 전역속성이 `없다`면
         
         • Parent 에 선언된 `전역속성`을 내려받는다
           
           
      2. Child `최상위 요소`에 전역속성이 `있다`면
         
         • Child 에 이미 선언된 `최상위 요소`의 `전역속성`은
           Parent 에서 설정한 값으로 덮어 씌워진다( 기존 값이 없어지므로, 충돌이라고도 함 )
           
           
2. Svelte 컴포넌트
   1. `최상위요소` 정의
      • • 컴포넌트 직속 `요소들`을 `최상위 요소`라 한다.
          따라서, 추가설정 없이 여러 `최상위 요소`를 포함하는 구조이다.
          
          
   2. Parent 에서 <child > 요소에 `전역속성`지정 시
      1. • 최상위 요소가 다수이므로, 적용될 곳이 모호하므로,
           자식 컴포넌트로 속성을 내려주는 기능을 제공하지 않는다.

글로 적으려니 공이 많이 들긴하네요..
그래도 이렇게 정리하는편이 나중에 기억해 내기가 편하더라구요..
혹시 또; 문제가 있어서 글을 남겨주신다면 넘나 감사할것 같습니다.

고맙습니다!

Truestar 님 안녕하세요~
주말에도 공부하시는 건가요?!👍
역시 항상 응원합니다!!

질문하신 내용에 대해서 답변을 드리겠습니다.
Truestar 님께서 조금 복잡하게 생각하시는 듯한데요,
제가 강의에서 설명드린 내용과 의도는 간단합니다. 

먼저 Vue의 경우 아래 그림과 같이(질문하셔서 바로 그려봤어요~😉 ),
컴포넌트 내 템플릿 구문에 최상위 요소가 하나만 있어야 합니다.
물론 다중 요소를 삽입할 방법이 있긴 합니다만 여기서는 차치하고,
기본적으로 컴포넌트 사용 시 적용되는 Props가 그 최상위 요소에 직접 연결되는 구조이다 보니,
대표적 예약어인 class, id, title, style 같은 원래 HTML 속성에 사용하는 이름들은, Props 작명으로 피하는 것이 좋겠다는 것이었습니다.
따라서 중복 충돌이 무조건 생기는 건 아니고, '생길 수 있다' 정도로 이해하시면 좋지 않을까 합니다.
그리고 오히려 따로 명시하지 않아도 컴포넌트를 사용할 때 적용한 Props가 요소에 자동으로 연결되는 것이라 편한 경우도 꽤 있습니다.

반면에 Svelte의 경우 아래 그림과 같이 컴포넌트 내 템플릿 구문에 요소를 직접 여러 개 사용할 수 있습니다.
저는 이 요소들을 컴포넌트 안에 최상위에 있는 요소라는 의미로 '최상위 요소'라고 불렀습니다만,
이 부분에서 조금 헷갈리신 건 아닌지 죄송하네요 ㅠㅜ
결국 Svelte는 컴포넌트가 하나의 요소와 자동 연결된 구조가 아니다 보니,
적용할 Props는 수동으로 직접 연결해서 써야 한다는 장점 겸 단점이 있습니다.
그래서 HTML 속성 이름과 중복돼도 문제가 없고 충분히 관리가 가능하다 정도의 의미였습니다.

원래 Vue를 써오던 입장에서는 이 방식이 가끔 불편하면서도, 오히려 신경을 안 써도 돼서 편하기도 합니다.
오히려 Vue의 경우 예전부터 다중 최상위 요소를 사용할 수 있게 해달라는 요청이 많았던 것으로 알고 있어서,
이런 부분은 직접 명시해야 하는 조금은 불편한 단점이면서도, 차별성 있는 Svelte의 또 다른 장점이기도 합니다.

그리고 말씀하신 DocumentFragment의 경우 직접 DOM과 연결하지 않고도 요소 생성 및 관리가 가능한,
단지 Svelte 안에서 컴포넌트를 관리하는 방법으로 사용하는 것뿐이지 최상위 요소와는 직접 관련은 없습니다.
그리고 다른 프레임워크들도 내부적으로 사용하는 아주 일반적인 API입니다~

혹시 내용이 이해가 안되시거나,
제가 잘못 이해하고 답변드린 부분이 있다면 다시 질문 남겨주시면 감사합니다.
"틀린개념에 후시딘과 반창고를 부탁드려도 될까요?"라는 표현이 굉장히 시적이네요~~☕

그럼 즐거운 주말 보내세요!
감사합니다.