-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
`title` props 중복 부분, `최상위 요소`개념 질문입니다
21.01.24 01:39 작성 조회수 180
1
Vue 와 Svelte 의 Props 작명 관례을 자세하게 설명해 주셨어요.
Svelte 와 관련되지 않은 부분이라 남기기 고민스러웠지만, 내부구조 비교 영역이라 생각이되어 질문을 남기게 되었습니다.
- Vue.js
-
- `title` 중복에 대한 설명부분에서
- `컴포넌트 내 하위요소들은 최상위 요소에 연결되어 있습니다` 하고 말씀하신부분의
- `최상위요소`라 함은`HTMLElement` 를 뜻하는 건가요??
- 그래서 `title`Attr 이 중복 충돌이 생긴다로 이해했습니다.
-
- Svelte
-
- 스벨트 컴포넌트에서 말하는 `최상위 요소`는 DocumentFragment 인가요?(bundle.js 의 컴포넌트 생성부를 보니 사용하더라구요)
-
틀린개념에 후시딘과 반창고를 부탁드려도 될까요?
읽어주셔서 감사합니다.
답변을 작성해보세요.
1
1
HEROPY
지식공유자2021.01.24
1번, 2번으로 정리하신 내용 모두 제가 봤을 때는 문제가 없네요!
Truestart 님께서 잘 정리해 주셔서 이 내용을 다른 분들도 많이 보셨으면 좋겠다는 생각이 드네요.
감사합니다~👍
1
Truestar
질문자2021.01.24
세상에나... 디테일한 설명 감사드립니다!
저의 상상력이 문제였네요 ㅎㅎ
역시 외딴길로 빠지면 되돌아 나오기가...
Vue 를 사용해보지 않아서 의문만 늘어가는게 Vue 도 나중에 공부해야겠어요..
강의 일부분의 분량을 다시 설명해주셨군요. 리스팩합니다!!
감사한 마음으로 궁금했던 부분과 윗 글을 상황별로 다시 요약정리 해보았습니다.
- Vue 컴포넌트
- `최상위요소` 정의
-
- <template> 문에서, 직계 자식태그를 `최상위 요소`라고 한다
- 최상위 요소는 `하나`만 작성이 가능하다( 추가 설정시 다중작성 가능 )
-
- 전제상황 - Parent 에서 <child > 요소에 `전역속성`지정 시
- Child `최상위 요소`에 전역속성이 `없다`면
- Parent 에 선언된 `전역속성`을 내려받는다
- Parent 에 선언된 `전역속성`을 내려받는다
- Child `최상위 요소`에 전역속성이 `있다`면
- Child 에 이미 선언된 `최상위 요소`의 `전역속성`은
Parent 에서 설정한 값으로 덮어 씌워진다( 기존 값이 없어지므로, 충돌이라고도 함 )
- Child 에 이미 선언된 `최상위 요소`의 `전역속성`은
- Child `최상위 요소`에 전역속성이 `없다`면
- `최상위요소` 정의
- Svelte 컴포넌트
- `최상위요소` 정의
-
- 컴포넌트 직속 `요소들`을 `최상위 요소`라 한다.
따라서, 추가설정 없이 여러 `최상위 요소`를 포함하는 구조이다.
- 컴포넌트 직속 `요소들`을 `최상위 요소`라 한다.
-
- Parent 에서 <child > 요소에 `전역속성`지정 시
-
- 최상위 요소가 다수이므로, 적용될 곳이 모호하므로,
자식 컴포넌트로 속성을 내려주는 기능을 제공하지 않는다.
- 최상위 요소가 다수이므로, 적용될 곳이 모호하므로,
-
- `최상위요소` 정의
글로 적으려니 공이 많이 들긴하네요..
그래도 이렇게 정리하는편이 나중에 기억해 내기가 편하더라구요..
혹시 또; 문제가 있어서 글을 남겨주신다면 넘나 감사할것 같습니다.
고맙습니다!
1
HEROPY
지식공유자2021.01.24
Truestar 님 안녕하세요~
주말에도 공부하시는 건가요?!👍
역시 항상 응원합니다!!
질문하신 내용에 대해서 답변을 드리겠습니다.
Truestar 님께서 조금 복잡하게 생각하시는 듯한데요,
제가 강의에서 설명드린 내용과 의도는 간단합니다.
먼저 Vue의 경우 아래 그림과 같이(질문하셔서 바로 그려봤어요~😉 ),
컴포넌트 내 템플릿 구문에 최상위 요소가 하나만 있어야 합니다.
물론 다중 요소를 삽입할 방법이 있긴 합니다만 여기서는 차치하고,
기본적으로 컴포넌트 사용 시 적용되는 Props가 그 최상위 요소에 직접 연결되는 구조이다 보니,
대표적 예약어인 class, id, title, style 같은 원래 HTML 속성에 사용하는 이름들은, Props 작명으로 피하는 것이 좋겠다는 것이었습니다.
따라서 중복 충돌이 무조건 생기는 건 아니고, '생길 수 있다' 정도로 이해하시면 좋지 않을까 합니다.
그리고 오히려 따로 명시하지 않아도 컴포넌트를 사용할 때 적용한 Props가 요소에 자동으로 연결되는 것이라 편한 경우도 꽤 있습니다.
반면에 Svelte의 경우 아래 그림과 같이 컴포넌트 내 템플릿 구문에 요소를 직접 여러 개 사용할 수 있습니다.
저는 이 요소들을 컴포넌트 안에 최상위에 있는 요소라는 의미로 '최상위 요소'라고 불렀습니다만,
이 부분에서 조금 헷갈리신 건 아닌지 죄송하네요 ㅠㅜ
결국 Svelte는 컴포넌트가 하나의 요소와 자동 연결된 구조가 아니다 보니,
적용할 Props는 수동으로 직접 연결해서 써야 한다는 장점 겸 단점이 있습니다.
그래서 HTML 속성 이름과 중복돼도 문제가 없고 충분히 관리가 가능하다 정도의 의미였습니다.
원래 Vue를 써오던 입장에서는 이 방식이 가끔 불편하면서도, 오히려 신경을 안 써도 돼서 편하기도 합니다.
오히려 Vue의 경우 예전부터 다중 최상위 요소를 사용할 수 있게 해달라는 요청이 많았던 것으로 알고 있어서,
이런 부분은 직접 명시해야 하는 조금은 불편한 단점이면서도, 차별성 있는 Svelte의 또 다른 장점이기도 합니다.
그리고 말씀하신 DocumentFragment의 경우 직접 DOM과 연결하지 않고도 요소 생성 및 관리가 가능한,
단지 Svelte 안에서 컴포넌트를 관리하는 방법으로 사용하는 것뿐이지 최상위 요소와는 직접 관련은 없습니다.
그리고 다른 프레임워크들도 내부적으로 사용하는 아주 일반적인 API입니다~
혹시 내용이 이해가 안되시거나,
제가 잘못 이해하고 답변드린 부분이 있다면 다시 질문 남겨주시면 감사합니다.
"틀린개념에 후시딘과 반창고를 부탁드려도 될까요?"라는 표현이 굉장히 시적이네요~~☕
그럼 즐거운 주말 보내세요!
감사합니다.
답변 4