CDD๐ง
CDD๋ ์ปดํฌ๋ํธ๋ฅผ ์ค์ฌ์ผ๋ก ๊ฐ๋ฐ ํ๋ก์ธ์ค๋ฅผ ๊ณ ์ ํ๋ ๊ฐ๋ฐ ๋ฐฉ๋ฒ๋ก ์ด๋ผ๊ณ ํ๋๋ฐ ์ด๊ฒ ๋ฌด์จ ๋ป์ผ๊น? ์ฝ๊ฒ ๋งํ์๋ฉด ์ปดํฌ๋ํธ ๋จ์์์ ์์ํด ์ปดํฌ๋ํธ๋ค์ ๊ฒฐํฉํ์ฌ ํ์ด์ง๋ก ์กฐ๋ฆฝํ๋ bottom-up ๋ฐฉ์์ผ๋ก UI๋ฅผ ๊ตฌ์ถํ๋ ๊ณผ์ ์ด๋ผ๊ณ ํ ์ ์๋ค. ์ด๋ฅผ ๊ตฌํํ๋ฉด ์ปดํฌ๋ํธ์ ์ฌ์ฌ์ฉ์ฑ์ ๊ทน๋ํํ ์ ์๋ค๋ ์ด์ ์ด ์๋ค.
CDD
1. ๊ตฌ์กฐํ๋ CSS์ ํ์์ฑ์ด ๋๋๋ ๋ฐฐ๊ฒฝ
2. CSS ๊ตฌ์กฐํ๋ฅผ ์ํ ๋ค์ํ ์๋
3. CSS ๋ฐฉ๋ฒ๋ก ๋ค์ ํน์ง, ์ฅ๋จ์
ํน์ง | ์ฅ์ | ๋จ์ | |
---|---|---|---|
CSS | ๊ธฐ๋ณธ์ ์ธ ์คํ์ผ๋ง ๋ฐฉ๋ฒ | - | ์ผ๊ด๋ ํจํด ๊ฐ๊ธฐ ์ด๋ ค์ !important์ ๋จ์ฉ |
SASS (preprocessor) | ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ๋ฒ๋ก ์ ๋์
ํ์ฌ, ์ปดํ์ผ๋ CSS๋ฅผ ๋ง๋ค์ด๋ด๋ ์ ์ฒ๋ฆฌ๊ธฐ | ๋ณ์/ํจ์/์์ ๊ฐ๋
์ ํ์ฉํ์ฌ ์ฌ์ฌ์ฉ ๊ฐ๋ฅ CSS์ ๊ตฌ์กฐํ | ์ ์ฒ๋ฆฌ ๊ณผ์ ์ด ํ์, ๋๋ฒ๊น ์ ์ด๋ ค์ ๊ฑฐ๋ํด์ง๋ ์ปดํ์ผํ CSS ํ์ผ |
BEM | CSS ํด๋์ค๋ช
์์ฑ์ ์ผ๊ด๋ ํจํด์ ๊ฐ์ ํ๋ ๋ฐฉ๋ฒ๋ก | ๋ค์ด๋ฐ์ผ๋ก ๋ฌธ์ ํด๊ฒฐ, ์ ์ฒ๋ฆฌ ๊ณผ์ ๋ถํ์ | ์ ํ์์ ์ด๋ฆ์ด ์ฅํฉํ๊ณ , ํด๋์ค ๋ชฉ๋ก์ด ๋๋ฌด ๋ง์์ง |
Styled-Component (CSS-in-JS) | ์ปดํฌ๋ํธ ๊ธฐ๋ฐ์ผ๋ก CSS๋ฅผ ์์ฑํ ์ ์๊ฒ ๋์์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ | CSS๋ฅผ ์ปดํฌ๋ํธ ์์ผ๋ก ์บก์ํ, ๋ค์ด๋ฐ์ด๋ ์ต์ ํ๋ฅผ ์ ๊ฒฝ ์ธ ํ์๊ฐ ์์ | ๋น ๋ฅธ ํ์ด์ง ๋ก๋์ ๋ถ๋ฆฌํจ |
Styled Components๐
Styled components๋ CDD๋ฅผ ๊ตฌํํ ์ ์๋ ๋ํ์ ์ธ ๊ฐ๋ฐ ๋๊ตฌ๋ก CSS๋ฅผ ์ปดํฌ๋ํธํ ํด์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ฉฐ React ํ๊ฒฝ์์ ์ฌ์ฉ์ด ๊ฐ๋ฅํ๋ค
์ฌ์ฉ ๋ฐฉ๋ฒ
๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์น
# with npm
$ npm install --save styled-components
# with yarn
$ yarn add styled-components
package.json์ ์ถ๊ฐ(์ฌ๋ฌ ๋ฒ์ ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์ค์น๋์ด ๋ฐ์ํ๋ ๋ฌธ์ ๋ฅผ ์ค์ฌ์ค)
{
"resolutions": {
"styled-components": "^5"
}
}
Styled Components๋ฅผ ์ฌ์ฉํ ํ์ผ๋ก ๋ถ๋ฌ์ด
import styled from "styled-components"
Styled Components ๋ฌธ๋ฒ
Templete Literals ๋ฌธ๋ฒ ์ฌ์ฉ
์ปดํฌ๋ํธ ๋ง๋ค๊ธฐ
const ์ปดํฌ๋ํธ์ด๋ฆ = styled.ํ๊ทธ์ข
๋ฅ`
CSS์์ฑ: ์์ฑ๊ฐ;
`
์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฌ์ฉํ์ฌ ์๋ก์ด ์ปดํฌ๋ํธ
const ์ปดํฌ๋ํธ์ด๋ฆ = styled(์ฌํ์ฉํ ์ปดํฌ๋ํธ)`
์ถ๊ฐํ๊ฑฐ๋ ๋ณ๊ฒฝํ CSS์์ฑ: ์์ฑ๊ฐ
`
Props ํ์ฉํ๊ธฐ
const ์ปดํฌ๋ํธ์ด๋ฆ = styled.ํ๊ทธ์ข
๋ฅ`
CSS์์ฑ: ${ (props) => ํจ์ ์ฝ๋ }
`
์ ์ญ ์คํ์ผ ์ค์ ํ๊ธฐ
import { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle`
button {
padding : 5px;
margin : 2px;
border-radius : 5px;
}
`
Storybook๐
Storybook์ด๋ CDD๋ฅผ ๊ตฌํํ๊ธฐ ์ํ ๋ํ์ ์ธ UI ๊ฐ๋ฐ ๋๊ตฌ๋ก ์ปดํฌ๋ํธ๋ค์ ๋ฌธ์ํํ๊ณ ๊ด๋ฆฌํ ์ ์๋ ๋๊ตฌ์ด๋ค. ์ด๋ฅผ ์ด์ฉํ๋ฉด ๊ฐ๊ฐ์ ์ปดํฌ๋ํธ๋ค์ ๋ฐ๋ก ๋ณผ ์ ์๊ฒ ๊ตฌ์ฑํด์ฃผ์ด ํ ๋ฒ์ ํ๋์ ์ปดํฌ๋ํธ์์ ์์ ์ด ๊ฐ๋ฅํ๋ค. ๋ํ ์ฌ์ฌ์ฉ์ฑ์ ํ๋ํ๊ธฐ ์ํด ์ปดํฌ๋ํธ๋ฅผ ๋ฌธ์ํํ๊ณ ์๋์ผ๋ก ์ปดํฌ๋ํธ๋ฅผ ์๊ฐํํ์ฌ ์๋ฎฌ๋ ์ด์ ํ ์ ์๋ ๋ค์ํ ํ ์คํธ ์ํ๋ฅผ ํ์ธํ ์ ์๋ค.
useRef๐ค
useRef๋ React๋ก ์ฑ ๊ฐ๋ฐ ์ DOM์ ์ง์ ์กฐ์ํด์ผํ๋ ๊ฒฝ์ฐ ์ฌ์ฉ๋๋ hook ํจ์๋ก DOM์ ์ง์ ์กฐ์ํด์ผํ๋ ๋ํ์ ์ธ ์ํฉ์ผ๋ก DOM ์จ๋ฆฌ๋จผํธ์ ์ฃผ์๊ฐ์ ํ์ฉํด์ผ ํ๋ ๊ฒฝ์ฐ๊ฐ ์์
์ฌ์ฉ ํ์
const ์ฃผ์๊ฐ์_๋ด๋_๊ทธ๋ฆ = useRef(์ฐธ์กฐ์๋ฃํ)
// ์ฃผ์๊ฐ์_๋ด๋_๊ทธ๋ฆ ๋ณ์์๋ {current: ์ฐธ์กฐ์๋ฃํ}์ ํํ๋ก ๋ค์ด๊ฐ
return (
<div>
<input ref={์ฃผ์๊ฐ์_๋ด๋_๊ทธ๋ฆ} type="text" />
{/* React์์ ์ฌ์ฉ ๊ฐ๋ฅํ ref๋ผ๋ ์์ฑ์ ์ฃผ์๊ฐ์_๋ด๋_๊ทธ๋ฆ์ ๊ฐ์ผ๋ก ํ ๋นํ๋ฉด*/}
{/* ์ฃผ์๊ฐ์_๋ด๋_๊ทธ๋ฆ ๋ณ์์๋ input DOM ์๋ฆฌ๋จผํธ์ ์ฃผ์๊ฐ ๋ด๊น๋๋ค. */}
{/* ํฅํ ๋ค๋ฅธ ์ปดํฌ๋ํธ์์ input DOM ์๋ฆฌ๋จผํธ๋ฅผ ํ์ฉํ ์ ์์ต๋๋ค. */}
</div>);
์ฃผ์์
์ถ์ฒ: code states
์ฐธ์กฐ: ๋ณ์ฝ๋ฉ-useRef
<์ค๋์ ์ผ๊ธฐ>
์ด๋ฒ ์ ๋์ html,js ํ์ผ์ react๋ฅผ ํตํด ํ๋์ ํ์ผ๋ก ํต์ ํ ์ ์๋๋ฐ ๊ทธ๋ ๋ค๋ฉด css ํ์ผ๊น์ง ํ๋์ ํ์ผ ์์ ๋ค ๊ฐ์ด ๋ฃ์ด์ค ์ ์๋๊ฑธ๊น๋ผ๋ ๋์ ๋ฌผ์ํ์ ๋๋ํ๋ฅผ ์ฐ์ด์ฃผ๋ ์ ๋์ด์๋ค. styled-components๋ฅผ ํตํด js ํ์ผ ๋ด๋ถ์์ css๋ฅผ ๋ง์ ธ๋ณผ ์ ์๋ค๋ ์ฌ์ค์ด ๋๋ฌด ์ ๊ธฐํ๊ณ ์ด๋ ค์ ์ง๋ง ๊ทธ๋งํผ ๋ฐฐ์ฐ๋ ๊ฒ๋ ๋ง์๋ค.
์ด๋ฒ์๋ ๊ณผ์ ์ญ์ ๋ง๋ง์น ์์๋๋ฐ ํ์ด ํ๋์ ๊ฐ์ด ์งํํ ํ์ด๋ถ์๊ฒ๋ ๋๊ธฐ ์๊ฒ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ค๋ ์์ธ๋ฅผ ๋ง์ด ๋ฐฐ์ ๋ค. ๋ฌธ์ ์ ์์ธ์ ํ๋ํ๋ ์ฐพ์๋ณด๊ณ ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋ ๋๊น์ง ์๋ํด๋ณด๋ ค๋ ๋ชจ์ต์ ๋ณด๋ฉฐ ์ฌ์ํ ๋ฌธ์ ๋๋ผ๋ ์ด๋ ํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด์๋ ๋๊ธฐ ์๊ฒ ์๋ํด๋ณด๋ ์์ธ๋ฅผ ์ง๋๋ฉด ๋์ค์ ํฐ ๋ฌธ์ ๋ฅผ ๋ง์ฃผํ์ ๋๋ ํด๊ฒฐํ ์ ์์ ๊ฒ ๊ฐ๋ค๋ ์๊ฐ์ด ๋ค์๋ ์ ๋์ด์๋ค.