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

성민석님의 프로필 이미지
성민석

작성한 질문수

[React / VanillaJS] UI 요소 직접 만들기 Part 2

모달 (2/4) createPortal 활용

모달만드는 방식 질문

해결된 질문

작성

·

143

0

안녕하세요 재남님 강의 너무 잘듣고 있습니다

이번 강의 듣고 생각이 드는게 저는 지금까지 모달을 만들때 각각의 모달을 완성본으로 만들고 모달을 부르는 트리거버튼이나 그,런것에 상태를 주고 상태의 변경에따라 그 아래에 그리는 방식으로 모달을 구현했습니다

이번강의도 보면 비슷하긴한데 모달을 만드는곳에서 모든것을 만드는것이 아니라 모달이라는(컴파운드 패턴..? 사실 이건 처음봐서 혼란스럽네요...ㅎㅎ)컴포넌트에서 기본 적인 css와 칠드런등을 만들어놓고 모달에서는 이것들을 가져와서 완성본 모달을 만드는것으로 이해를 했습니다

제가 궁금한것은

  1. 실무에서는 보통 이렇게 만드는지 궁금합니다

  2. 이렇게 만드는것의 장점이 있을까요?(찾아보니 재사용성이 좋다고 하는데 이부분이 크게 와닿지가 않네요..)

답변 1

1

정재남님의 프로필 이미지
정재남
지식공유자

보통 하나의 사이트에서 모달을 사용하는 곳이 여러곳이 있더라도
그 디자인은 사이트의 통일성 차원에서 동일하게 가져갑니다.

그런데 모달은 각 특성에 따라
헤더(타이틀, X버튼)가 있는 경우도 있고 없는 경우도 있고,
푸터에 버튼이 하나 필요한 경우, 두 개 필요한 경우, 없는 경우도 있을 수 있습니다.

이처럼 다양한 요구사항이 있을 때,
모달을 사용하는 각각의 컴포넌트에서 각 요구사항에 맞춘 모달을 새로 생성하는 일은
꽤나 번거로울 뿐 아니라 재사용성 측면에서도 바람직하지 않습니다.

그럴 때 Compound 컴포넌트가 유용한 것이죠.
반복은 줄이고 재사용성은 높이고!
레고 조립하듯이 필요한 것들만 골라 조립해서 완성본을 만드는 방식입니다.

'실무에서 많이 쓰느냐' 하면, 회사마다 다를 것입니다.
이 문제를 고민하고 해결하고자 노력한 회사라면 많이 쓸 것이고,
크게 중요하게 여기지 않거나 그보다 더 급히 처리할 문제가 산적한 회사라면 아직 도입하지 못하고 있겠죠.
혹은 다른 대안(라이브러리 사용 등)으로 인해 고민의 필요성 자체가 없을 수도 있고요.

성민석님의 프로필 이미지
성민석

작성한 질문수

질문하기