Freecodecamp: [베타] 자동 폐쇄 JSX 태그에 대해 알아보기

도전 이름

자동 폐쇄 JSX 태그에 대해 알아보기

문제 설명

주석을 제거하고 태그를 닫은 다음 (첫 번째 시도에서 br 태그가 누락 된 후 수정 됨) 시도가 실패했지만 항목이 페이지에 렌더링되었습니다.

실패 출처 : 제공된 JSX 요소는 ID가 challenge-node 인 DOM 노드에있는 그대로 렌더링되어야합니다.
이 오류를 수신 할 때 미리보기에서 항목이 렌더링되었습니다.
챌린지 노드 ID가 아니라 루트 ID로 렌더링되는 것으로 나타납니다.

추가 된 코드 : ReactDOM.render(JSX, document.getElementById('challenge-node'));
테스트를 통과했으며 이제 미리보기에서 두 번 렌더링됩니다.

챌린지는 다음과 같이 말합니다.

코드 편집기에서 오류를 수정하여 올바른 JSX이고 성공적으로 트랜스 파일되도록합니다. 콘텐츠를 변경하지 않았는지 확인하세요. 태그가 필요한 곳에만 태그를 닫으면됩니다.

DOM에 첨부 할 필요는 언급하지 않고 줄 바꿈과 가로줄 만 조정하면되는 것 같습니다.

해결책:
DOM에 렌더링 할 방향을 추가하고 현재 미리보기를 제거해야합니다.
또는 루트 ID 대신 챌린지 노드에서 벗어나도록 미리보기를 조정해야합니다.
아니면 현재 생각할 수없는 또 다른 해결책이 있습니다.

귀하의 코드

Failed:
const JSX = (
  <div>
    <h2>Welcome to React!</h2><br />
    <p>Be sure to close all tags!</p>
    <hr />
  </div>
);

Passed: 
const JSX = (
  <div>
    <h2>Welcome to React!</h2><br />
    <p>Be sure to close all tags!</p>
    <hr />
  </div>
);
ReactDOM.render(JSX, document.getElementById('challenge-node'));