Skip to main content

One post tagged with "멀티"

View All Tags

· 2 min read

멀티 Element 생성하기

div className="root"에 어떻게 여러개의 element를 넣으 수 있을까 ?

<div id="root">

const rootElement = document.getElementById('root')
const element = (
<div className='box' children= {[
React.createElement('h1', null, 'Hi'),
React.createElement('h3', null, 'Bye')
React.createElement('h5', null, 'Hello')
]}
)
  • children 속성에 여러개의 element를 넣을 수 있기 때문에 createElement를 사용하여 여러 개의 element를 생성할 수 있다
  • 단 위와 같이 생성할 경우 아래와 같은 형태가 된다
<div className='root'><div className='box'> </div></div>
  • 만약 root 밑에 div 태그 없이 h1, h3, h5를 생성하고 싶다면 React.Fragment를 사용한다
const element = ( <React.Fragment children={
[
React.createElement('h1', null, 'Hi'),
React.createElement('h3', null, 'Bye')
React.createElement('h5', null, 'Hello')
]
}
)
  • 위와같이 생성할 경우 아래와 같은 형태가 된다
<div className='root'><h1>Hi</h1><h3>Bye</h3> </h5>Hello</h5></div>
  • React.Fragment는 부모로써 감싸주는 역할을 한다
const element = ( <React.Fragment> {
[
<h1>Hi</h1>,
<h3>Bye</h3>,
<h5>Hello</h5>
]
}
</React.Frament>
)
  • children 속성을 제거하고 JSX 를 사용하여 위와 같이 표현할 수도 있다
const element =
<>
<h1>Hi</h1>
<h3>Bye</h3>
<h5>Hello</h5>
<>
)
  • 위와 같이 는 React.Fragment를 의미한다

참조

  • 패스트 캠퍼스 온라인 강좌(한 번에 끝내는 React의 모든 것 초격자 패키지 Online)