preact란?
가볍고 빠르다.
그 핵심은 Preact does not implement a synthetic event system이라고 한다.
가능한 Virtual DOM 추상화 수준을 낮춰서 더욱 직접적으로 DOM을 다루게 된다.
따라서 기존 react와 문법이 조금 다른 부분이 있다.
물론 preact/compat을 활용하면 문법적으로 react와 100% 호환이 된다.
기본 세팅
vite을 활용해서 쉽게 프로젝트 세팅을 할 수 있다.
yarn create vite project-name --template preact-ts
기본적으로 react와 똑같다.
index.tsx
import './index.css';
import { render } from 'preact';
import App from './App';
render(<App />, document.getElementById('app') as HTMLElement);
이어서 tailwindcss eslint 등 설정을 이어서 하면 된다.
라우팅
기본적으로 preact-router라는 선택지가 있지만, 이는 단순한 라우팅만 지원된다.
복잡하게 컴포넌트를 조합 해야할 경우 react-router을 사용하도록 권장되어 있다.
yarn add react-router-dom
vite.config.ts
import preact from '@preact/preset-vite';
import { defineConfig } from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [preact()],
resolve: {
alias: {
react: 'preact/compat',
},
},
});
App.tsx
import { BrowserRouter, Route, Routes, useParams } from 'react-router-dom';
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Slug />} />
<Route path=":slug" element={<Slug />} />
</Routes>
</BrowserRouter>
);
}
function Slug() {
const { slug } = useParams();
return <div>{slug}</div>;
}
프론트엔드 개발환경 세팅
5 / 7
23.01.28
0분
안 해본 사람은 있어도 한 번만 하는 사람은 없다.