컴포넌트

Question

강의 3분쯤에 설명하신 부분 중에 const element = ; 부분이 바벨로 컴파일되어 React.createElement 함수를 호출하여 consoleLogResult 객체가 반환되고, 이 객체의 type에 입력된 Title 함수 컴포넌트를 실행하여 최종적으로 Title 컴포넌트가 리액트 요소(<p type={{ color }}>{title></p)를 반환하는 것이 맞나요?? 아니면 <Title ,,, />가 React.createElement를 실행하지 않고 바로 Title 컴포넌트를 실행하게 되나요??

이재승 · Answer

안녕하세요 JSX 문법으로 작성하면 바벨 컴파일 후 React.createElement 를 호출하는 코드가 됩니다 JSX 문법은 프로그래머를 위한 편의 기능이라고 생각하시면 됩니다 React.createElement 실행 결과는 (객체 형태인) 리액트 요소입니다 JSX 문법을 사용하든 사용하지 않든 우리는 리액트 요소를 리액트에게 전달합니다 리액트는 리액트 요소만 있으면 렌더링에 필요한 모든 정보를 얻을 수 있습니다 우리는 최초에 최상위(root) 리액트 요소를 리액트에게 전달합니다 그 요소 밑에는 우리가 작성한 컴포넌트에 대한 모든 정보가 있죠 그래서 이후 리액트가 (상태값 변경과 같이)필요한 순간에 렌더링을 수행합니다