๊ณ์ ์ถ๊ฐํ ์์ ์
๋๋ค.
๐ก ๋ฆฌ์กํธ
๋ฆฌ์กํธ๋ฅผ ์ฐ๋ ์ด์ ๋ ์๋์ ๊ฐ์ ํน์ง๋ค๋ก ์ค๋ช
ํด๋ณผ ์ ์๋ค.
๐ Javascript + XML
- ์๋ฐ์คํฌ๋ฆฝํธ์ HTML ํ๊ทธ๋ฅผ ๋ผ์น์ ๋ฌธ๋ฒ
HTML ํ๊ทธ ์์์ ์ค๊ดํธ ({})
๋ฅผ ์ฌ์ฉํด์ JS๋ฅผ ์ธ ์ ์๋ค.
- ์จ๋ณด๋ฉด ๊ต์ฅํ ํธ๋ฆฌํ๋ค.
const apple = "์ฌ๊ณผ"
const title = <h1>{apple} ๋์ค๋ถ?</h1>
๐ ์ปดํฌ๋ํธ
- ํ๋ฉด์ ์ด๋ฃจ๋ '์์'๋ก ์ฌ๋ฌ ๊ณณ์์ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ UI ์ฝ๋ ์กฐ๊ฐ์ด๋ค.
- ๊ฐ๋ฐํ๋ค๊ฐ ํน์ ๋ถ๋ถ์์ ๋ฒ๊ทธ๊ฐ ์ผ์ด๋๋ฉด ๊ทธ ์ปดํฌ๋ํธ๋ง ์์ ํ์ฌ ์ฌ์ฉํ ์ ์๋ค.
๊ทธ๋์ ์ฝ๋์ ์ฌ์ฌ์ฉ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ์ฆ๊ฐ์์ผ์ค๋ค.
- ๋ฆฌ์กํธ ๋ฐ์ดํฐ์ ํ๋ฆ์ ๋จ๋ฐฉํฅ์ผ๋ก ์ด๋ค์ง๋ค. ์ฆ, ๋ถ๋ชจ์์ ์์์ผ๋ก ํ๋ฐฉํฅ์ผ๋ก๋ง ๋ฐ์ดํฐ๋ฅผ props๋ฅผ ์ฌ์ฉํ์ฌ ๊ณต์ ํด์ค ์ ์๋ค.
Props
- ํ๋กํผํฐ์ ์ค์๋ง์ด๊ณ ๋ถ๋ชจ ์ปดํฌ๋ํธ์์ -> ์์ ์ปดํฌ๋ํธ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํด์ฃผ๋ ๊ฐ๋
์ด๋ค.
- ์์ ์ปดํฌ๋ํธ์์ ์ ๋ฌ ๋ฐ์ props๋ ์ฝ๊ธฐ ์ ์ฉ์ด๊ณ Props๋ฅผ ์ ๋ฌํด์ค ์ต์์ ๋ถ๋ชจ ์ปดํฌ๋ํธ๋ง props๋ฅผ ๋ณ๊ฒฝํ ์ ์๋ค.
State
- ์ปดํฌ๋ํธ์ ์ํ๋ฅผ ๋ํ๋ด๊ณ ๋์ ์ธ ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃฐ ๋ ์ฌ์ฉํ๋ค.
- useState ํจ์๋ก ์ํ๋ฅผ ์ถ๊ฐํ ์ ์๋ค.
const [์ํ๋ช
, ์ํ๋ณ๊ฒฝํจ์๋ช
] = useState(์ด๊ธฐ๊ฐ);
๐ ์ ์ด ์ปดํฌ๋ํธ vs ๋น์ ์ด ์ปดํฌ๋ํธ
๋ฆฌ์กํธ๋ ๋ ๊ฐ์ง ๋ฐฉ์์ผ๋ก form์ ์
๋ ฅ์ ์ฒ๋ฆฌํ๋ค.
๋ฐ๋ก ์ ์ด ์ปดํฌ๋ํธ์ ๋น์ ์ด ์ปดํฌ๋ํธ๋ก ๋๋ ์ ์๋๋ฐ
๐ฅ (1) ์ ์ด ์ปดํฌ๋ํธ
- ์ฌ์ฉ์๊ฐ ์ ์ด ์ปดํฌ๋ํธ์ ๋ฐ์ดํฐ๋ฅผ ์
๋ ฅํ๋ฉด ๋ณ๊ฒฝ ์ด๋ฒคํธ ํธ๋ค๋ฌ๊ฐ ํธ์ถ๋๊ณ ์ฝ๋๊ฐ ์
๋ฐ์ดํธ๋ ๊ฐ์ผ๋ก ๋ค์ ๋ ๋๋ง์ด ๋๋ค. ๋ํ์ ์ผ๋ก form์
value
๊ฐ์ useState
๋ก ๊ด๋ฆฌํด์ ๋ฐ์ดํฐ๋ฅผ ์ต์ ํ ํ๋ ๊ฒ์ด๋ค.
const [inputValue, setInputValue] = useState('');
return (
<input value={inputValue} onChange={(e) => setInputValue(e.target.value) />
)
์ด๋ฐ์์ผ๋ก ํ
์คํธ ์
๋ ฅ์ ํ ๋๋ง๋ค onChange์ ์ฝ๋ฐฑ ํธ์ถ์ ๋ฐ๋ผ์ form์ ์ํ๊ฐ ๊ณ์ ์ฆ๊ฐ์ผ๋ก ๋ ๋๋ง ๋๋ ๊ฒ์ ์ ์ด ์ปดํฌ๋ํธ๋ผ๊ณ ํ๋ค.
ํ์ฉ ์)
- form์ ์ ํจ์ฑ ๊ฒ์ฌํ ๋ (์์ด๋๋ ๋น๋ฐ๋ฒํธ ์ฒดํฌ์)
- form์ ๋ฐ์ดํฐ ๊ฐ์ ๋ฐ๋ผ ๋ฒํผ ์ํ๋ฅผ disabled๋ก ํ์
๐ฅ (2) ๋น์ ์ด ์ปดํฌ๋ํธ
- ์ฌ์ฉ์๊ฐ ํผ ํ๋์ ๋ฐ์ดํฐ๋ฅผ ์
๋ ฅํ๋ฉด ์
๋ฐ์ดํธ๋ ์ ๋ณด๊ฐ ๋ฆฌ์กํธ์์ ๋ณ๋ ์ฒ๋ฆฌํ ํ์ ์์ด ์๋ฆฌ๋จผํธ์ ๋ฐ์๋๋ค.
์ ์ด ์ปดํฌ๋ํธ๋ useState๋ก ๊ด๋ฆฌํ์ง๋ง ๋น์ ์ด ์ปดํฌ๋ํธ๋ ref๋ก ๊ด๋ฆฌํ๋ค.
const inputRef = useRef();
return (
<input ref={inputRef} value="hello" />
)
์ด์ฒ๋ผ ref๋ฅผ ํ์ฉํด ์
๋ ฅ ํผ์ ์ํ๋ฅผ ์ ๊ทผํ ์ ์๋ค. button์ ํด๋ฆญํ ๋ ref๋ฅผ ํตํด ๊ฐ์ ์ป์ ์ ์๋ค.
ํ์ฉ ์)
- ๋ถํ์ํ ๋ ๋๋ง์ ์ค์ด๊ณ , ๋ฒํผ์ ํด๋ฆญํ์ฌ ์ ์ถํ ๋ ๊ฐ์ด ํ์ํ ๊ฒฝ์ฐ์ ์ฌ์ฉ
๐ ์ด๋ฒคํธ
์ฌ์ฉ์ ์ด๋ฒคํธ(ํด๋ฆญ, ์คํฌ๋กค ๋ฑ) ๋ค๋ฃจ๊ธฐ
- ์ผ๋ฐ ์๋ฐ์คํฌ๋ฆฝํธ ์ด๋ฒคํธ ๋ชฉ๋ก๊ณผ ๋์ผํ์ง๋ง ์ค๊ฐ์ ๋๋ฌธ์๋ก ์ฐ๋ฉด ๋๋ค.
- onclick -> onClick
- onsubmit -> onSubmit
SPA (Single Page Application)
์ฌ์ฉ์๊ฐ ํ ํ์ด์ง์ ๋จธ๋ฌด๋ฅด๋ฉด์ ์๋ก์ด ํ์ด์ง๋ก ๋ฐ๋ ๋ ๋ง๋ค ํ์ํ ์ ๋ณด๋ง ์ถ๊ฐ์ ์ผ๋ก ๋ฐ์์ ๋ถ๋ถ์ ์ผ๋ก ์
๋ฐ์ดํธํ๋ค.
- ์ฒซ ํ๋ฉด ๋ก๋ฉ ์๊ฐ์ด ๋ค์ ๊ธธ๋ค๋ ์ ์ด ์๋ค.
- ๋ผ์ฐํ
์ ๋ฐ๋ผ ๋ค๋ฅธ ๋ทฐ๋ฅผ ๋ณด์ฌ์ค ์ ์๋ค.
๐ ๊ฐ์ ๋(Virtual DOM)
- DOM์ ์ถ์ํํ ๊ฐ์์ ๊ฐ์ฒด์ด๋ค.
์ผ๋ฐ์ ์ธ ๋ธ๋ผ์ฐ์ ๋ ๋๋ง ๊ณผ์ ์ผ๋ก๋
1. HTML ํ์ฑ -> DOM ๊ฐ์ฒด ์์ฑ -> CSS ํ์ฑ -> ์คํ์ผ ๊ท์น ์์ฑ
2. ์์ ๊ณผ์ ์ ํฉ์ณ ์ค์ ๋ก ์น ๋ธ๋ผ์ฐ์ ์ ๋ณด์ฌ์ค์ผ ํ 'render tree' ๋ฅผ ๋ง๋ ๋ค.
3. ์ด ๋ ๋ ํธ๋ฆฌ ๊ธฐ์ค์ผ๋ก ๋ ์ด์์์ ๋ฐฐ์นํ๊ณ Paint์ ์์
์ ํ๋ค.
์ด ๊ณผ์ ์์ ๋ณ๊ฒฝ๋ ๊ตฌ์ฑ ์์๊ฐ ๋ฐ๋๋ฉด ์ ์ฒด๊ฐ ๋ ๋๋ง์ด ๋๋๋ฐ ๋งค์ฐ ๋นํจ์จ์ ์ด๋ผ๊ณ ๋ณผ ์ ์๋ค.
๊ทธ๋์ ๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํ๋ ์ด์ ์ค ํ๋๊ฐ ๋ฐ๋ก Virtual DOM ์ด๋ค.
Virtual DOM์ ๊ธฐ์กด DOM๊ณผ ๋ณ๊ฒฝ๋ Virtual DOM์ ์ฐจ์ด๋ฅผ ํ๋จํ๊ณ ๋ณ๊ฒฝ๋ ๊ตฌ์ฑ์์๋ง ์ฐพ์ ๊ทธ๋ถ๋ถ๋ง ๋ ๋๋ง์ด ๋๋ค.
๐ diffing ์๊ณ ๋ฆฌ์ฆ
์์ ์ค๋ช
ํ Virtual DOM๊ณผ ๊ด๋ จ์ด ํฌ๋ค.
๋ณ๊ฒฝ๋ ๋ถ๋ถ๋ง ๊ฐ์งํด์ ๋ฐ๋ ๋ถ๋ถ๋ง ์
๋ฐ์ดํธ ํ๋ ๋ฐฉ์์ ์ทจํ๊ฒ ๋๋๋ฐ ์ด ๋ณ๊ฒฝ๋ ๋ถ๋ถ์ ๊ฐ์งํ๋ ๊ฒ์ diffing Algorihm ์ด๋ผ๊ณ ํ๋ค.
์ผ๋ฐ์ ์ธ ํธ๋ฆฌ ๊ตฌ์กฐ์ ๋น๊ต๋ O(n^3)์ ์๊ฐ์ด ์์๋๋ค๊ณ ํ๋ค. ํ์ง๋ง ๋ฆฌ์กํธ๋ ์ด๋ฌํ diffing ์๊ณ ๋ฆฌ์ฆ์ผ๋ก ์ธํด O(n)์ ์๊ฐ์ ํด๊ฒฐํ๊ณ ์๋ค.
๐ key๋ฅผ ์ฌ์ฉํ๋ ์ด์
์ด๊ฒ ๋ํ Virtual DOM๊ณผ diffing ์๊ณ ๋ฆฌ์ฆ๊ณผ ์ฐ๊ด์ด ์๋ค.
ํ๋์ JSX ํ๊ทธ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด๋ก ๊ตฌ์ฑ๋๋๋ฐ ์ด ๊ฐ์ฒด์๋ ํด๋น ๊ฐ์ฒด๊ฐ Virtual DOM์ ์์์์ ํ์ธํด์ฃผ๋ ์ฌ๋ณผ๊ฐ๊ณผ ๊ฐ๊ฐ์ Virtual DOM๋ฅผ ๊ณ ์ ํ๊ฒ ๊ตฌ๋ถํ๋ key ๊ฐ์ด ๋ค์ด๊ฐ๊ฒ ๋๋ค.
๊ทธ๋์ map
์ ์ฌ์ฉํ์ ๋, ํด๋น ๋ฆฌ์คํธ์ ๊ณ ์ ํ key๊ฐ์ ๋ฃ์ด์ค์ผํ๋ค. ๋ฆฌ์กํธ๋ ์ด key๋ค์ ๋น๊ต๋ฅผ ํตํด ๋ฆฌ์คํธ์ ์์๊ฐ ์ถ๊ฐ๋๊ฑฐ๋ ์ญ์ ๋์์ ๋ ์ํ๋ฅผ ๋น ๋ฅด๊ฒ ๊ฐ์งํ๊ณ ๋ฐ์ํ ์ ์๋ค.
์ฝ๊ฒ ๋งํด ์๋ฆฌ๋จผํธ ํน์ ์ปดํฌ๋ํธ์ ๋ณํ๋ฅผ ๊ฐ์งํ๊ธฐ ์ํจ์ด๊ณ ์ด๋ ํจ์จ์ ์ธ DOM ์ฌ์ฉ์ผ๋ก ๊ท๊ฒฐ๋๋ค.
๐ Hooks
useState
- ์ปดํฌ๋ํธ์ ์ํ๋ฅผ ๊ด๋ฆฌํ ์ ์๋ค.
์ํ์ ๋ฐ๋ผ ์ฆ๊ฐ์ ์ผ๋ก ๋ค๋ฅธ ํ๋ฉด๋ค์ ์ถ๋ ฅํด์ค๋ค. (= ๋ ๋๋ง)
useEffect
- ๋ ๋๋ง ์ดํ์ ์คํํ ์ฝ๋๋ฅผ ๋ง๋ค์ด์ค๋ค.
- ์ฌ์ด๋ ์ดํํธ๋ฅผ ๊ฐ์งํ๋ ํจ์, ๊ฐ์๋์์ด ๋ณํ๋ฉด ์ฝ๋ฐฑ์ ์คํํ๋ค.
useEffect(๊ฐ์ ๋์์ด ๋ณํ๋ฉด ๋์ ํ ์ฝ๋ฐฑ, [๊ฐ์๋์])
ํด๋์ค ์ปดํฌ๋ํธ ์์ ์๋ ์๋์ ๊ฐ์ ํจ์๋ก useEffect ์ญํ ์ ํ๋๋ฐ, ์ด๊ฒ๋ ๊ธฐ์ ๋ฉด์ ๋ useEffect์ ์ฐ๊ด์์ผ ์ง๋ฌธ์ด ๋น๋ฒํ๊ฒ ๋์ค๊ธฐ ๋๋ฌธ์ ์ ๋ฆฌํด๋ดค๋ค.
componentDidMount: ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค๊ณ , ์ฒซ ๋ ๋๋ง์ ๋ค ๋ง์น ํ ์คํ.
componentDidUpdate: ๋ฆฌ๋ ๋๋ง์ ์๋ฃํ ํ ์คํ. ์ฆ render()๊ฐ ์
๋ฐ์ดํธ๋ ๋๋ง๋ค ์คํ
compoenntWillUnMount: ์ปดํฌ๋ํธ๋ฅผ DOM์์ ์ ๊ฑฐํ ๋ ์คํ.
์ ๊ฐ๋
๋ค์ด useEffect๋ก ์ด๋ป๊ฒ ์ฐ์ด๋์ง ?
- Component๊ฐ Mount ๋์์ ๋(๋ํ๋ ๋) =
componentDidMount
- deps๋ถ๋ถ์ ์๋ตํ๋ค๋ฉด ํด๋น ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง ๋ ๋๋ง๋ค useEffect๊ฐ ์คํ๋๋ค.
useEffect(() => {
console.log("๋ ๋๋ง ๋ ๋๋ง๋ค ์คํ");
});
- ๋ง์ฝ ๋งจ ์ฒ์ ๋ ๋๋ง ๋ ๋ ํ ๋ฒ๋ง ์คํํ๊ณ ์ถ๋ค๋ฉด deps์์น์ ๋น ๋ฐฐ์ด์ ๋ฃ์
useEffect(() => {
console.log("๋งจ ์ฒ์ ๋ ๋๋ง๋ ๋ ํ ๋ฒ๋ง ์คํ");
},[]);
- Component๊ฐ Update ๋์์ ๋(props, state ๋ณ๊ฒฝ) =
componentDidUpdate
useEffect(() => {
console.log("name์ด๋ผ๋ ๊ฐ์ด ์
๋ฐ์ดํธ ๋ ๋๋ง ์คํ");
},[name]);
- Component๊ฐ ์ฌ๋ผ์ง ๋ & Update ๋๊ธฐ ์ง์ ์ =
compoenntWillUnMount
- ์ธ๋ง์ดํธ ๋ ๋๋ง cleanUp ํจ์๋ฅผ ์คํ์ํค๊ณ ์ถ๋ค๋ฉด deps์ ๋น๋ฐฐ์ด์ ๋ฃ์ผ๋ฉด ๋๋ค.
- ํน์ ๊ฐ์ด ์
๋ฐ์ดํธ ๋๊ธฐ ์ง์ ์ cleanup ํจ์๋ฅผ ์คํ์ํค๊ณ ์ถ๋ค๋ฉด deps์ ํด๋น ๊ฐ์ ๋ฃ์ด์ฃผ๋ฉด ๋๋ค.
useEffect(() => {
console.log("hello");
return () => {
console.log("cleanUp ํจ์");
};
});
๐ฅ ์ ์์ฌํญ
- useEffect๋ ์ฒซ ๋ ๋๋ง ํ ์คํ๋๋ค.
- ์ต์ด์ ํ ๋ฒ์ ๋ฌด์กฐ๊ฑด ์คํ๋๋ค.
useRef
- ์ปดํฌ๋ํธ๋ HTML์ DOM์ ์์๋ฅผ ref๋ก ๊ด๋ฆฌํ ์ ์๋ค.
useMemo & useCallback
- ์์กด์ฑ ๋ฐฐ์ด์ ์ ํ ๊ฐ์ด ๋ณํ ๋๋ง ๊ฐ, ํจ์๋ฅผ ๋ค์ ์ ์ํ ์ ์๋ค.
- ์ฃผ๋ก ๋ ๋๋ง ์ฑ๋ฅ์ ์ต์ ํํด์ผ ํ๋ ์ํฉ์ ์ฌ์ฉํ๋ค.
- ๋ ๋๋ง๋ง๋ค ์๋กญ๊ฒ ํจ์๊ฐ ์ถ๊ฐ๋๋ ๊ฒ์ ๋ฐฉ์งํ๊ณ ๊ฐ์ ๋์์ด ๋ณํ์ง ์๋ ์ด์ ํจ์๋ฅผ ์๋กญ๊ฒ ์์ฑํ์ง ์๋๋ค.
useCallback(์ฝ๋ฐฑ, [์์กด์ฑ])
// ๋ ๋๋ง๋ง๋ค ๋งค๋ฒ ์๋กญ๊ฒ ์์ฑ๋จ
const foo = () => {}
// ๋งค๋ฒ ์๋กญ๊ฒ ์์ฑ๋์ง ์๋๋ค.
const foo2 = useCallback(() => {}, [])
// a ๊ฐ์ด ๋ฐ๋์ง ์๋ ์ด์ ๋งค๋ฒ ์๋กญ๊ฒ ์์ฑ๋์ง ์๋๋ค.
const foo3 = useCallback(() => {}, [a])
๐ก ์ํ๊ด๋ฆฌ
์ํ๊ด๋ฆฌ๋ ์ง์ ์ฌ์ฉํด๋ณด๊ณ ์๊ฒ๋ ํน์ง๋ค๊ณผ ๋์ ์๊ฐ๋ค์ ๊ฐ์ด ์ ๋ฆฌ ํด๋ดค์ต๋๋ค.
npm trends
๋ผ๋ ์ฌ์ดํธ์์ Redux์ Mobx, ๊ทธ๋ฆฌ๊ณ Recoil์ ๋ํฅ์ ํ์
ํด๋ดค๋๋ฐ ์ฌ์ ํ Redux๊ฐ ์๋์ ์ด๊ธดํ๋ค. ์๋ฌด๋๋ ๋ฆฌ๋์ค๊ฐ ๊ฐ์ฅ ์ค๋์ ์ ๋์๊ธฐ ๋๋ฌธ์ ์๋ ์ ๋ง๋ค์ด์ง ํ๋ก์ ํธ๋ค์ ํ์ฌ๊น์ง ์ด์ํ๊ณ ๊ฐ๋ฐํ๋ ค๋ฉด ๋ฆฌ๋์ค๋ฅผ ์์์ผ๋๋ ๊ทธ๋ ๋ค๊ณ ๋ณธ๋ค. ๊ฐ์ธ์ ์ผ๋ก ๋๋ recoil ์ฐฌ์
๐ Redux
action, dispatch, reducer, store๊ฐ ์๋ค.
- action : action์ ์ํ(state)๋ฅผ ๋ฐ๊พธ๋ ๋ฐฉ์์ด๋ค. ๋ฐ๋์ typeํ๋๊ฐ ์์ด์ผ ํ๋ค.
- dispatch : action์ ๋ฐ์์ํค๋ ๊ฒ์ผ๋ก action ๊ฐ์ฒด๋ฅผ ํ๋ผ๋ฏธํฐ๋ก ๋ฐ๋๋ค.
- reducer : ๋ณํ๋ฅผ ์ผ์ผํค๋ ํจ์๋ก action์ ๊ฒฐ๊ณผ๋ก ์ํ๋ฅผ ์ด๋ค ์์ผ๋ก ๋ฐ๊ฟ์ง ๊ตฌ์ฒด์ ์ผ๋ก ์ ์ํ๋ ๋ถ๋ถ
- store : ๋ฆฌ๋์ค๋ฅผ ์ ์ฉํ๊ธฐ ์ํ ์ค์ ์ ์ฅ์ ์ด๋ฉฐ, ๋จ ํ ๊ฐ๋ง ๊ฐ์ง ์ ์๋ค.
์ํ๋ฅผ ์ฝ์ ๋๋ getState() ์ํ๋ฅผ ๋ฐ๊ฟ ๋๋ dispatch()๋ฅผ ํธ์ถํ๋ค.
- ๋ฐ์ดํฐ ํ๋ฆ์ ๋จ๋ฐฉํฅ์ผ๋ก ํ๋ฅด๊ฒ ํ๋ค.
- ์ํ๋ฅผ ์ ์ญ์ ์ผ๋ก ๊ด๋ฆฌํ๊ธฐ ๋๋ฌธ์ ์ด๋ ์ปดํฌ๋ํธ์ ์ํ๋ฅผ ๋ฌ์ผํ ์ง ๊ณ ๋ฏผํ ํ์๊ฐ ์๊ฒ ํ๋ค.
- ์ํ๊ด๋ฆฌ์์ ๋ถ๋ณ์ฑ ์ ์ง๊ฐ ๋งค์ฐ ์ค์ํ๋ค.
Spread ๋ฐฉ์(...) ๋ณด๋ค ์ข๋ ๊น๋ํ๊ฒ ์ฒ๋ฆฌํ๊ธฐ ์ํด์๋ immer.js ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ถ๋ณ์ฑ ์ ์ง๋ฅผ ํด์ค ์ ์๋ค.
- flux ์ํคํ
์ฒ๋ฅผ ๋ฐ๋ฅธ๋ค.
๐ฅ flux ๊ตฌ์กฐ๋ ? ๋จ๋ฐฉํฅ ๋ฐ์ดํฐ ํ๋ฆ์ ๊ฐ์ง๋ ๊ตฌ์กฐ.
์๋ก์ด ๋ฐ์ดํฐ๋ฅผ ๋ฃ์ผ๋ฉด ์ฒ์๋ถํฐ ๋ค์ ์์๋๋ ๋ฐฉ์์ผ๋ก ์ค๊ณ๋์ด์๋ค.
- ๋ฐ์ดํฐ ํ๋ฆ์ dispatch -> store -> view ์์์ด๋ค. view์์ ์
๋ ฅ์ด ๋ฐ์ํ๋ฉด ์ก์
์ ํตํด ๋์คํจ์น๋ก ํฅํ๊ฒ ๋๋ค.
- ๋น๋๊ธฐ ์ฒ๋ฆฌ์ redux-saga๋ redux-thunk๊ฐ์ ๋ฏธ๋ค์จ์ด๊ฐ ํ์์ด๋ค.
- ์ฌ๋ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํจ๊ป ์ฌ์ฉํ๊ฒ ๋๋ ๋ฌ๋์ปค๋ธ๊ฐ ๋์ ํธ
- ์ก์
ํ๋ ์ถ๊ฐํ๋๋ฐ ์์ฑ์ด ํ์ํ ๋ถ๋ถ์ด ๋ง๊ณ ์ปดํฌ๋ํธ์ ์คํ ์ด๋ฅผ ์ฐ๊ฒฐํ๋ ํ์์ ์ธ ๋ถ๋ถ๋ค์ด ์์ด์ ์ฝ๋๋์ด ์๋์ ์ผ๋ก ๋ง์์ง๋ค.
๋ถ๋ณ์ฑ์ ์ ์งํ๋ ์ด์ ?
- ์ฌ์ด๋ ์ดํํธ๋ฅผ ๋ฐฉ์งํ์ฌ ํ๋ก๊ทธ๋๋ฐ ๊ตฌ์กฐ์ ๋จ์์ฑ์ ์งํจ๋ค.
์๋ณธ ๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ๋ ๊ฒฝ์ฐ, ์๋ณธ ๋ฐ์ดํฐ๋ฅผ ์ฐธ์กฐํ๊ณ ์๋ ๋ค๋ฅธ ๊ฐ์ฒด์์ ์์์น ๋ชปํ ์ค๋ฅ๊ฐ ๋ฐ์ํ ์๋ ์๊ธฐ ๋๋ฌธ์ด๋ค.
๐ Mobx
- ๋ฆฌ๋์ค์ ๋ค๋ฅด๊ฒ ์คํ ์ด์ ์ ํ์ด ์๋ค. ์ฌ๋ฌ๊ฐ์ฌ๋ ์๊ด ์์.
observable์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ฌ์ฉํ๋ค.
- ์ ๋์ ์ผ๋ก ํ์ํ ๊ฒฝ์ฐ์๋ง state๋ฅผ ๋ณ๊ฒฝํ๋ค.
- ๊ฐ์ฒด ์งํฅ์ ์ด๋ค. OOP ๋ฅผ ๋ฐ๋ฆ. ๊ทธ๋์ ์๋ฒ ๊ฐ๋ฐ์๋ค์๊ฒ ์น์ํ ์ํคํ
์ณ๋ฅผ ์ ๊ณตํ ์ ์๋ค. ํนํ ์๋ฐ ์คํ๋ง๊ณผ ์ ์ฌํ๋ค.
- ๋ฆฌ๋์ค์ ๋ณด์ผ๋ฌํ๋ ์ดํธ ์ฝ๋๊ฐ ์ฌ๋ผ์ง๊ณ ๋ฐ์ฝ๋ ์ดํฐ๋ฅผํตํด ๊น๋ํ ์ฝ๋ ์์ฑ์ด ๊ฐ๋ฅํ๋ค.
- ๋ณด์ผ๋ฌ ํ๋ ์ดํธ๋ ? ๋ฐ๋ณต์ ์ผ๋ก ์ฌ์ฉ๋๋ ๋ถ๋ถ์ ์ฌ์ฌ์ฉํ๋ ๊ฒ์ ์๋ฏธ
- State์ ๋ถ๋ณ์ฑ ์ ์ง๋ฅผ ์ํด ๋
ธ๋ ฅํ์ง ์์๋ ๋๋ค. ๋ฆฌ๋์ค์ ๋น๊ตํ์ ๋ ๋ฆฌ๋์ค์์๋ state์ ๋ถ๋ณ์ฑ ์ ์ง๋ฅผ ์ํด ์ฌ๋ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ(immer)๋ฅผ ์ฌ์ฉํ๊ธฐ๋ ํ๋๋ฐ, mobx์์๋ ๊ทธ๋ฌ์ง ์์๋ ๋๋ค.
๐ Recoil
- ํ์ด์ค๋ถ์์ ๋ง๋ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
- ๊ฐ์ฅ ๋ฆฌ์กํธ์ค๋ฝ๋ค. ๋ฆฌ์กํธ hooks์ ๋๋์ผ๋ก ์น์ํ๊ฒ ์์
ํ ์ ์์
๋ฌ๋์ปค๋ธ๊ฐ ๊ต์ฅํ ๋ฎ๋ค.
- ์ด๊ธฐ ์ธํ
์ด ์ ๋ง ๊ฐํธํ๊ณ recoil ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ธ์ ๋ฐ๋ก ์ค์นํด์ผ ๋ ๊ฒ๋ค์ด ์์ด์ ์ข๋ค.
- atom, selector ๊ธฐ๋ฅ๋ง ์๊ณ ์๋ค๋ฉด ๊ตฌํ ์๊ฐ๋ฅ
- ์ด๊ฒ๋ mobx ์ฒ๋ผ ์์ ๋ก์์ ํ์
์๋ค๊ณผ ๋ฃฐ ์ ํด์ ์์
ํด์ผํ๋ค.
- ๋๋ฒ๊น
๋๊ตฌ ์ง์์ด ๋ฏธ๋ฏธํ๋ค.
- ์ง๊ด์ ์ด๊ณ ๋จ์ํ ํธ์ด๋ค.
๐ React-query
- ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ๋ฐ์ดํฐ ํ์นญ
- ๐ฅํต์ฌ ๊ธฐ๋ฅ์ ๋ฐ์ดํฐ ์บ์ฑ์ด๋ค.๐ฅ ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ ๋ฐ์ ๊ฒฐ๊ณผ๋ฅผ ์บ์๋ก ์ ์ฅํ์ฌ, ๋์ผํ ์์ฒญ์ด ๋ฐ๋ณต๋์ด๋ ์๋ก์ด ์์ฒญ์ ๋ณด๋ด์ง ์๊ณ ์ ์ฅ๋์ด ์๋ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ด๋ ๋คํธ์ํฌ ์ฌ์ฉ๋์ ์ค์ด๊ณ , ์ ํ๋ฆฌ์ผ์ด์
์ฑ๋ฅ์ ํฅ์์ํค๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
- ๋ก๋ฉ ๋ฐ ์ค๋ฅ ์ํ ๊ด๋ฆฌ (๋ฐ์ดํฐ๊ฐ ๋ก๋ฉ๋์์ ๋์ ์ค๋ฅ ๋ฐ์์ ์ฌ์ฉ์์๊ฒ ์๋ ค์ค๋ค)
- ๋ฆฌ์กํธ ์ฟผ๋ฆฌ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ํตํด ์ฟผ๋ฆฌ์ ๋ฌด์จ ์ผ์ด ์ผ์ด๋ฌ๋์ง ์ถ์ ์ด ๊ฐ๋ฅํ๋ค.
- ๊ฒ์ํ ๊ฐ์ ๊ฒ์ ๋ง๋ค ๋ Pagination ๊ธฐ๋ฅ์ ์ฌ์ฉํ์ฌ ํ๋ฆฌํจ์นญ(Prefetching)์ ์ํํ ์ ์๋ค.
*ํ๋ฆฌํจ์นญ(Prefetching)์ด๋ ? ๋ค์ ํ์ด์ง ๋ฐ์ดํฐ๋ฅผ ๋ฏธ๋ฆฌ ๊ฐ์ ธ์์, ๋ค์ ํ์ด์ง๋ก ๋์ด๊ฐ ๋ ๋ฏธ๋ฆฌ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์๊ธฐ ๋๋ฌธ์ ๋งค๋๋ฝ๊ฒ ์ฒ๋ฆฌ ๋๋ค.
- ๊ฐ๋น์ง ์ปฌ๋ ์
์ ์ด์ฉํ์ฌ ์๋์ผ๋ก ๋ฉ๋ชจ๋ฆฌ๋ฅผ ๊ด๋ฆฌํด์ค๋ค.
๐ก ํ๋ ์์ํฌ Nextjs
๐Next์์ ์ ๊ณตํด์ฃผ๋ ๊ธฐ๋ฅ๋ค
- ์ฝ๋๋ฅผ ๊ณ ์น๋๋๋ก ๋ณ๊ฒฝ๋๋
ํซ ๋ฆฌ๋ก๋ฉ
์ด ํ์ฌ๋์ด์๋ค.
pages/product/[slug]
๋ผ๋ ํ๊ธฐ๋ก ๋ค์ด๋๋ฏนํ๊ฒ path๋ฅผ ๋ณ๊ฒฝํ ์ ์์๋ค.
- ์์ฌ์ด ๋ฐฐํฌ ์์คํ
Vercel ์ ๊ณต
- ํ๋ก ํธ์๋์ ํ์ํ ๊ฐ๋จํ API ๊ตฌ์ฑ
- SEO ๊ฒ์ ์์ง ์ต์ ํ (์ฌ์ฉ์๋ค์ด ํจ์ฌ ๋ ์ฝ๊ฒ ์น์๋น์ค๋ฅผ ์ฐพ์๊ฐ ์ ์๋๋ก)
- ์ฝ๋ ๋ถํ (์ฝ๋ ์คํ๋ฆฌํ
) ์ผ๋ก ํ์ฌ๊ธ ๋ ๋๋ง ์๋๊ฐ ๋น ๋ฅด๋ค.
- ํ์ผ ๊ธฐ๋ฐ ๊ตฌ์กฐ
/pages/main
- pre-fetching
๐SEO(๊ฒ์ ์์ง ์ต์ ํ)
๊ฒ์ ๊ฒฐ๊ณผ ์์์ ๋
ธ์ถ๋ ์ ์๋๋ก ํ๋ ์์
์ ๋งํ๋ค.
๐SSR (์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง)
- ์๋ฒ๊ฐ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์์ ๊ทธ๋ฆฐ๋ค.
์ฅ์
- ๊ตฌ๊ธ, ๋ค์ด๋ฒ, ๋ค์ ๋ฑ์ ๊ฒ์ ์์ง์ด ์ฐ๋ฆฌ๊ฐ ๋ง๋ ์น ์ ํ๋ฆฌ์ผ์ด์
์ ํ์ด์ง๋ฅผ ์ํํ๊ฒ ์์งํด์ค๋ค.
โ ๋ฐ๋ผ์ ์น ์๋น์ค์ ๊ฒ์ ์์ง ์ต์ ํ๋ฅผ ์ํด์๋ผ๋ฉด ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง์ ๊ตฌํ ํด์ฃผ๋ ๊ฒ์ด ์ข๋ค.
- ์ด๊ธฐ ๋ ๋๋ง ์ฑ๋ฅ์ ๊ฐ์ ํ ์ ์๋ค.
์๋ฅผ๋ค๋ฉด, SSR์ด ๊ตฌํ๋์ง ์์ ์น ํ์ด์ง์ ์ฌ์ฉ์๊ฐ ๋ฐฉ๋ฌธํ๋ฉด, JS๊ฐ ๋ก๋ฉ๋๊ณ ์คํ๋ ๋ ๊น์ง ์ฌ์ฉ์๋ ๋น์ด ์๋ ํ์ด์ง๋ฅผ ๋ณด๋ฉฐ ๋๊ธฐํด์ผํ๋ค.
์ฌ๊ธฐ์ API๊น์ง ํธ์ถํด์ผ ํ๋ค๋ฉด ์ฌ์ฉ์์ ๋๊ธฐ ์๊ฐ์ ๋๋์ฑ ๊ธธ์ด์ง๋ค.
๋ฐ๋ฉด ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง์ ๊ตฌํํ ์น ํ์ด์ง๋ผ๋ฉด JS ํ์ผ ๋ค์ด๋ก๋๊ฐ ์๋ฃ๋์ง ์์ ์์ ์์๋ HTML์์ ์ฌ์ฉ์๊ฐ ๋ณผ ์ ์๋ ์ฝํ
์ธ ๊ฐ ์๊ธฐ ๋๋ฌธ์ ๋๊ธฐ ์๊ฐ์ด ์ต์ํ๋๊ณ , ์ด๋ก ์ธํด ์ฌ์ฉ์ ๊ฒฝํ๋ ํฅ์๋๋ค.
๋จ์
- SSR์ ๊ฒฐ๊ตญ ์๋ ๋ธ๋ผ์ฐ์ ๊ฐ ํด์ผ ํ ์ผ์ ์๋ฒ๊ฐ ๋์ ์ฒ๋ฆฌํ๋ ๊ฒ์ด๋ฏ๋ก ์๋ฒ ๋ฆฌ์์ค๊ฐ ์ฌ์ฉ๋๋ค.
- ์๋ง์ ์ฌ์ฉ์๊ฐ ๋์์ ์น ํ์ด์ง์ ์ ์ํ๋ฉด ์๋ฒ์ ๊ณผ๋ถํ๊ฐ ์๊น.
โ ํด๊ฒฐ๋ฐฉ์ : ์ฌ์ฉ์๊ฐ ๋ง์ ์๋น์ค๋ผ๋ฉด ์บ์ฑ๊ณผ ๋ก๋ ๋ฐธ๋ฐ์ฑ์ ํตํด ์ฑ๋ฅ์ ์ต์ ํ ํด์ค์ผํ๋ค.
- ๊ฐ๋ฐ์ด ์ด๋ ค์ ์ง ์ ์๋ค.
SSR์ ํ๋ฉด ํ๋ก์ ํธ์ ๊ตฌ์กฐ๊ฐ ์ข ๋ ๋ณต์กํด์ง ์ ์๊ณ , ๋ฐ์ดํฐ ๋ฏธ๋ฆฌ ๋ถ๋ฌ์ค๋ ํ๋ฆฌํจ์นญ๊ณผ ์ฝ๋ ์คํ๋ฆฌํ
์ ํธํ ๋ฑ ๊ณ ๋ คํด์ผ ํ ์ฌํญ์ด ๋ ๋ง์์ง๊ธฐ ๋๋ฌธ์ด๋ค.
- SSR์ ๋ด๋นํ๋ ํจ์ : getServerSideProps
- ์ฒซ ํ์ด์ง์ ๋ก๋ฉ์๊ฐ์ด CSR์ ๋นํด ์งง๋ค.
์ด๋ฏธ ๋ ๋๋ง๋ ํ์ด์ง๋ฅผ ์๋ฒ์์ ๋ฐ์์ ํ๋ฉด์ ๊ตฌ์ฑํ๊ธฐ ๋๋ฌธ์ด๋ค.
- SEO ์ธก๋ฉด์์๋ ์ ๋ฆฌํ๋ค.
๊ฒ์์์ง์ด ํฌ๋กค๋ง์ ํ ๋ ์๋ฒ์ ์ด๋ฏธ ํ๋์ฝ๋ฉ๋ html ํ์ผ์ด ์๊ธฐ ๋๋ฌธ์ ๊ฒ์์์ง์ด ์ด ํ์ด์ง๊ฐ ์ด๋ค ์ญํ ์ ํ๋์ง ํ์
ํ๋๋ฐ ์ฉ์ดํ๋ค.
- SSR์ ์๋ฒ ๋ถํ๊ฐ ์ผ์ด๋๋ ํ์์ ๋ฐ๋ผ SSG์ ISR์ ์ ์ ํ๊ฒ ์ฐ๋ฉด ์ข๋ค.
๐CSR (Client Side Render)
- ํด๋ผ์ด์ธํธ๊ฐ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์์ ๊ทธ๋ฆฐ๋ค.
- ์ฒ์ ๋ก๋ฉ์ jsํ์ผ์ ์ฉ๋์ด ํด์๋ก ๋ก๋ฉ์๊ฐ์ด ๊ธธ๋ค.
ํ์ง๋ง ์ด๊ธฐ์ ๋ก๋ฉ์ด ๋๊ณ ๋๋ฉด ํ์ด์ง ๊ฐ ์ด๋ ์ ๋งค์ฐ ๋น ๋ฅธ ์๋๋ก ์ ํ๋๊ณ , ํ์ด์ง ์ด๋ ์ ์๋ก๊ณ ์นจ๋๋ ํ์๋ ์ฌ๋ผ์ง๋ค.
๐SSG (Statice-Site Generation)
- ์ ์ ์ธ ์ฌ์ดํธ๋ฅผ ์์ฑํ๋ค : ์ ์ ์ธ ์ฌ์ดํธ๋ฅผ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์์ ๊ทธ๋ ค์ค๋ค.
SSG์ ๋ด๋นํ๋ ํจ์๋ก๋ getStaticProps
๋ผ๋ ํจ์๊ฐ ์๋ค.
์ธ์ ์ฐ์ด๋ ? ๋ธ๋ก๊ทธ ๊ฐ์ด ์ ์ ์ผ ์ ์๋ ๊ฒ๋ค์ ์ด๊ฒ์ ์ฌ์ฉํ๋ค.
๐ISR (Incremental Static Regeneration)
- ์ฆ๋ถ ์ ์ ์ฌ์ดํธ๋ฅผ ์ฌ์์ฑ ํ๋ค. (ํน์ ์ฃผ๊ธฐ๋ก) ์ ์ ์ธ ์ฌ์ดํธ์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์์ ๋ค์ ๊ทธ๋ ค์ค๋ค.
์ด๊ฑธ ๋ด๋นํ๋ ํจ์๋ getStaticProps
๋ผ๋ ํจ์๋ค.
๊ฐ์ ๋ฆฌํดํ๋ฉด์ ๋์ํ๋ค.
๐ก ํ๊ฒฝ์ธํ
๐Webpack
- ์นํฉ์ด๋ ์ต์ ํ๋ฐํธ์๋ ํ๋ ์์ํฌ์์ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋๋ ๋ชจ๋ ๋ฒ๋ค๋ฌ(Module Bundler)์
๋๋ค. ๋ชจ๋ ๋ฒ๋ค๋ฌ๋ ์น ์ ํ๋ฆฌ์ผ์ด์
์ ๊ตฌ์ฑํ๋ ์์(HTML, CSS, Javscript, Images ๋ฑ)์ ๋ชจ๋ ๊ฐ๊ฐ์ ๋ชจ๋๋ก ๋ณด๊ณ ์ด๋ฅผ ์กฐํฉํด์ ๋ณํฉ๋ ํ๋์ ๊ฒฐ๊ณผ๋ฌผ์ ๋ง๋๋ ๋๊ตฌ๋ฅผ ์๋ฏธํฉ๋๋ค
์ฌ์ฉํ๋ ์ด์
- ํ์ผ ๋จ์์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋ ๊ด๋ฆฌ์ ํ์์ฑ
- ์น ๊ฐ๋ฐ ์์
์๋ํ ๋๊ตฌ
- ์น ์ ํ๋ฆฌ์ผ์ด์
์ ๋น ๋ฅธ ๋ก๋ฉ ์๋์ ๋์ ์ฑ๋ฅ
๐Prettier
ํ์
์ ํ๊ฒ ๋ ๋, ์ผ๊ด์ฑ ์๋ ์ฝ๋ ์คํ์ผ์ ์ ๋ง ์ค์ํ๋ค.
๊ทธ๋์ ์ผ๊ด์ฑ ์๋ ์ฝ๋ ์คํ์ผ ๊ท์น๋ง ์ค์ ํด์ฃผ๋ฉด ์์์ ์๋์ผ๋ก ๊ทธ ๊ท์น์ ๋ง๊ฒ ์ฝ๋๋ค์ ์ ๋ฆฌํด์ค๋ค.
๐Babel
- ์ต์ ๋ฌธ๋ฒ์ ๋ธ๋ผ์ฐ์ ๊ฐ ์ดํดํ ์ ์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ํต์ญ
- ๋ธ๋ผ์ฐ์ ๋ JSX๋ฅผ ์ดํดํ์ง ๋ชปํ๋ค.
๊ทธ๋ฌ๋ ๋ฐ๋ฒจ์ด๋ผ๋ ํต์ญ์ฌ๋ก JSX -> Javascript
๐Eslint
ESLint๊ฐ ์ฝ๋ ํ๋ฆฌํฐ๋ฅผ ์ผ๊ด์ ์ผ๋ก ์ ์ง
๋ฌธ๋ฒ ์๋ฌ๋ฅผ ์ก์์ฃผ๊ฑฐ๋ ๋ ์ข์ ์ฝ๋ ๊ตฌํ ๋ฐฉ์์ ์ฌ์ฉํ๋๋ก ํด์ค๋ค.
์ฐธ๊ณ ์๋ฃ
https://velopert.com/3236
https://yeoulcoding.me/147
https://velog.io/@velopert/react-hooks
https://hsp0418.tistory.com/171
This article is really amazing. Thanks for the sharing.
Dashboard Anywhere