바닐라 자바스크립트로 직접 리액트의 주요 기능을 만들어보며, 동작원리를 좀더 심층적으로 이해하기 위해 아래 글을 따라가며 얻은 인사이트와 학습을 기록하는 글입니다. 또한 아래 글의 4가지 챕터로 리액트의 동작원리를 이해하는 단계를 그대로 따라가기에, 아래 Medium 글을 참고하시는게 직접 해보시는 것에는 도움이 되실 겁니다.
lets-build-a-react-from-scratch-part-2-state-management-and-react-hooks
git hub repo : part2 branch(파트에 따라서 브랜치를 분배 했습니다)
모듈화
위에 글에는 나와있지 않은 모듈화를 진행하려고 한다.
현재는 모듈로더를 설정하지 않아서 import, export 문을 트랜스파일러가 이해하지 못한다.
나는 간단한 설정의 장점이 있는 ESM 모듈 로더를 적용하려고한다.
먼저 현재 프로젝트는 typescript로 간단하게 트랜스파일을 하고 있기에, ts.config.json 파일에서 아래와 같이 간단한 모듈 관련 설정을 해주었다.
// ✅ 모듈 관련 TypeScript 설정
{
"target": "ESNext", // ESM 환경에서 사용을 위한 트랜스파일된 자바스크립트 문법 수준
"module": "ESNext",//모듈 시스템 정의 -브라우져용
"moduleResolution": "bundler", //모듈 해석 방식 설정 js -> tsx 로 자동 해석
"allowJs": true, //js 파일 허용
}
}그리고 추후 여러 코드의 추가시 가독성을 해칠것을 염려하여 초기 렌더링시 App.tsx 를 렌더링하는 엔트리 파일, main.tsx 를 생성했다.
import { App } from "./app.js";
import React from "./core/react.js";
import { render } from "./core/render.js";
// 어플리케이션 렌더링 entry point
render(<App />, document.getElementById("myapp"));
위의 import 문은 app.js로 나와있는데, app.tsx를 import 하게 되면,
위와 같은 경고가뜬다, 위의 경고대로 ts.config.json에 해당 옵션을 설정하면, "noEmit":true 여야 한다는 오류가 또다시 발생하는데, 해당 설정은 트랜스파일된 js 파일이 생성되지 않기 때문에, 지금 상황처럼 정적 파일 서버(go live)를 띄우는 경우에는 어쩔수 없이 js 확장자로 일치해주어야 한다.
그럼 지금까지 우린 어떻게 import ...tsx를 한거지?
그럼 지금까지 어떻게 우리는 import tsx를 해서 코드를 작성한걸까? 우리가 평소에 리액트 템플릿으로 생성한 프로젝트에서는, npm run dev시 개발 환경 서버가 열리고, vite 가 내부에서 자동으로 .ts → .js, .jsx → .js 변환 후 브라우저에 전달하기 때문에 import 경로나 확장자를 신경 안 써도 되었던 것이다.
