React
![React](/assets/images/react/react_icon.png)
๐ก Intro
๋ฐฑ์ค๋ ๊ฐ๋ฐ์ ํ๋ฉด์ ๊ฐ๋จํ Admin ์ฌ์ดํธ๋ฅผ ๊ฐ๋ฐํ๋ ๊ฒฝ์ฐ๊ฐ ์ข ์ข ์๋๋ฐ, ๋จ์ javascript๋ก ๊ฐ๋ฐํ ์ด๋๋ฏผ์ ์๊ฐ๋ณด๋ค ๋ง์ ๋ฆฌ์์ค๊ฐ ๋ค์ด๊ฐ๋ค๋ ๋๋์ ๋ฐ์์ต๋๋ค. ๊ทธ๋์ ์ฌ์ฉ์์๊ฒ๋ ์กฐ๊ธ ๋ ๋์ ๊ฒฝํ์ ์ค ์ ์๊ณ , ๊ฐ๋ฐ์์๊ฒ๋ ๋ ๋์ ์ ์ง ๋ณด์์ ์์ฐ์ฑ์ ์ค ์ ์๋ SPA(Single Page Application)๋ฅผ ์ํ React์ ๋ํด ๊ณต๋ถํด๋ณด๋ ค ํฉ๋๋ค.
๐ React๋ฅผ ์ฐ๋ ์ด์ ๋?
ํํ๋ค ๐React๋ SPA(Single Page Application)๋ฅผ ์ํด ๋ง์ด ์ด๋ค๊ณ ๋ค ํ๋๋ฐ, SPA๋ ์๋ก์ด ํ์ด์ง๋ฅผ ๋ถ๋ฌ์ค๋ ๊ฒ์ด ์๋๋ผ ํ์ด์ง๋ฅผ ๋์ ์ผ๋ก ์์ฑํด์ ์ฌ์ฉ์์ ์ํตํ ์ ์๋ ์กฐ๊ธ ๋ ์์ฐ์ค๋ฌ์ด ์น ์ ํ๋ฆฌ์ผ์ด์ ์ด๋ ์น์ฌ์ดํธ๋ฅผ ์๋ฏธํฉ๋๋ค. ๊ธฐ์กด์ ์น ๋ฐฉ์์ ์๋ก์ด ํ์ด์ง๋ฅผ ์์ฒญํ ๋๋ง๋ค ๋ฆฌ์์ค๋ฅผ ๋ค์ด๋ก๋ํ๊ณ ๋ฐ์ ๋ฆฌ์์ค๋ฅผ ๋ ๋๋ง ํ๋ฉด์ ๋ณ๊ฒฝ์ด ํ์ ์๋ ๋ถ๋ถ๋ค์ ํฌํจํ๊ธฐ ๋๋ฌธ์ ์๋นํ ๋นํจ์จ์ ์ด์๋๋ฐ SPA๊ฐ ๋์ค๋ฉด์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ํ์ํ ๋ชจ๋ ์ ์ ๋ฆฌ์์ค๋ฅผ ์ต์ด์ ํ๋ฒ ๋ค์ด๋ก๋ ํ๊ณ , ์ดํ์ ์๋ก์ด ํ์ด์ง ์์ฒญ ์ ํ์ด์ง ๊ฐฑ์ ์ ํ์ํ ๋ฐ์ดํฐ๋ง์ ์ ๋ฌ๋ฐ์ ํ์ด์ง๋ฅผ ๊ฐฑ์ ํ๊ฒ ๋์์ต๋๋ค.
์ด๋ฌํ ์ด์ ๋ก React์ ๊ฐ์ฅ ํฐ ํน์ง์ธ Virtual DOM์ด ์์ต๋๋ค. ๊ธฐ์กด์ DOM์ ํ์ด์ง๊ฐ ๋ฐ๋ ๋๋ง๋ค ์ HTML๋ฅผ ๋ก๋ํ๋ฉด์ ๋ฆฌ๋๋๋ง ํ๋๋ฐ, Virtual Dom์ React Component๊ฐ ๋ฆฌํดํ๋ ๊ฐ์ ์ํด ๋ง๋ค์ด์ ธ์ ์ค์ ๋ณด์ด๊ณ ์๋ DOM๊ณผ ๋น๊ตํด์ ๋ฌ๋ผ์ง ๋ถ๋ถ๋ง ์ฐพ์์ ๋ฐ์ํฉ๋๋ค.
๋ํ Virtual Dom์ผ๋ก ์ธํด ๊ฐ๋ฐ์ Component ๋จ์๋ก ์์ฑํ ์ ์๊ฒ๋ฉ๋๋ค. ์ปดํฌ๋ํธ๋ UI๋ฅผ ๊ตฌ์ฑํ๋ ๊ฐ๋ณ์ ์ธ ๋ทฐ ๋จ์์ธ๋ฐ, UI ๊ฐ๋ฐ์ ์กฐ๋ฆฝํ๋ฏ์ด ๋ง๋ค์ด์ค๋๋ค. ์ด๋ ๊ฒ ๋๋์ด์ง ์ปดํฌ๋ํธ ๋ค๋ก์ธํด ๋ค๋ฅธ ํ์ํ ๋ถ๋ถ๋ค์ ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํด์ง๊ณ , ์ด๋ ์์ฐ์ฑ๊ณผ ์ ์ง๋ณด์๋ฅผ ํฅ์์์ผ์ค๋๋ค. ๊ทธ๋ ๊ฒ ๊ฐ๊ฐ์ ์ปดํฌ๋ํธ๋ค์ด ๊ฒฐํฉํ์ฌ ํ๋์ View๋ฅผ ๋ณด์ฌ์ค๋๋ค.
๐ React ์์ํ๊ธฐ
React ์์ ํ๊ฒฝ ์ธํ
Node.js๊ฐ ๊น๋ ค์๋ค๋ ๊ฒ์ ์ ์ฌ๋ก ๊ฐ๋ฒผ์ด ์์ ๋ก React๋ฅผ ์์ํด ๋ณด๋ คํฉ๋๋ค.
์ด๋ฏธ์ง 1. Node.js / npm version
์ผ๋ฐ์ ์ผ๋ก ๋ค์ ๋ช ๋ น์ด๋ฅผ ํตํด react ํ๋ก์ ํธ๋ฅผ ์์ํ์ง๋ง,
1
$ npx create-react-app my-app
์ ๋ ํ์ ์คํฌ๋ฆฝํธ์ ์ฌ์ฉ์ฑ์ ์ต์ํด์ง๊ธฐ ์ํด React์์ typescript ๋ช ๋ น์ด๋ฅผ ์ ๋ ฅํ์ต๋๋ค.
1
$ npx create-react-app my-app --template typescript
์ด๋ฏธ์ง 2. Begin React
npx create-react-app my-app --template typescript
๋ฅผ ์
๋ ฅํ๋ฉด Success ๋ฉ์ธ์ง์ ํจ๊ป my-app ๋๋ ํฐ๋ฆฌ์ React Project๊ฐ ์์ฑ๋ฉ๋๋ค.
1
$ npx start
๊ทธ ํ ์ด ๋ช ๋ น์ด๋ฅผ ํตํด http://localhost:3000/๊ฐ ์ด๋ฆฌ๋ฉด์ ๋บ๊ธ ๋บ๊ธ ๋๊ณ ์๋ React ์์ด์ฝ์ ๋ณผ ์ ์์ต๋๋ค.
์ด๋ฏธ์ง 3. ๋์ ์ฒซ React ์น
๊ฐ๋จํ ์์ ๋ก React TypeScript ์ฐ์ต
1. Counter
์ฐ์ my-app/src/App.tsx๋ก ๊ฐ๋ฉด http://localhost:3000/์์ ๋ณด์๋ ํ ์คํธ์ ๋ก๊ณ ๊ฐ ์๋ ์ฝ๋๋ฅผ ๋ณผ ์ ์์ต๋๋ค.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
App.tsx๋ฅผ ๋ค์๊ณผ ๊ฐ์ด ์์ฑํด ์ค๋๋ค.
1
2
3
4
5
6
7
8
9
10
11
12
13
import * as React from 'react';
import { Counter } from './Counter';
const App = () => {
return (
<div className='App'>
<Counter />
</div>
);
};
export default App;
๊ทธ๋ฆฌ๊ณ src/Counter.tsx ํ์ผ์ ์์ฑํ์ฌ ๋ค์๊ณผ ๊ฐ์ ์ฝ๋๋ฅผ ์์ฑํฉ๋๋ค.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import * as React from 'react';
import { useState } from 'react';
interface Istate {
counter: number
}
export function Counter() {
const [state, setState] = useState<Istate>({ //[์ํ ๊ฐ ์ ์ฅ ๋ณ์, ์ํ ๊ฐ ๊ฐฑ์ ํจ์] = useState(์ํ ์ด๊ธฐ ๊ฐ);
counter: 0
})
const onIncrement = () => {
setState({
counter: state.counter+1
})
}
const onDecrement = () => {
setState({
counter: state.counter-1
})
}
return(
<div>
<h2>Counter</h2>
<div>
{state.counter}
</div>
<div>
<button onClick={onIncrement}>+</button>
<button onClick={onDecrement}>-</button>
</div>
</div>
)
}
๋ฆฌ์กํธ ์ปดํฌ๋ํธ์์ ๋์ ์ธ ๊ฐ์ ์ํ(state)๋ผ๊ณ ๋ถ๋ฅด๋๋ฐ, ์ฌ์ฉ์ ์ธํฐ๋์ ์ ํตํด ์ปดํฌ๋ํธ์ ์ํ ๊ฐ์ด ๋์ ์ผ๋ก ๋ฐ๋ ๊ฒฝ์ฐ์ ์ํ ๊ด๋ฆฌ๊ฐ ํ์ํฉ๋๋ค. ์๋ ์ํ ๊ฐ์ ๊ด๋ฆฌํ๊ธฐ ์ํด ํด๋์ค ๊ธฐ๋ฐ์ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ์์ง๋ง, ์ ์ง ๋ณด์๊ฐ ํ๋ค๋ค๋ ๋จ์ ์ด ์์์ต๋๋ค. ๊ทธ๋์ Hooks๋ผ๋ ๊ธฐ๋ฅ์ด ์ถ๊ฐ๋์๊ณ Hooks์ useState() ํจ์๋ฅผ ํตํด ์ปดํฌ๋ํธ์์ ๋ฐ๋๋ ๊ฐ์ ๊ด๋ฆฌํ ์ ์๊ฒ ๋์์ต๋๋ค.
์ด๋ฏธ์ง 4. ์นด์ดํฐ ๊ฒฐ๊ณผ
๋๋งบ์
์ค๋์ React์ ๋ํด ํฌ์คํธ๋ฅผ ํด๋ณด์์ต๋๋ค. 2์ ์ด ๋ถํฐ React์ ๋ํด ์ฐจ๊ทผ์ฐจ๊ทผ ๊ณต๋ถ๋ฅผ ํ๋๋ฐ, ๊ทธ๋์ ๊ณต๋ถํ๋ ๋ด์ฉ์ ์์๋๋ก ๊ณ์ ํฌ์คํธํด๋ณด๋ ค ํฉ๋๋ค.
[์ฐธ๊ณ ์๋ฃ]