React.Fragment

• React에서 컴포넌트는 항상 바깥에 하나의 태그로 감싸져 반환되어야 한다.
• 이를 위해서 div, ul 등의 태그를 사용하나, React.Fragment를 사용하여 DOM에 별도의 노드를 추가하지 않고 여러 자식 노드를 그룹화할 수 있다.

function View(){
	const name = "Jim";
    const age = 45;
    const nickName = "jimmy";
    
    return (
    	<React.Fragment>
        	<span>{`His name is ${name}`}</span>
            <span>{`He is ${age} years old`}</span>
            <span>{`We call him ${nickname}`}</span>
        </React.Fragment>
    );
	
}

• 테이블을 만들 때 등 유용하게 사용할 수 있다.

function View(){
	const name = "Jim";
    const age = 45;
    const nickName = "jimmy";
    
    return (
    	<>
        	<span>{`His name is ${name}`}</span>
            <span>{`He is ${age} years old`}</span>
            <span>{`We call him ${nickname}`}</span>
        </>
    );
	
}

• 위와 같은 단축 문법으로도 사용할 수 있다.

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