'์นด๊ณต์ฌ์ง๋' ํ๋ก์ ํธ์์ Styled-component๋ฅผ ์ฌ์ฉํ์๋ค. ๋น์ ๊ธฐ๋ถ ์ข๊ฒ ํ๋ก์ ํธ ๋ฐฐํฌ ํ, ์์ดํฐ ์ฌํ๋ฆฌ๋ก ํ์ธํ๋๋ฐ ์ฐ๋ฆฌ๊ฐ ์๋ํ์ง ์์ ํฐํธ ์์์ด ํ๋ฉด์ ๋ด๋ค. ์๊ณ ๋ณด๋ ํ๋ก์ ํธ ์ธํ ์ด๋ฐ์ CSS reset์ ํ์ง ์์ ์๊ธด ๋ฌธ์ ์๋ค.
ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง์ด๋?
๋ธ๋ผ์ฐ์ ๋ง๋ค HTML ์๋ฉํฑ ํ๊ทธ์ ๋ํ ๊ธฐ๋ณธ๊ฐ์ด ๋ค๋ฅด๋ค. ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง์ ์ดํ ๋ก ๋ค์ํ ์น ๋ธ๋ผ์ฐ์ ์์ ์น ํ์ด์ง๊ฐ ์ผ๊ด๋๊ฒ ํ์๋๊ณ ๊ธฐ๋ฅํ๋๋ก ๋ง๋๋ ๊ธฐ์ ์ด๋ค. ์ด๋ฅผ ํตํด ํฌ๋กฌ, ํ์ด์ดํญ์ค, ์ฌํ๋ฆฌ ๋ฑ ์ด๋ค ๋ธ๋ผ์ฐ์ ์์๋ ๊ฐ๋ฐ์๊ฐ ์๋ํ ๋๋ก ์ด์ฉํ๊ฒ ๋ง๋ค ์ ์๋ค.
CSS Reset์ ํตํด ๋ธ๋ผ์ฐ์ ๊ฐ ์คํ์ผ์ ์ผ๊ด์ฑ์ ํ๋ณดํ ์ ์๋ค.
Styled-component์ ๊ธฐ์กด์ ์๋ ํจํค์ง๋ฅผ ํตํด CSS Resetํ ์ ์๋ค.
1. styled-reset ์ค์น
npm i styled-reset
2. CSS Reset ์ ์ฉ
import * as React from 'react'
import { Reset } from 'styled-reset'
const App = () => (
<React.Fragment>
<Reset />
<div>Hi, I'm an app!</div>
</React.Fragment>
)
์ ์ฉ์ ํ๊ณ ๋๋ ๊ธฐ๋ณธ ๋ธ๋ผ์ฐ์ ๋ก ์ค์ ๋ ๋ง์ง๊ณผ ํจ๋ฉ์ด ์์ด์ง ๊ฒ์ ํ์ธํ ์ ์๋ค. ๊ทธ๋ฐ๋ฐ aํ๊ทธ์ ๋ฒํผ ํ๊ทธ๋ ๊ทธ๋๋ก ์ ์ง๋์ด์๋ค.
styled-component๋ ๊ฐ๊ฐ์ ์ปดํฌ๋ํธ๋ค์๊ฒ ์คํ์ผ๋ง ์ํฅ์ ์ฃผ์ง ์๊ธฐ ์ํด Local๋ก ๋์ํ๋ค. ๋ชจ๋ ์ปดํฌ๋ํธ์ ์ผ๊ด๋๊ฒ ์ด๊ธฐํ ์์ ์ ์ ์ฉํ๋ ค๋ฉด Global๋ก ์ค์ ํ ์ ์๋ createGlobalStyle์ ์ฌ์ฉํด์ผ ํ๋ค.
import { BrowserRouter } from "react-router-dom";
import Footer from "@components/Footer";
import Header from "@components/Header";
import Home from "@pages/Home";
import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";
const GlobalStyles = createGlobalStyle`
${reset}
a{
text-decoration: none;
color: inherit;
}
*{
box-sizing: border-box;
}
button{
all:unset;
}
body {
font-family:
}
`;
function App() {
return (
<>
<BrowserRouter>
<GlobalStyles />
<Header />
<Home />
<Footer />
</BrowserRouter>
</>
);
}
export default App;
์ต์ข ์ ์ผ๋ก ์์ ํ ์ฝ๋๋ ์์ ๊ฐ๋ค.
๋ฆฌ์ ์ด ์๋ฃ๋ ์ฝ๋๋ฅผ ํ์ธํ ์ ์๋ค.
Next.js๋ฅผ Vercel์ ๋ฐฐํฌํ๊ธฐ (0) | 2024.05.31 |
---|---|
Next.js ์ ๋ฌธํ๊ธฐ (0) | 2024.05.15 |
useCallback (0) | 2024.03.12 |
useMemo() (0) | 2024.03.12 |
useReducer() (0) | 2024.03.11 |