react-Cra-tpyeScript-emotion-react router dom V6 설정

리엑트 기본적인 설정을 해보자

우선적으로 CRA을 설치하는방법-- typeScript를 기본으로

• npx create-react-app [프로젝트 이름] --template typescript

emotions을 설치해보자

현재 CRA으로 만들었기때문에 emotion을사용하기위한 웹팩을 사용할수 없다 떄문에 craco를 사용하여 설정했다.

emotion설치

1. npm i @emotion/react
2. npm i @emotion/babel-preset-css-prop
3. npm i @emotion/css

설치가 완료되면 tsconfig의 설정을 추가한다.

1. "jsxImportSource":"@emotion/react"

이후 프로젝트의 root에 craco.config.js파일을 생성하고 다음 코드를 설정한다.

module.exports = { babel: { presets: ['@emotion/babel-preset-css-prop'], }, }

이런 설정을 마친다음 package.json의 script부분을 다음과같이 고친다.

"scripts": { "start": "craco start", "build": "craco build", "test": "craco test", // ... }

이렇게 설정하면 이모션에서 사용하는 paragma를 쓰지않고 사용할 수 있다.

/** @jsx */ <- 요놈을 안써줘도된다.
import { css } from '@emotion/react'

react router dom을 설치해보자

react router dom을 참고하자

• npm install history@5 react-router-dom@6
  기본적인 template

import { css } from "@emotion/react";
import * as React from "react";
import {
    Routes,
    Route,
    Outlet,
    Link,
    useNavigate,
    NavigateFunction,
    BrowserRouter as Router,
    useLocation,
    useParams,
    useMatch,
} from "react-router-dom";

export default function App() {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Layout />}>
                    <Route path="/Home" element={<Home />}>
                        <Route path="ChildHome/:id" element={<ChildHome />} />
                    </Route>
                    <Route path="/about" element={<About />} />
                    <Route path="/dashboard" element={<Dashboard />} />
                </Route>
            </Routes>
        </Router>
    );
}

function Layout() {
    return (
        <>
            <div css={css``}>
                <nav>
                    <ul>
                        <li>
                            <Link to="/Home">Home</Link>
                        </li>
                        <li>
                            <Link to="/about">About</Link>
                        </li>
                        <li>
                            <Link to="/dashboard">Dashboard</Link>
                        </li>
                    </ul>
                    <Outlet />
                    {/* 자식 라우터의 element를 가져온다. */}
                </nav>
                <hr />
            </div>
        </>
    );
}

const ChildHome = (props: any) => {
    const location = useLocation();
    // 파라미터를 가져온다

    const getParam = useParams();
    // :id를 가져온다.

    const isMatch = useMatch({ path: "Home/ChildHome/child", end: true });
    // 현재 주소와 매치가되면 값을 반환

    console.log(location, getParam, isMatch);

    return (
        <div
            css={css`
                border: 1px solid black;
            `}
        >
            asds
        </div>
    );
};
function Home(props: any) {
    const navigater: NavigateFunction = useNavigate();

    React.useEffect(() => {
        navigater("/Home");
    }, []);
    return (
        <div>
            <h2>Home</h2>
            <Outlet />
            {/* 자식 라우트의 값을 */}
            <button onClick={() => navigater("ChildHome/child", { state: { param: "파라미터" } })}>
                title="asdadsasdasasd"
            </button>
        </div>
    );
}

function About() {
    return (
        <div>
            <h2>About</h2>
        </div>
    );
}

function Dashboard() {
    return (
        <div>
            <h2>Dashboard</h2>
        </div>
    );
}