Big Div 에너지에 반응

React는 복잡한 대화형 애플리케이션을 만드는 과정을 상대적으로 쉽게 만듭니다. 이는 개발자가 JavaScript에 무엇을 렌더링하고 어떻게 렌더링할지 알려줘야 하는 Vanilla JavaScript의 명령형 프로그래밍 사용에서 벗어나 이를 달성합니다. React는 선언적 프로그래밍을 활용하여 내부에서 렌더링 방법을 처리하므로 개발자는 앱이 수행할 수 있는 작업에 자유롭게 집중할 수 있습니다.

하지만 대부분의 좋은 점과 마찬가지로 React의 편리함은 대가를 치러야 합니다. React는 개발자에게 높은 구문 표준을 적용하고 그 대가로 DOM 쪽에서 지저분한 작업을 수행합니다. 표준이 충족되지 않으면 React는 오류를 제기하여 불평합니다. 아래 예를 살펴보겠습니다.

function MyBrokenComponent() {
    return (
        <h1>Beware!</h1>
        <p>I will return an error</p>
    )
}

이 예제에서는 h1가 부모 구성 요소에 의해 렌더링될 때 p 요소와 MyBrokenComponent 요소를 반환하도록 React에 지시합니다. 이로 인해 다음 오류가 발생합니다.



이 오류는 React가 둘 이상의 부모 요소를 가진 구성 요소를 렌더링할 수 없음을 알려줍니다. 이 오류가 발생하는 이유는 React에서 return 문을 상위 요소로 래핑해야 하고 위의 return 문이 이 요구 사항을 충족하지 않기 때문입니다. 다른 예를 살펴보겠습니다.

function MyOtherBrokenComponent() {
    return (
        <p>Try again!</p>
        <p>I will also return an error</p>
    )
}

이 예제에서는 이전 예제와 동일한 구문 오류가 발생합니다. return 문에는 p라는 한 가지 유형의 요소만 포함되어 있지만 여전히 두 개의 요소가 포함되어 있으므로 React의 one-parent 표준을 충족하지 못합니다. 오류를 반환하지 않는 예를 살펴보겠습니다.

function MyWorkingComponent() {
    return (
        <div>
            <h1>You're in the clear!</h1>
            <p>I will not return an error</p>
        </div>
    )
}

오류가 없는 구성 요소를 이전 예제와 비교할 때 MyWorkingComponent에는 다른 구성 요소에 없는 하나의 부모 요소가 있다는 것이 분명합니다. 이 경우 다른 많은 경우와 마찬가지로 상위 요소는 div 입니다. 하나의 상위 요소 내에서 요소를 래핑하면 React가 선언문을 이해할 수 있으며 div 를 사용하면 개발자가 React의 구문 요구 사항을 쉽게 충족할 수 있습니다.
div 는 구문을 복구하는 데 유용한 도구이지만 개발자가 마음대로 사용할 수 있는 유일한 도구는 아닙니다. 아래 두 가지 예를 살펴보겠습니다.

function MyDivlessComponent() {  
    return <p>I will not return an error either!</p>
}

function MyHappyComponent() {
    <div>
        <h1>Divs</h1>
        <h2>keep</h2>
        <p>React</p>
        <p>happy!</p>
    </div>
}

첫 번째 구성 요소인 MyDivlessComponent 에는 작업 반품 명세서가 있지만 div 는 없습니다. 어떻게 이럴 수있어? Adiv는 부모 구성 요소의 한 예일 뿐입니다. React의 엄격한 구문 규칙을 따르는 핵심은 하나의 상자 또는 부모 요소 안에 포함된 return 문에 모든 것을 유지하는 것입니다. MyDivlessComponent 의 경우 부모 요소는 자식 요소가 없는 p 요소입니다. 반면 MyHappyComponent에는 4개의 하위 요소가 포함되어 있으므로 해당 하위 요소를 감싸는 상위 요소가 필요합니다.

새 프레임워크의 모든 것을 배우는 것은 까다로울 수 있지만 div 는 개발자에게 React의 가장 일반적인 오류 중 하나를 쉽게 수정할 수 있는 방법을 제공합니다.