createElement 2

React createElement 직접 구현하기: 동작 구현

지난 포스트에서 리액트의 createElement 함수의 동작을 커스텀하게 만들어서 적용하기 위한 기본 환경 설정에 대해 살펴봤다. 간단하게 요약해 보면 다음과 같다.Vite로 프로젝트를 빌드한다(바닐라 타입스크립트 프로젝트).tsconfig.json에 "jsx": "preserve"로 설정해서 타입스크립트 트랜스파일러가 JSX 구문을 트랜스파일링하지 못하게 막는다."jsxFactory"와 "jsxFragmentFactory" 속성에 이후에 JSX 구문 분석 시 사용될 함수를 정의해서 이후에 변환될 값을 기준으로 타입 검사를 수행할 수 있게 설정한다.JSX 구문 분석 함수의 타입을 src/types/jsx.d.ts에 정의해두고, tsconfig.json 파일에 "types": ["./src/types/j..

React 2024.12.16

React createElement 직접 구현하기: 환경 설정

JSX와 React.createElementJSX는 리액트에서 HTML과 유사한 형식으로 마크업을 작성할 수 있게 해주는 문법이다. 익숙한 HTML 문법을 그대로 활용해 DOM의 구조를 표현할 수 있기 때문에 직관적이고 편리하다.JSX는 아래와 같은 형태로 사용한다.const App = () => { return ( Hello World! )}JSX로 작성한 구문은 트랜스파일을 통해 아래와 같은 리액트 메서드로 변환되며,// ~ React 16 버전React.createElement("div", null, React.createElement("h1", null, "Hello, world!"));// React 17 버전 ~_jsx("div", null, _jsx("h1", nu..

React 2024.12.14