๐ฉ๐ป ์ต๋ํ ์ฑ๋ฅ์ ์๋ผ๊ณ ํธ์ํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ฉด์ ๊ตฌํํ๊ณ ์ ๊ฐ๋ฐํ ๊ฒ์ด ๋ฐ๋ก ๋ฆฌ์กํธ๋ค. ๋ฆฌ์กํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋๋ ๋ฐ ์ฌ์ฉํ๋ค. ๊ทธ๋ฆฌ๊ณ ์ค์ง V(view)๋ง ์ ๊ฒฝ ์ฐ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค. ์ฌ์ค ์ฒ์์๋ ๋ฆฌ์กํธ๊ฐ ํ๋ ์์ํฌ์ธ์ง, ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ์ง ์ด๋์๋ ํ๋ ์์ํฌ๋ผํ๊ณ ๊ทธ๋์ ํท๊ฐ๋ ธ์๋๋ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋๋ค ๐ถ
๋ผ์ฐํ
: React Router
Ajax : axios, fetch
์ํ๊ด๋ฆฌ : Redux, Mobx, Redux-saga, Redux-thunk, GraphQL, Apollo, Relay
๋ฆฌ์กํธ ํ๋ก์ ํธ๋ฅผ ์์ฑํ ๋ ํ์ํ ์นํฉ, ๋ฐ๋ฒจ์ ์ค์น ๋ฐ ์ค์ ๊ณผ์ ์ ์๋ตํ๊ณ ๋ฐ๋ก ๊ฐํธํ๊ฒ ํ๋ก์ ํธ ์์ ํ๊ฒฝ์ ๊ตฌ์ถํด ์ฃผ๋ ๋๊ตฌ์ด๋ค. ๋์ค์ ์ค์ ์ ์ปค์คํฐ๋ง์ด์ง ํด์ผ ํ๋ฉด ์์ ๋กญ๊ฒ ์ค์ ์ ๋ณ๊ฒฝํ ์๋ ์๋ค.
npx create react-app <ํ๋ก์ ํธ ์ด๋ฆ>
์ ๋ช ๋ น์ด๋ฅผ ์ฌ์ฉํ์ฌ ํ๋ก์ ํธ๋ฅผ ์์ฑํ๋ค. ๋ฆฌ์กํธ ํ๋ก์ ํธ๋ฅผ ๋ง๋ค ๋ node_modules๋ผ๋ ๋ํ ํ ๋ฆฌ๋ ํจ๊ป ์์ฑ๋๋๋ฐ ํ๋ก์ ํธ ์์ฑ ๊ณผ์ ์์ ๋ ธ๋๋ชจ๋ ๋๋ ํ ๋ฆฌ์ react ๋ชจ๋์ด ์ค์น๋๋ค. ๊ทธ๋ฆฌ๊ณ import ๊ตฌ๋ฌธ์ ํตํด ๋ฆฌ์กํธ๋ฅผ ๋ถ๋ฌ์ ์ฌ์ฉํ๋ฉด ๋๋ค.
import React from 'react';
์ด๋ฌํ ๊ธฐ๋ฅ์ ๋ธ๋ผ์ฐ์ ์์๋ ์ฌ์ฉํ๊ธฐ ์ํด ๋ฒ๋ค๋ฌ๋ฅผ ์ฌ์ฉํ๋ค. ๋ฒ๋ค๋ฌ๋ (bundle)๋ฌถ๋๋ค ๋ผ๋ ๋ป์ด๋ค. ์ฆ, ํ์ผ์ ๋ฌถ๋ฏ์ด ์ฐ๊ฒฐํ๋ ๊ฒ์ด๋ค. ๋ํ์ ์ธ ๋ฒ๋ค๋ฌ๋ก ์นํฉ, ๊ฑธํ๋ผ๋ ๋๊ตฌ ๋ค์ด ์์ง๋ง ๊ฐ ๋๊ตฌ๋ง๋ค ํน์ฑ์ด ๋ค๋ฅด๋ค. ๋ฆฌ์กํธ ํ๋ก์ ํธ์์๋ ์ฃผ๋ก ์นํฉ์ ์ฌ์ฉํ๋ ์ถ์ธ์ด๋ค.
์ด์ ๋ ํธ์์ฑ๊ณผ ํ์ฅ์ฑ์ด ๋ค๋ฅธ ๋๊ตฌ๋ณด๋ค ๋ฐ์ด๋๊ธฐ ๋๋ฌธ์ด๋ค. ๋ฒ๋ค๋ฌ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๋ฉด import๋ก ๋ชจ๋์ ๋ถ๋ฌ์์ ๋ ๋ถ๋ฌ์จ ๋ชจ๋์ ๋ชจ๋ ํฉ์ณ์ ํ๋์ ํ์ผ์ ์์ฑํด ์ค๋ค. ๋ ์ต์ ํ ๊ณผ์ ์์ ์ฌ๋ฌ ๊ฐ์ ํ์ผ๋ก ๋ถ๋ฆฌ๋ ์๋ ์๋ค. ์นํฉ์ ์ฌ์ฉํ๋ฉด SVG ํ์ผ๊ณผ CSSํ์ผ๋ ๋ถ๋ฌ์์ ์ฌ์ฉํ ์ ์๋ค. ์ด๋ ๊ฒ ํ์ผ๋ค์ ๋ถ๋ฌ์ค๋ ๊ฒ์ ์นํฉ์ ๋ก๋๋ผ๋ ๊ธฐ๋ฅ์ด ๋ด๋นํ๋ค. ๋ก๋๋ ์ฌ๋ฌ ๊ฐ์ง ์ข ๋ฅ๊ฐ ์๋๋ฐ ์๋ฅผ ๋ค์ด css-loader๋ CSSํ์ผ์ ๋ถ๋ฌ์ฌ ์ ์๊ฒ ํด์ฃผ๊ณ , file-loader๋ ์น ํฐํธ๋ ๋ฏธ๋์ด ํ์ผ ๋ฑ์ ๋ถ๋ฌ์ฌ ์ ์๊ฒ ํด์ค๋ค. ๊ทธ๋ฆฌ๊ณ babel-loader๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ๋ค์ ๋ถ๋ฌ์ค๋ฉด์ ์ต์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ์ผ๋ก ์์ฑ๋ ์ฝ๋๋ฅผ ๋ฐ๋ฒจ์ด๋ผ๋ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ES5 ๋ฌธ๋ฒ์ผ๋ก ๋ณํํด ์ค๋ค.
ES5๋ ์ด์ ๋ฒ์ ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์๋ฏธํ๋ค. ์ต์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ์ ES5 ํํ๋ก ๋ณํํ๋ ๊ฒ์ ๊ตฌ๋ฒ์ ์น ๋ธ๋ผ์ฐ์ ์ ํธํํ๊ธฐ ์ํด์์ด๋ค. ํ์ฌ ๋๋ถ๋ถ์ ์ต์ ์น ๋ธ๋ผ์ฐ์ ์์๋ ์์ฒด์ ์ผ๋ก ์ต์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ์ ๋ฐ๋ก ์คํํ ์ ์์ง๋ง (ํฌ๋กฌ) ๊ตฌ๋ฒ์ ์น ๋ธ๋ผ์ฐ์ ์์ ์คํ๋์ง ์๊ธฐ ๋๋ฌธ์ ์ฌ์ ์ ๊ผญ ๋ณํํด ์ฃผ์ด์ผ ํ๋ค. ๋ํ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ์ ์ฌ์ฉํ๋ JSX๋ผ๋ ๋ฌธ๋ฒ๋ ์ ์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ์ด ์๋๋ฏ๋ก ES5 ํํ์ ์ฝ๋๋ก ๋ณํํด์ผ ํ๋ค.
JSX๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์ฅ๋ฌธ๋ฒ์ด๋ฉฐ XML๊ณผ ๋งค์ฐ ๋น์ท. ์ด๋ฐ ํ์์ผ๋ก ์์ฑํ ์ฝ๋๋ ๋ธ๋ผ์ฐ์ ์์ ์คํ๋๊ธฐ ์ ์ ์ฝ๋๊ฐ ๋ฒ๋ค๋ง๋๋ ๊ณผ์ ์์ ๋ฐ๋ฒจ์ ์ฌ์ฉํ์ฌ ์ผ๋ฐ ์๋ฐ์คํฌ๋ฆฝํธ ํํ์ ์ฝ๋๋ก ๋ณํ๋๋ค.
function App() {
return (
<div>
hello React
</div>
)
}
JSX๋ ๋ฆฌ์กํธ๋ก ํ๋ก์ ํธ๋ฅผ ๊ฐ๋ฐํ ๋ ์ฌ์ฉ๋๋ฏ๋ก ๊ณต์์ ์ธ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ์ ์๋๋ค. ๋ฐ๋ฒจ์์๋ ์ฌ๋ฌ ๋ฌธ๋ฒ์ ์ง์ํ ์ ์๋๋ก preset ๋ฐ plugin์ ์ค์ ํฉ๋๋ค. ๋ฐ๋ฒจ์ ํตํด ๊ฐ๋ฐ์๋ค์ด ์์๋ก ๋ง๋ ๋ฌธ๋ฒ, ํน์ ์ฐจ๊ธฐ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฌธ๋ฒ๋ค์ ์ฌ์ฉํ ์ ์๋ค.
๋ณด๊ธฐ ์ฝ๊ณ ์ต์ํ๋ค. ( html ์ฝ๋์ฒ๋ผ head๋ถ๋ถ์ ์ฌ๋ฌ ์ฝ๋๊ฐ ์์ด์ ๊ฐ๋ ์ฑ์ด ์ข๋ค)
๋์ฑ ๋์ ํ์ฉ๋ (JSX๋ ์์ผ๋ก ๋ง๋ค ์ปดํฌ๋ํธ๋ JSX ์์์ ์์ฑํ ์ ์๋ค)
const Nicebook = ({ Component }) => {
return (
<div>
</div>
);
};
(1) ์ฒซ ๋ฒ์งธ ๋ฐฉ๋ฒ
const Nicebook = ({ Component }) => {
return (
<>
</>
);
};
(2) ๋ ๋ฒ์งธ ๋ฐฉ๋ฒ
import React, {Fragment} from "react";
const Nicebook = ({ Component }) => {
return (
<Fragment>
</Fragment>
);
};