프론트엔드 개발 · 기초
React에서 JSX란 무엇이며, 브라우저가 직접 이해하지 못하는 JSX가 실제로 어떻게 동작할 수 있는지 설명해주세요.
힌트 · JSX가 결국 어떤 자바스크립트 함수 호출로 변환되는지, 그 변환 주체가 무엇인지의 관점에서 접근하세요.
JavaScript XMLBabelVirtual DOM렌더링
모범답안
React에서 JSX는 JavaScript XML의 약자로, JavaScript 코드 내에서 HTML과 유사한 문법으로 UI를 선언적으로 작성할 수 있게 해주는 확장 문법입니다. 브라우저는 JSX를 직접 이해하지 못합니다. 대신, Babel과 같은 트랜스파일러가 JSX를 React.createElement() 함수 호출로 변환합니다. 이 함수 호출은 React가 이해할 수 있는 JavaScript 객체인 Virtual DOM을 생성합니다. React는 이 Virtual DOM을 실제 DOM에 효율적으로 렌더링하여 화면에 UI를 표시합니다.
읽었다면, 이제 직접 답해볼 차례예요
패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.