이제 WebStorm과 Rider를 비상업용으로 무료 제공 | JetBrains 블로그
The JetBrains Blog
리액트에서 슬롯 컴포넌트 사용하기
슬롯 컴포넌트의 개념은 'Vue.js' 진영에서는 주로 사용되는 개념이지만, 'React.js' 진영에서는 자주 다뤄지는 개념은 아닌듯 합니다.
개인적으로 'Vue.js'로 FE 개발을 먼저 접한 입장에서는 'Vue.js'에서는 슬롯 컴포넌트를 통해 처리할 수 있는 상황을 'React.js‘에서는 props를 통해 컴포넌트를 전달해야 하는 형태가 그리 썩 마음에 들지 않았습니다.
이러한 아쉬움을 해소하고자, 그리고 혹여나 저와 비슷한 아쉬움을 느끼고 있는 분이 있을까 하여 현재 작업중인 'React.js' 유틸 라이브러리에 관련 기능을 추가하여 배포하였습니다!
기존에 주로 사용되는 네임스페이스 패턴과 비슷한 방식으로 코드를 작성할 수도 있고, 또는 훅 형태로 작성할 수도 있습니다.
아직 문서화나 코드 상 부족한 부분이 많지만, 혹시나 이러한 개념에 관심이 있던 개발자 분들이라면 한번 구경하러 와주시면 감사드리겠습니다! 😃
https://seungrodotlee.github.io/dot/overeact/slots/overview
다음 내용이 궁금하다면?
이미 회원이신가요?
2024년 3월 21일 오전 4:07
댓글 3
샘플을 보다보니 pug에서 보던 패턴이네요. block 키워드를 이용해서 template을 상속하거나 다른 예약어와 혼합해서 지정하는 방식이었는데... 그러고보니 vue v1에서는 pug를 같이 사용했다는 말이 기억나네요. 저는 저 패턴이 태생적인 한계로 문제가 있다고 봐서 jsx를 선호했었는데, 이렇게 보니 신기하네요.
@상현 안녕하세요! pug는 사용해본적이 없었어서, 그언 히스토리는 모르고 있었네요!! 혹시 어떤 점이 한계점이라고 생각하셨는지 궁금해요!
@상현 jsx는 빌트인 인자인 children 외에도 props를 통해 또 다른 jsx 코드 블록을 넘겨주는 게 가능한데 반해, pug는 block 키워드(children)에만 허용되고, 인자로는 넘겨줄 수 없어요. 또한 프래그먼트 문법이 없어서 병렬로 된 구조의 html 블록을 내려주고 싶다면 이것 자체를 하나의 mixin으로 만들어서 붙여야죠. 결정적으로 문법 상 인덴트에 기초하면서 클로징 태그라는 것이 없죠. 엔진 개발자들의 설계가 애초에 그러한 부분에 고려가 빠져있었거나 자신들의 아이디어 - 아마도 간결한 html 작성? - 과 맞지 않는 부분이었을 거라고 생각하는데, 그래서 jsx와 같은 방식을 채용하는 게 불가능했을 거예요. pug에서는 저런 패턴을 모달이나 레이아웃 프레이밍에 사용했었고, 제품 아이템 컴포넌트를 만들 때 정말 복잡한 과정으로 욱여 넣었던 기억이 나네요.
함께 읽은 게시물
🎉 벤처기업 인증 완료! 🎉
... 더 보기타인을 높이면 자신이 높아진다
사람들은 대체로 자신을 높이고 싶어 한다. 그래서 남들이 쉽게 하지 못하는 일에 도전하기도 하고, 독보적인 성과를 내려고 노력하기도 한다. 때로는 타인을 억압하거나 폭력을 행사함으로써 자신을 높이려는 사람들도 보인다.
... 더 보기< 길을 잃기 위해 도서관에 갑니다 >
1. 이 세계에 존재하는 책의 99.99%를 저는 아직 읽은 적이 없습니다. 그 사실 앞에서 망연자실해집니다.
