만약 애옹? 뒤에 무지하게 긴 어쩌고 저쩌고 우와아앙
이라는 문구가 저장된 변수가 있다면 이걸 진짜 엄청 많이 여러번 그리고 싶으면 지존 길게 태그를 그때마다 써야할까??
아니다!! 리액트는 신이라서 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);
와~!! 진짜 완성!! 까먹지 말자!!