[React] JSX와 Portals

dee·2022년 10월 19일

JSX React portals

react

목록 보기

3/6

🤔 JSX와 portals?

JSX? JS를 의미하는 건가? 뒤에 x과 붙은 건 무슨 의미일까 궁금해진다.
portals은 react에서 어떻게 쓰이고 있는 걸까? 오늘의 공부 주제들은 흥미롭다.
예시를 학습하며 공부해보도록 하자.

JSX

UI를 가독성있게 짤 수 있는 자바스크립트를 확장한 문법.
필수는 아니지만 시각적으로 html과 비슷한 구조이기 때문에 코드를 작성하는데 도움.
표현식이므로 조건문 사용 가능.
🚨 return문 안에서는 삼항 연산자 또는 논리 연산자 사용.
태그가 자식을 갖지 않는다면 XML처럼 닫는 태그를 사용.
JSX를 토대로 컴파일되어 React.createElement로 변경됨.
논리연산자 사용시 좌항의 값이 falsy한 표현식일 때 우항의 표현식은 무시하지만 falsy한 값은 표시됨.

const App = () => {
  	const [loading, setLoading] = useState(true);
  	const [lang, setLang] = useState('ko')
  	
  	// 조건문
  	if(loading) return <div>Loading....</div>;
	return (
    	<div>
      		// return문 안에서는 삼항 또는 논리 연산자
      		{lang === 'ko'? '안녕하세요': 'Hello world'};
      
      		// 자식을 갖지 않으므로 닫는 태그 사용
      		<input type="text"/>
      	</div>
    )
}

🧐 JSX는 하나의 root로 감싸져야 되는 이유?
React.createElement를 호출할 때 기술적으로 하나의 root만 필요하기 때문이다.
아래 예시의 div가 root를 의미한다.
React.createElement('div', null, 'Hello');

JSX의 div soup

return문 안에서 하나의 root로 감싸져야 되는 기술적인 요구로 인해 react 코드를 작성하다보면 수많은 div가 중첩되는 문제가 발생한다. 이를 div soup라고 한다.
이를 해결하기 위한 방법들은 아래와 같다.

따로 props를 받아 props.children만 반환해 주는 컴포넌트를 생성.
Wrapper 컴포넌트가 두 개의 Item 컴포넌트를 반환.

// Wrapper.jsx
const Wrapper = (props) => {
	return props.children;
}

// App.jsx
const App = () => {
	return (
    	<Wrapper>
      		<Item />
      		<Item />
      	</Wrapper>
    )
}

Fragment 사용. Fragment는 노드를 따로 추가하지 않고 자식들을 그룹화.
🧷 <></>로도 Fragment를 표현할 수 있음.

const App = () => {
	return (
    	<Fragment>
      		<Item />
      		<Item />
      	</Fragment>
    )
}

Portals

사전적으로 두 개의 서로 다른 위치를 연결하는 마법이나 기술적인 문이라는 의미를 가지고 있다. 이 뜻 그대로 Portals은 react에서 다른 DOM 노드로 요소를 렌더링할 수 있도록 해준다. Portals 쓰지 않아도 문제가 되지 않지만 접근성 측면에서나 시멘틱 관점에서는 좋지 않기 때문에 이 점을 고려해서 사용해야 한다.

📍위의 개념을 가장 잘 적용할 수 있는 것은 Modal로 예시를 통해 알아보자.

index.html에 id가 root인 div이외에 div를 하나 더 생성한다.
div에 id="modal__root"를 지정.

	<!--index.html-->
	<body>
		<div id="modal__root"></div> <!--모달이 들어가는 root-->
      	<div id="root"></div>
	</body>

Modal 컴포넌트를 생성.
Modal 컴포넌트를 portal할 수 있도록 WarningModal 컴포넌트를 생성.
WarningModal 컴포넌트에서 createPortal함수 호출.
🧷 React.createPortal(전달할 컴포넌트, 컨테이너가 되는 DOM 노드)
🚨 컴포넌트를 전달할 때 props도 같이 넘겨주어야 함.

	// Modal.jsx
	const Modal = props => {
    	return (
          <>
          	<div className="dimmed__layer" onClick={props.onConfirm}></div>
          	<div className="modal__body">{props.title}</div>
          </>
        )
    }
    
    const WarningModal = props => {
    	return (
        	<>
          {React.createPortal(<Modal title={props.title} onConfirm={props.onConfirm}/>, document.querySelector('#modal__root'))}
          	</>
        )
    }

상태값에 따라 WarningModal이 보이도록 함.

// App.jsx
const App = () => {
	const [isShowModal, setIsShowModal] = useState(false);
  	const onConfirm = () => setIsShowModal(false);
    
	return (
    	<>
      		{isShowModal && <WarningModal title="warning" onConfirm={onConfirm}/>}
      		<Item />
      		<Item />
      	</>
    )
}

🍑 오늘의 공부일기

react를 공부하면서 컴포넌트화에 더 집중하는 경향이 있었다. 그러다보니 접근성과 시멘틱 마크업에 대해 신경쓰지 못했고 제대로 의미를 갖도록 마크업하는 것이 어려웠다. 이런 문제점들을 createPortal이라는 것을 통해서 한번에 해결할 수 있다니 신세계였다. Modal을 반복학습하면서 portal에 대해 익숙해지고 시멘틱 마크업을 위해 더 깊게 생각을 해야겠다.

참고 자료
https://ko.reactjs.org/docs/portals.html

dee

웹 프론트엔드 개발자

이전 포스트

[React] useState vs useReducer

다음 포스트