React createPortal정리
리액트로 pj를 할 때, 음.. css적으로 좀 꼬일 때가 있긴 했었다. 그럴때면 그냥 막?노동식으로 css를 하나하나 다 고쳐줬고, 될 때까지 수정을 했는데.. 이런 기능이 있었네..ㅎ...
처음에는 포탈이 뭐여라면서 머리로부터 받아드리기 싫어했.. 새로운 거 배울 때마다.. 머리가 좀 거부하는 느낌이랄까..
그럴때마다 나를 다그치며 이건 순전히 내 뇌의 장난이야. 운동과 같이 뇌에서도 근육이 키워지려고 힘들어하는 것뿐이야라며 나를 다그친다..
각설하고 공부한 내용 정리해보자.
portal을 사용하는 이유 : css 스타일 충돌을 피하기 위해 dom트리 밖으로 모달을 분리함.
-> 즉, 돔 트리 구조와 독립적인 위치에서 컴포넌트를 렌더링할 수 있게 해주는 역할
의문점 : 굳이 왜.. 다른 곳에서 렌더링을 해야하지..? 내가 생각하기에는 어차피 모달을 다른 컴포넌트로 만들고 그 만의 자체 css를 적용하기 때문에, 모달 컴포넌트를 다른 컴포넌트에 사용해도(부모-자식(모달)관계) css적으로 큰 이슈가 발생하지 않을 것이라고 생각
gpt생각? : 어차피 Import하는 구조이면 렌더링되는 위치가 부모의 dom트리 내이다. 즉 css 충돌을 피할 수 없다.
createPortal을 사용하면 모달을 부모 컴포넌트의 dom트리 밖에서 렌더링하기 때문에 부모의 css 스타일에 영향을 받지 않도록 할 수 있다.
포탈을 사용하는 다양한 이유 : 부모 컴포넌트의 특정 스타일, 예로 z-index, position, overflow: hidden 같은 스타일이 있을 때, 자식 컴포넌트가 그의 레이아웃에 갇힐 수 있다. 이 때, 포탈을 이용해서 독립적으로 스타일을 적용할 수 있다.
포탈이 필요한 상황 :
- 모달, 툴팁, 드롭다운 : 이런 ui요소는 부모의 흐름과 무관하게 화면 상단에 떠 있는 느낌을 주어야 하기 때문에 부모 dom트리 밖에서 렌더링하는 것이 좋다.
- 알림 (notification) : 부모 컴포넌트와는 상관없이 화면의 특정 위치에 고정되어 있어야 할때, 이를 사용해서 부모 dom 트리 밖에서 렌더링할 수 있다.
- 유연한 구조 : createPortal을 사용하면 렌더링 위치를 자유롭게 선택할 수 있기 때문에 여러 컴포넌트들이 복잡한 상호작용을 할 때도 유연한 ui를 구성할 수 있다.
결론 :
createPortal은 단순히 CSS 충돌을 막는 것 이상으로 DOM 트리 구조와의 독립성, 레이아웃 문제 해결, 퍼포먼스 최적화, 유연한 UI 구성, 접근성 및 이벤트 처리 문제까지 해결하는 데 사용됨.
그래서 모달, 툴팁, 드롭다운 같은 UI 요소를 만들 때 createPortal을 사용하는 것이 일반적이에요. 부모 트리와 독립적인 위치에서 렌더링할 필요가 있는 경우에 적합