JSX
JSX๋ React์์ ์ฌ์ฉํ๋ React ์ ์ฉ HTML์ด๋ค.
์์ฑ๊ฐ์ ๋์๋ฌธ์ ์ ๋ ์ฐจ์ด ๋ฑ์ ์ ์ธํ๊ณค ๊ฑฐ์ ๋น์ทํ๋ค.
๊ธฐ์กด HTML๋ก ์ถ๋ ฅํ Hello, World!
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
JSX๋ก ์ถ๋ ฅํ Hello, World!
import React from 'react';
function App() {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
}
export default App;
์น ๋ธ๋ผ์ฐ์ ๋ HTML, CSS, JAVASCRIPT ๋ง ์ฝ์ ์ ์๋ค.
์์ค์ฝ๋๊ฐ ์คํ๋ ๋ JSX๊ฐ HTML๋ก ์๋ ๋ณํ๋์ด ์คํ๋๋ ๊ฒ์ด๋ค.
CSS in JS
๋ง ๊ทธ๋๋ก JS ์์ CSS๋ฅผ ์์ฑํ๋ ๊ฒ์ด๋ค.
CSS in JS๋ ๊ธฐ์กด CSS ๋ณด๋ค ์์ฑ๊ณผ ๊ด๋ฆฌ์ ์ฉ์ดํ๋ค.
์ปดํฌ๋ํธ ๊ด๋ฆฌ์ ์ฉ์ดํ๊ณ , ์ํ์ ๋ฐ๋ผ ๋์ ์ผ๋ก ์ ์ฉ์ํค๊ธฐ ์ข์ผ๋ฉฐ, CSS๊ฐ ์ฝ๋์ ํจ๊ป ์์ฑ๋๋ฏ๋ก CSS๋ฅผ ์ฝ๊ณ ์ดํดํ๊ธฐ ์ฝ๋ค.
์ฝ๋๊ฐ ๊ฐ๊ฒฐํ๊ณ , ํ๊ทธ์ ์๋ฏธ ๋ถ์ฌ๊ฐ ๊ฐ๋ฅํ๋ฉฐ(<button>์์ <MyButton /> ๋ฑ), ์ฝ๋ ์ฌ์ฌ์ฉ์ฑ๋ ์ฆ๊ฐํ๋ค.
CSS in JS ๊ด๋ จ ๋ฆฌ์กํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ styled-components, emotion, styled-jsx๊ฐ ์๋ค.
๊ธฐ์กด CSS์ styled-components, emotion ๋ฅผ ์๋์ ๊ฐ๋จํ ์์๋ฅผ ํตํด ์ดํด๋ณด์.
๊ธฐ์กด css ์์ (๋ฐฉ๋ฒ 1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Button</title>
<style>
.styled-button {
background-color: red;
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<button class="styled-button">Click me!</button>
</body>
</html>
๊ธฐ์กด css ์์ (๋ฐฉ๋ฒ 2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Button</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="styled-button">Click me!</button>
</body>
</html>/* styles.css */
.styled-button {
background-color: red;
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
styled-components ์์
import React from 'react';
import styled from 'styled-components';
const Button = styled.button`
background-color: red;
color: white;
border: none;
padding: 10px;
cursor: pointer;
`;
const App = () => {
return (
<Button>Click me!</Button>
);
};
export default App;
emotion ์์
import React from 'react';
import { css } from 'emotion';
const Button = ({ children }) => {
return (
<button
style={css`
background-color: red;
color: white;
border: none;
padding: 10px;
cursor: pointer;
`}
>
{children}
</button>
);
};
const App = () => {
return (
<Button>Click me!</Button>
);
};
export default App;
styled-components์ ๊ฒฝ์ฐ Button ์ปดํฌ๋ํธ๊ฐ CSS๋ฅผ ์ปดํฌ๋ํธํํ ๊ฒ์ด๊ณ ,
emotion์ ๊ฒฝ์ฐ Button ์ปดํฌ๋ํธ๊ฐ CSS๋ฅผ ๋ ๋๋งํ๋ ์ญํ ์ด๋ค.
์ ์๋ฏธํ ์ฑ๋ฅ ์ฐจ์ด๋ ํฌ๊ฒ ์๋ ๊ฒ์ผ๋ก ์๋ ค์ ธ ์๋ค.
styled-components, emotion, styled-jsx ๋น๊ต
| styled-components | emotion | styled-jsx | |
| ์ปดํฌ๋ํธํ ๋ฐฉ์ | CSS๋ฅผ ์ปดํฌ๋ํธํํจ | CSS๋ฅผ ๋ ๋๋งํจ | CSS๋ฅผ ์ปดํฌ๋ํธํํจ |
| ๋ฒ๋ค ํฌ๊ธฐ | ์ฝ๊ฐ ๋ ํฐ ๋ฒ๋ค ํฌ๊ธฐ | ๋ ์์ ๋ฒ๋ค ํฌ๊ธฐ | styled-components์ ์ ์ฌ |
| ์ฑ๋ฅ | ์ ์๋ฏธํ ์ฑ๋ฅ ์ฐจ์ด X | ์ ์๋ฏธํ ์ฑ๋ฅ ์ฐจ์ด X | ์ ์๋ฏธํ ์ฑ๋ฅ ์ฐจ์ด X |
| ๊ฐ๋ฐ์ ๊ฒฝํ | ๊ฐ๋ฐ์ ์นํ์ | ๋ ๊ฐ๋ฐ์ ์นํ์ ์ด๋ผ ํ๊ฐ๋ฐ์ | styled-components์ ์ ์ฌ |
CSS in JS ๋ฆฌ์กํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊ฐ์ ํฐ ์ฑ๋ฅ ์ฐจ์ด๋ ์์ผ๋ฏ๋ก
์ํฉ์ ๋ฐ๋ผ ํธ๋ฆฌํ ๊ฒ์ ์ ํํ์ฌ ์ฌ์ฉํ๋ฉด ๋ ๋ฏ ํ๋ค.
