이제 리액트의 핵심기능 중 하나인 createElement를 구현해보자. 코드를 먼저보자! const TinyReact = (() => { const createElement = (type, attrs = {}, ...children) => { // 최하위 자식부터 돌 수 있도록 child를 재귀로 구현해야함. const childElements = []; children.forEach((child) => { if (child !== null && child instanceof Object) { childElements.push(child); } else { if (typeof child !== "boolean") { childElements.push(createElement("text", { textC..

리액트는 JSX라는 문법을 사용합니다. 하지만 자바스크립트는 해당 문법을 모릅니다! "저는 리액트 쓰는데 jsx써도 잘만 되던데요?" 맞다. 왜냐하면 바벨에서 jsx문법을 읽을 수 있기 때문이다. 실제 바벨로 번역해보자 a를 보면 jsx문법인데 우측에서 React.createElement로 자동 변환되어 적용된것을 볼 수 있다. 우리는 React라고 말해주지도 않았는데, JSX문법을 보고 바로 React.createElement로 바꿔버린 것이다! 하지만 우리는 JSX 문법을 쓰고 React는 우리가 만들어 나갈 것이기 때문에 별도의 셋팅이 필요하다. 위 코드에는 생략되어 있지만 위 코드는 아래와 같다. 파일의 최상단에 주석으로, jsx문법에 사용할 함수를 우리가 직접 정할 수 있다. 기본값으로 Reac..