[React, 냥짤메이커] 화면에 많이많이 그리고 싶으면??

·2022년 1월 26일
0

냥짤메이커

목록 보기
2/5
post-thumbnail

만약 애옹? 뒤에 무지하게 긴 어쩌고 저쩌고 우와아앙 이라는 문구가 저장된 변수가 있다면 이걸 진짜 엄청 많이 여러번 그리고 싶으면 지존 길게 태그를 그때마다 써야할까??

아니다!! 리액트는 신이라서 JSX를 사용해 React 내부에서 JS 문법을 사용할 수 있다.

<script>
const nyang = (
  	<li>
      애옹?처럼 보이지만 진짜 무지하게 긴 어쩌고 저쩌고요
  	</li>
  );
  
const yaong = (
  <ul>
    {nyang}
    {nyang}
    {nyang}
    {nyang}
    {nyang}
  ...
  )
 </ul>
</script>

이렇게 {}을 감싸주면 된다!!
값이 나오는Javascript 표현식도 가능한

이자식 천재인듯??

근데 인생 일대의 고민.. 만약 render하고싶은 요소가 두개면 어쩌란 말이냐?
아~그럼 아까 배운거처럼 {}로 감싸서 변수에 저장하면 되지!!

const screen = (
	{nyaong}
	{yaong}
);

ReactDOM.render(screen, here);

또 오류야 또..!
앗차차.. render는 최상위 태그 단 하나만!! 해준다.

const screen = (
	<div>
  	{nyaong}
  	{yaong}
  	</div>
)

ReactDOM.render(screen, here);

와~!! 진짜 완성!! 까먹지 말자!!

profile
어?머지?

0개의 댓글