이번 강의에서는
이 JSX 코드를 다시 살펴보겠습니다
이 자바스크립트 코드의 HTML은
저번 강의에서 다룬 적이 있습니다
저번 강의에서는 제가 이 JSX 코드에
비표준 속성이 있다고 말씀드렸습니다
브라우저에서 지원하지 않기 때문에
이 코드 파일에 작성하는 코드는
브라우저로 넘어가는 코드가 아닙니다
대신에 앞서 배웠듯이 이 빌드 과정은
개발 환경 뒤에서실행되며 코드를 변환하고
또 코드를 최적화하여
브라우저에서 사용 가능하도록 합니다
하지만 리액트 개발자로서
아셔야 할 점은, 이론상으로는
JSX의 도움 없이도 리액트 앱을 빌드할 수 있습니다
그렇기 때문에 필요하다면
이같은 빌드 과정이 없어도 됩니다
물론 절대 다수의 리액트 프로젝트는
여전히 이 JSX 코드를 사용할 것이고
이를 변형시키는 빌드 과정 또한 사용할 것입니다
그리고 이 강의에서 사용하는
모든 프로젝트 또한 동일합니다
그럼에도 불구하고 아셔야 하는 것은
적어도 이론상으로는 리액트 프로젝트 빌드에
JSX는 굳이 필요하지 않습니다
다만 편의성이 좋습니다
하지만 이 JSX 코드를 대체하여
이를 컴포넌트로 반환할 수 있습니다
이 코드를 보시면 JSX를 전혀 사용하지 않습니다
다만 평범한 자바스크립트 특성만을 사용합니다
엄밀히 말하면 오른쪽의 코드 조각의 경우는
리액트에서 노출한 createElement(요소 생성) 메소드를 사용합니다
이것이 만드는 구조는 결국
이 HTML 코드와 동일한 것인데
왼쪽에 JSX 없이 작성된 것에서 확인할 수 있습니다
이를 위해 createElement 메소드는 컴포넌트 타입을
가장 먼저 생성되어야 하는 첫 인수로 지정하고
그 다음 속성(props) 객체를 지정해
해당 컴포넌트 혹은 요소에 값을 전달할 수 있게 됩니다
그리고 나서 자식 요소를
세 번째 인수로 지정한다면
어떤 컨텐츠가 컴포넌트의 시작 태그와 종료 태그 사이에 들어갈지
제어가 가능합니다
그리고 만약 빌드 과정이 없는 프로젝트를 원한다면
이같은 JSX를 사용하지 않는 접근방식을 사용할 수 있습니다
이는 JSX를 사용할 경우
당연히 빌드 과정이 필요해지기 때문입니다
물론 이처럼 빌드 과정이 포함된 프로젝트는
만드는 게 그렇게 어렵지는 않습니다
이 과정을 위해서는 굳이 직접
코드를 짤 필요가 없습니다
그렇기 때문에 결국
JSX를 사용하는 접근방식이 보통 더 사용하기 쉽고
가독성이 훨씬 뛰어납니다
JSX를 사용하지 않는 접근방식이
상대적으로 장황하고 직관적이지 않기 때문입니다
저희의 프로젝트의 경우
저번 강의에서 작업했던 프로젝트인데
제 최신 코드 스냅샷과
CodeSandbox에 올린 이 프로젝트 링크를
오늘 강의에 첨부해 두겠습니다
이 프로젝트의 index.jsx 파일에서
이 App 컴포넌트를 생성할 수 있습니다
'react'에서 React를 import해옴으로써 가능합니다
이 메인 리액트 객체는 리액트 라이브러리에서
노출된 것입니다
루트 컴포넌트를 이렇게 생성하지 않고
JSX를 사용하는 것이 아니라
React.createElement를 사용하여 여기에 생성할 수 있습니다
그리고 여기의 경우
커스텀 App 컴포넌트를 사용하고 싶기 때문에
해당 App 컴포넌트 함수의 포인터를
이 createElement에 전달하면 됩니다
그게 저희가 여기 만들고자 하는 컴포넌트 타입이기 때문입니다
그리고 이걸 저장하면
화면상으로는 이전과 같은 앱이 보이고
여기에 에러도 없다고 뜹니다
왜냐하면 방금 만든 것이 이 JSX 코드의 유효한 대안이기 때문입니다
하지만 이미 언급했듯 대부분의 경우에는
JSX 코드를 사용하게 될 것입니다
그렇게 어렵지 않은 방법이고
복잡한 과정을 대신 해주기 때문입니다