113. 리액트 포털 소개

프래그먼트를 사용하면 더 깔끔한 코드를 작성할 수 있다. 최종 페이지에 불필요한 HTML 요소들이 줄어든다 

또 다른 비슷한 기능을 가진 유용한 기능으로는 리액트 포털이 있다.
이것 역시 더 간결한 코드를 작성하는 데 도움이 됩니다.

 

위 코드에서 어떤 문제가 있을까?

모달 창이 스타일링만 잘 하면 나쁘지 않지만 의미적인 관점에서 별로 좋지 않다.

기본적으로 Modal은 페이지 위에 표시되는 overlay 인데, 즉 다른 모든 것들 위에 존재한다.
따라서 이것이 다른 HTML과 중첩되어 있다면 기술적으론은 스타일링 덕분에 잘 작동할 지 몰라도 좋은 코드라고 말할 수는 없다. 좋은 구조도 아니다. 스타일링이나 접근성의 관점에서 문제가 생길 수 있다

 

 

그러나 실제 DOM에서

이것을 다르게 렌더링하면

즉, 모달 HTML 내용을 일반적인 곳이 아니라

다른 곳에서 렌더링하면

왼쪽의 다시 쓴 JSX 코드는 바뀌지 않지만

렌더링된 HTML 코드는

JSX 코드와 약간 다릅니다

즉, 여기서는 모달이 폼 옆에 있지 않은 거죠

 

이렇게 하려면 리액트 포털을 사용하면 됩니다

 

HTML 코드가 렌더링 되고 나서는 JSX와는 다르다 
모달이 FORM 태그 옆에 존재하게 되지 않는다. 

그리고 이를 위해서는 리액트 포털을 이용해서 해결할 수 있다 

---

대본

프래그먼트를 사용하면 더 깔끔한 코드를 작성할 수 있습니다
최종 페이지에 불필요한 HTML 요소들이
줄어듭니다
꽤 좋은 일이죠
또 다른 유용한 기능으로는 리액트 포털이 있습니다
비슷한 일을 합니다
이것 역시 더 간결한 코드를 작성하는 데 도움이 됩니다
이런 예를 만들어 보았습니다
두 개의 요소, 두 개의 컴포넌트가 나란히 있습니다
Mymodal과 MyInputForm이 프래그먼트로 둘러싸여 있죠
그러나 프래그먼트는 여기서 중요하지 않습니다
이미 배웠었죠
실제 DOM에 들어가는 내용은
이렇게 보일 겁니다
섹션과 h2 태그가 있을 수 있는데요
다른 컴포넌트에서 온 거죠
왜냐하면 왼쪽의 코드는
말하자면 우리의 애플리케이션에 있는
많은 컴포넌트 중 하나일 뿐입니다
갈색으로 표시된 부분은
모달인데요
리액트가 DOM으로 렌더링하는
부분입니다
주황색 부분은 폼입니다
뭐가 문제일까요?
엄밀히 따지면 문제 없습니다
하지만 이 코드에는 뭔가 별로
좋지 않은 게 있어요
그건 바로 모달입니다
DOM에 렌더링되는 이 모달 코드는
엄밀히 말하자면, 작동은 합니다
제대로 스타일링 하기만 하면
모달처럼 보일 것입니다
앞에서 만들었던 데모 프로젝트에서 봤듯이요
그러나 의미적인 관점이나
간결한 HTML 구조를 갖췄는지의 관점으로 보면
별로 좋지 않습니다
왜일까요?
왜냐하면 기본적으로 모달은
페이지 위에 표시되는
오버레이이기 때문입니다
모달은 전체 페이지에 대한 오버레이입니다
따라서 당연히 다른 모든 것 위에 있습니다
따라서 이것이 만약 다른 HTML 코드 안에 중첩되어 있다면
기술적으로는 스타일링 덕분에 작동할지는 몰라도
좋은 코드는 아닌 거죠
좋은 구조도 아니죠
문제가 생길 수도 있습니다
스타일링이나 접근성의 관점에서요
왜냐하면 만약 오버레이 내용이 중첩되어 있으면
예를 들어 스크린 리더가
렌더링되는 HTML 코드를
해석할 때
이걸 일반적인 오버레이라고 인식하지 못할 수도 있습니다
왜냐하면 CSS 스타일링은 그다지 큰 역할을 하지 않기 때문입니다
또한 의미적인 관점이나
구조적인 관점으로 보면
이것은 HTML 코드 안 깊은 곳에 자리잡고 있습니다
따라서 이 모달이
다른 모든 내용에 대한 오버레이인지 명확하지 않습니다
이것은 모달의 경우에만 해당되는 것이 아닙니다
비슷한 문제가 사이드 드로어나 다이얼로그와 같은
일반적으로 모든 종류의 오버레이나
관련 컴포넌트에서 일어날 수 있습니다
이건 버튼을 만들 때
단순히 버튼처럼 div를 스타일링하고
이벤트 리스너를 추가하는 것과 비슷하죠
작동은 하겠지만, 좋은 방법은 아닙니다
접근성 측면에서도 좋지 않고요
다른 개발자가 이걸로 작업해야 하는 경우에도
별로 좋지 않죠, 이건 그냥 좋지 않은 아이디어입니다
일반적으로 웹 개발에서는
HTML과 CSS, 자바 스크립트는
너무 유연하기 때문에 많은 것이 작동하도록
할 수 있습니다, 하지만 그렇다고 해서
작동한다는 이유만으로
좋은 구현이라고 할 수 없습니다
이렇게 활용하는 것이 좋다고 할 수는 없습니다
사실 다른 리액트 개념을 사용하여
이 문제를 해결할 수 있습니다
오버레이 내용이 있는 모달이
깊게 중첩되면 안 되는 문제를 해결할 수 있습니다
포털을 사용하여
왼쪽에 있는 구조를 유지할 수 있습니다
계속 우리가 원하는 대로
컴포넌트를 작성할 수 있습니다
데이터를 전달하거나 할 때 마찰이
없도록요
그러나 실제 DOM에서
이것을 다르게 렌더링하면
즉, 모달 HTML 내용을 일반적인 곳이 아니라
다른 곳에서 렌더링하면
왼쪽의 다시 쓴 JSX 코드는 바뀌지 않지만
렌더링된 HTML 코드는
JSX 코드와 약간 다릅니다
즉, 여기서는 모달이 폼 옆에 있지 않은 거죠
이렇게 하려면 리액트 포털을 사용하면 됩니다
이제 포털이 어떻게 작동하는지 알아봅시다