230613) React 부모자식 컴포넌트와 JSX의 문법

React 문법 내에서 return을 할 때 한 줄일 때는 소괄호가 따로 필요 없지만, 한 줄을 초과할 경우 소괄호가 필요하다

그리고 JSX 식에는 부모요소가 한 가지만 있어야 하고, retrun 문의 최상단에는 태그가 하나만 존재해야 하기 때문에

return을 여러 줄 해야 할 경우 하나의 태그로 해당 줄을 감싸 줘야 한다!

참고로 빈 태그도 사용 가능하며, 브라우저에서는 빈 태그는 해석하지 않기 때문에 빈 태그 내부의 내용만 보이게 된다!

function () {
	return (
    	<div>
        	<div>안녕하세요 저는 유이입니다! 즐거운 하루 보내세요! </div>
    		<div>안녕하세요 저는 유이입니다! 즐거운 하루 보내세요! </div>
   		<div>안녕하세요 저는 유이입니다! 즐거운 하루 보내세요! </div>
        </div>
    )
}

return 뒤에 ()을 붙이고, <div> 태그로 감싸 준 모습

 

function () {
	return (
    	<>
        	<div>안녕하세요 저는 유이입니다! 즐거운 하루 보내세요! </div>
    		<div>안녕하세요 저는 유이입니다! 즐거운 하루 보내세요! </div>
   		<div>안녕하세요 저는 유이입니다! 즐거운 하루 보내세요! </div>
        </>
    )
}

감싸는 태그로 빈 태그를 사용한 모습

오늘도 잘 해냈다!