inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

코어 프런트엔드 UI - Part 2

모달 (2/4) createPortal 활용

모달만드는 방식 질문

해결된 질문

263

성민석

작성한 질문수 21

0

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

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

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

제가 궁금한것은

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

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

react typescript dom ui vanilla-js

답변 1

1

정재남

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

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

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

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

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

챌린지 시작일 문의

0

14

0

17강 강의에 목데이터 첨부파일이 없습니다.

1

12

1

줄바꿈 시 \ 필수인가요?

0

14

2

2605 이후 최신 클로드코드 강의 추가 부탁드립니다.

0

11

2

커리큘럼 문서 제공받을 수 있을까요?

0

19

1

ThemeProvider를 이용해서 NextThemeProvider를 따로 생성하여 Layout.tsx에 적용하는 이유는 뭘까요?

0

13

1

인덱스드 엑세스타입 실무질문

0

13

2

mission 09-01 을 수행할 수 없어요

0

20

1

outputStyle 설정하는데 어디서 문제일까요?

0

21

3

test.txt파일 삭제시 rm명령어이니 클로드의 질문이 있어야 한다고 하셨는데

0

13

2

검은화면

0

23

3

강의교환링크안열려요.....

0

22

2

제네릭을 사용하실 때 콤마

0

186

2

popover createPortal 방식에서

0

177

2

스낵바를 만들 때 snackBarContext와 snackBarSetContext

0

173

2

snackbar를 createportal를 썻을 때 갯수 조절이 가능한가요?

0

209

1

useCallback, useMemo의 차이에 대해서 궁금합니다.

0

394

1

createPortal 활용해서 modal 만들 때 활용한 MutationObserver 코드 관련 질문

0

384

3

강의자료 (보일러플레이트) 다운로드 관련 질문

0

280

1

캐러셀 동작원리

0

329

2

dropdown 내부에서 data의 타입을 알아야 할까요?

0

222

1

Provider를 외부에 노출하는 것보다 내부 로직으로 숨기는 것은 어떤가요?

0

306

2

keyEventMap를 전역에 구현하신 이유가 궁금합니다!

0

291

2

테일윈드로 포탈로 모달작성시 뒤에 클릭이 안됩니다

1

332

2