React (6) Fragements

■ Fragements란?

- return 되는 컴포넌트를 감싸는 틀이다.

- 컴포넌트를 단위로 요소를 return 할 때는 반드시 단일한 1개의 요소만 반환할 수 있기 때문에 태그 요소를 반환하고 싶다면 반드시 하나의 html요소로 감싸주어야 한다.

- 반환시키고자 하는 값이 여러개인 경우 에러가 발생할 수 있는데 이때 Fragements태그를 활용하면 불필요한 html코드를 없애고 여러 개의 요소를 반환할 수 있다.

예시)

// Fragements가 적용되지 않은 코드
function Fragements(){
    return(
        <React.Fragment>
            <td>리액트1</td>
            <td>리액트2</td>
        </React.Fragment>
    )
}

// Fragements가 적용된 코드
function Fragements(){
    return(
        <>
            <td>리액트1</td>
            <td>리액트2</td>
        </>
    )
}