์ปดํฌ๋ํธ ์ฃผ๋ ๊ฐ๋ฐ(CDD)์ ์ปดํฌ๋ํธ ์ฃผ์์ ๊ฐ๋ฐ ํ๋ก์ธ์ค๋ฅผ ๊ณ ์ ํ๋ ๊ฐ๋ฐ ๋ฐฉ๋ฒ๋ก ์ด๋ค.
์ปดํฌ๋ํธ ์์ค์์ ์์ํด ํ์ด์ง๋ ํ๋ฉด ์์ค์์ ๋๋๋ ๊ฒ์ผ๋ก "๋ฐ๋ฅ๋ถํฐ ๋๊น์ง", UI๋ฅผ ๊ตฌ์ถํ๋ ๊ณผ์ ์ ๋งํ๋ค.
๋ ๊ณ ์ฒ๋ผ ์กฐ๋ฆฝํด ๋๊ฐ ์ ์๋ ๋ถํ ๋จ์๋ก UI ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค์ด ๋๊ฐ๋ ๊ฐ๋ฐ์ ์งํํ ์ ์๋ค.
css ์ปดํฌ๋ํธํ ์ํด์ผ๋ก์จ ํด๊ฒฐํด์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์๋ค.
React ํ๊ฒฝ์์ ์ฌ์ฉ ๊ฐ๋ฅํ Styled Components ๋ผ์ด๋ธ๋ฌ๋ฆฌ.
css ์ฝ๋๋ฅผ ๋ค๋ฃฐ ๋์ ๋ถํธํจ
CSS in JS
css๋ ์ฝ๊ฒ Javascript ์์ ๋ฃ์ด์ค ์ ์์ผ๋ฏ๋ก, HTML + JS + CSS๊น์ง ๋ฌถ์ด์ ํ๋์ JSํ์ผ ์์์ ์ปดํฌ๋ํธ ๋จ์๋ก ๊ฐ๋ฐํ ์ ์๋ค.
npm install --save styled-components
Styled Components๋ package.json์ ๋ค์ ์ฝ๋๋ฅผ ์ถ๊ฐํ๋๋ก ๊ถ์ฅํ๊ณ ์์ต๋๋ค.
{
"resolutions": {
"styled-components": "^5"
}
}
const ์ปดํฌ๋ํธ์ด๋ฆ = styled.ํ๊ทธ์ข
๋ฅ`
css์์ฑ 1 : ์์ฑ๊ฐ;
css์์ฑ 2 : ์์ฑ๊ฐ;
`;
์)
const BlueButton = styled.button`
background-color : blue;
color : white;
`;
const ์ปดํฌ๋ํธ์ด๋ฆ = styled(์ฌํ์ฉํ ์ปดํฌ๋ํธ)`
์ถ๊ฐํ css ์์ฑ 1 : ์์ฑ๊ฐ;
์ถ๊ฐํ css ์์ฑ 2 : ์์ฑ๊ฐ;
`;
์)
const BigBlueButton = styled(BlueButton)`
padding : 10px;
margin-top : 10px;
`;
const ์ปดํฌ๋ํธ์ด๋ฆ = styled.ํ๊ทธ์ข
๋ฅ`
css ์์ฑ : ${ (props) => ํจ์ ์ฝ๋ }
`;
1) Props๋ก ์กฐ๊ฑด๋ถ ๋ ๋๋งํ๊ธฐ
const Button = styled.button`
background: ${ (props) => props.skyblue ? "skyblue" : "white" }
`;
<Button skyblue>Button1</Button>
<Button>Button2</Button>
2) Props ๊ฐ์ผ๋ก ๋ ๋๋งํ๊ธฐ
const Button1 = styled.button`
background: ${ (props) => props.color ? "props.color" : "white" }
`;
<Button1>Button1</Button>
<Button1 color = "orange">Button2</Button1>
<Button1 color = "tomato">Button3</Button1>
const Button2 = styled.button`
background: ${(props) => props.color || "white"};
`;
<Button2>Button1</Button2>
<Button2 color="pink">Button2</Button2>
<Button2 color="turquoise">Button3</Button2>
import { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle`
button {
padding : 5px;
margin : 2px;
border-radius : 5px;
}
`
function App() {
return (
<>
<GlobalStyle />
<Button>์ ์ญ ์คํ์ผ ์ ์ฉํ๊ธฐ</Button>
</>
);
}
๊ฐ๊ฐ์ ์ปดํฌ๋ํธ๋ค์ ๋ฐ๋ก ๋ณผ ์ ์๊ฒ ๊ตฌ์ฑํด ์ฃผ์ด ํ ๋ฒ์ ํ๋์ ์ปดํฌ๋ํธ์์ ์์ ํ ์ ์์ต๋๋ค. ๋ณต์กํ ๊ฐ๋ฐ ์คํ์ ์์ํ๊ฑฐ๋, ํน์ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ก ๊ฐ์ ์ด๋ํ๊ฑฐ๋, ์ ํ๋ฆฌ์ผ์ด์ ์ ํ์ํ ํ์ ์์ด ์ ์ฒด UI๋ฅผ ํ๋์ ๋ณด๊ณ ๊ฐ๋ฐํ ์ ์์ต๋๋ค.
Storybook์ ์ค์น๋ฐฉ๋ฒ
npx storybook init
Storybook ์คํํ๊ธฐ
npm run storybook
useRef ๋ก DOM ๋ ธ๋, ์๋ฆฌ๋จผํธ, ๊ทธ๋ฆฌ๊ณ React ์ปดํฌ๋ํธ ์ฃผ์๊ฐ์ ์ฐธ์กฐํ ์ ์๋ค.
const ์ฃผ์๊ฐ์_๋ด๋_๊ทธ๋ฆ = useRef(์ฐธ์กฐ์๋ฃํ) return ( <div> <input ref={์ฃผ์๊ฐ์_๋ด๋_๊ทธ๋ฆ} type="text" /> </div>);
์1) focus
import React, { useRef } from "react";
const Focus = () => {
const f1fo = useRef(null);
const s2fo = useRef(null);
const t3fo = useRef(null);
const handleInput = (event) => {
console.log(event.key, event);
if (event.key === "Enter") {
if (event.target === f1fo.current) {
s2fo.current.focus();
event.target.value = "";
} else if (event.target === s2fo.current) {
t3fo.current.focus();
event.target.value = "";
} else if (event.target === t3fo.current) {
f1fo.current.focus();
event.target.value = "";
} else {
return;
}
}
};
return (
<div>
<h1>ํ์์ฐ์ต</h1>
<h3>๊ฐ ๋จ์ด๋ฅผ ๋ฐ๋ฅด๊ฒ ์
๋ ฅํ๊ณ ์ํฐ๋ฅผ ๋๋ฅด์ธ์.</h3>
<div>
<label>hello </label>
<input ref={f1fo} onKeyUp={handleInput} />
</div>
<div>
<label>world </label>
<input ref={s2fo} onKeyUp={handleInput} />
</div>
<div>
<label>codestates </label>
<input ref={t3fo} onKeyUp={handleInput} />
</div>
</div>
);
};
export default Focus;
์2) media playback
import { useRef } from "react";
function App() {
const videoRef = useRef(null);
const playVideo = () => {
videoRef.current.play();
console.log(videoRef.current);
};
const pauseVideo = () => {
videoRef.current.pause();
videoRef.current.remove();
};
return (
<div className="App">
<div>
<button onClick={playVideo}>Play</button>
<button onClick={pauseVideo}>Pause</button>
</div>
<video ref={videoRef} width="320" height="240" controls>
<source
type="video/mp4"
src="https://player.vimeo.com/external/544643152.sd.mp4?s=7dbf132a4774254dde51f4f9baabbd92f6941282&profile_id=165"
/>
</video>
</div>
);
}
export default App();
styled components์ useRef๋ ์ง์ vscode๋ก ์ฝ๋๋ฅผ ์ณ๋ณด๋ฉด์ ์ค์ตํด ๋ณด์์ง๋ง, Storybook์ ์คํ์ด ์ ๋๋ ํ์์ด ๊ณ์ ์ง์๋์ด ์ถํ์ ํด๋ณผ ์์ ์ด๋ค.
์ปดํฌ๋ํธ์ ๋ค์์ฑ๊ณผ ํจ์จ์ฑ์ ๋ค์ ๋ฐฐ์ธ ์ ์์๊ณ , css ํ์ผ์ ํตํ์ง ์์๋ ๊ตฌํํ ์ ์๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์ฐ๊ฒ ๋์ด ์๋ก์ ๋ค. ์ปดํฌ๋ํธ๋ ํญ์ ์ด๋ ต๋ค.. ๋ ์ง์คํ์ฌ ์๋ฃ๋ฅผ ๋ ์ฐพ์๋ณด๋ฉด์ ์ดํดํ๋๋ก ๋
ธ๋ ฅํด์ผ๊ฒ ๋ค.