반응 조각

JSX 구문의 일부는 인접한 JSX 요소가 둘러싸는 태그로 래핑된다는 것입니다. 즉, JSX 표현식에는 가장 바깥쪽 요소가 하나만 있어야 합니다. 이 규칙을 준수한다는 것은 필요하지 않은 경우에도 추가 DOM 노드를 추가하는 것을 의미할 수 있습니다. React Fragments 덕분에 우리는 이것을 할 필요가 없습니다.

예제를 사용하여 이 문제를 더 설명하겠습니다.

문제

양식이 있고 입력 필드에 레이블이 있는 사용자 지정 구성 요소를 원한다고 가정해 보겠습니다.

class Form extends Component {
    render() {
        return (
            <form>
                <InputField name="Name"/>
                <button>Submit</button>
            </form>
        )
    }
}

그런 다음 InputField 구성 요소에는 다음이 있습니다.

class InputField extends Component {
    render() {
        return (
            <div>
                <label>{this.props.name}</label>
                <input placeholder={this.props.name} />
            </div>
        )
    }
}

label 그리고 input 필드 div . JSX 구문을 준수하기 위해 이 작업을 수행했습니다. 이것은 DOM에서 위의 출력입니다.

<form>
    <div>
        <label>Name</label>
        <input placeholder="Name">
    </div>
    <button>Submit</button>
</form>

다음은 이 추가와 관련된 몇 가지 문제입니다.

DOM에 불필요한 추가 노드를 도입하면 DOM이 더 복잡해집니다. 다른 많은 구성 요소에 대해 이 작업을 수행하면 DOM에 너무 많은 추가 노드가 있습니다. 이것은 작은 응용 프로그램에 거의 영향을 미치지 않을 수 있습니다. 그러나 성능이 중요한 초대형 애플리케이션에서 DOM 노드를 추가하면 메모리 사용량이 증가합니다.

FlexBox 및 CSS Grid와 같은 CSS 메커니즘의 사용을 더 복잡하게 만듭니다. 이러한 메커니즘은 상위 요소와 하위 요소 사이에 존재하는 관계에 따라 다릅니다. 따라서 추가 항목을 도입하여 이러한 관계를 깨고 div 스타일링을 더 복잡하게 만듭니다.

좋은 소식은 React 조각이 이 문제를 해결한다는 것입니다. 방법을 알아보겠습니다.

프래그먼트를 공식적으로 만나보세요

프래그먼트를 사용하면 DOM에 노드를 추가하지 않고도 자식 목록을 그룹화할 수 있습니다. div를 사용하는 것과 똑같은 방식으로 사용합니다. 요소를 래핑하려면 InputField 요소. 해보자

class InputField extends Component {
    render() {
        return (
            <React.Fragment>
                <label>{this.props.name}</label>
                <input placeholder={this.props.name} />
            </React.Fragment>
        )
    }
}

이것은 다음으로 번역됩니다.

<form>
    <label>Name</label>
    <input placeholder="Name">
    <button>Submit</button>
</form>

야!! 추가 없음 div 추가했습니다.

객체 구조화를 사용하여 반응에서 가져와서 React 객체를 참조하지 않고 사용할 수 있습니다.

import React, { Component, Fragment } from 'react'

class InputField extends Component {
    render() {
        return (
            <Fragment>
                <label>{this.props.name}</label>
                <input placeholder={this.props.name} />
            </Fragment>
        )
    }
}

조각의 속성

또는 오히려 조각의 속성입니다. 조각은 하나의 속성만 지원합니다 - key 기인하다. 이는 각 목록 항목에 키가 필요한 목록에 특히 유용합니다. 예는 아래 설명 목록입니다.

class TodoList extend Component {
    render() {
        return (
            <dl>
            ${this.props.todos.map(todo =>
                <React.Fragment key={todo.id}>
                    <dt>{todo.name}</dt>
                    <dd>{todo.description}</dd>
                </React.Fragment>
            )
            </dl>
        )
    }
}

더 짧은 구문

단편을 작성하기 위한 더 짧은 구문은 단편을 선언하는 것입니다. <>를 사용하는 것입니다. 및 </> 대신 Fragment . 예, 빈 태그처럼 보입니다.

class InputField extends Component {
    render() {
        return (
            <>
                <label>{this.props.name}</label>
                <input placeholder={this.props.name} />
            </>
        )
    }
}

이 구문의 단점은 키나 속성을 지원하지 않는다는 것입니다. 또한 많은 도구에서 지원하지 않으므로 Fragments 명시적으로.

결론

React Fragments는 멋지고 사용해야 합니다.

읽어주셔서 감사합니다.😊