05_Oct_2021 ๐Ÿฐ์—˜๋ฆฌ์Šค AI ํŠธ๋ž™ TIL : React.js

์œ ํ™˜์ตยท2021๋…„ 10์›” 7์ผ
0

์„œ๋ก 

์ทจ์—…์„ ํ•  ๋•Œ ์ค‘์š”ํ•  ๋•Œ์—๋Š” ์ž‘์€ ๊ฒƒ์ด๋ผ๋„ ๋งŒ๋“ค์–ด๋‚ผ ์ˆ˜ ์žˆ๊ณ , ์•„์ด๋””์–ด๋ฅผ ํ˜„์‹คํ™” ์‹œํ‚ค๋Š” ๊ฒƒ์— ์žฌ๋ฏธ๋ฅผ ๋Š๋ผ๋Š” ๊ฒƒ. ํ•œ๊ณ„์— ๋ด‰์ฐฉํ–ˆ์„ ๋•Œ, ํ•œ๊ณ„๋ฅผ ๋„˜์„ ์ˆ˜ ์žˆ๋Š” ํž˜๋„ ์žˆ์œผ๋ฉด ์ข‹์Œ. ์ž๋ฃŒ๊ตฌ์กฐ ๋ฐ ์•Œ๊ณ ๋ฆฌ์ฆ˜์€ ์–ด๋ ค์šธ ์ˆ˜ ์žˆ์œผ๋‚˜ ์ขŒ์ ˆํ•˜์ง€ ๋ง์ž.

git checkout์˜ ์ •์˜๋Š” : git์˜ head๋ฅผ ์›€์ง์ด๋Š” ๊ฒƒ.
git commit์„ ํ•  ๋•Œ, node_modules ๋””๋ ‰ํ† ๋ฆฌ๋Š” gitignore๋กœ ์„ค์ •ํ•˜์—ฌ ๋ฐฐ์ œํ•œ๋‹ค.


๋ฆฌ์•กํŠธ๋ž€?

์‚ฌ์ „ ์ง€์‹: SPA (Single Page Application)

  • ์ „ํ†ต์ ์ธ ํŽ˜์ด์ง€: ์ตœ์ดˆ์— ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ HTML์„ ์ „๋‹ฌ ๋ฐ›๊ณ  ๋ฐ์ดํ„ฐ๋ฅผ Form Post ํ˜•ํƒœ๋กœ ์ „๋‹ฌํ•˜๊ณ , ํŽ˜์ด์ง€์˜ ๋ณ€๊ฒฝ์ด ํ•„์š”ํ•  ๋•Œ ๋‹ค์‹œ ์„œ๋ฒ„์— ์š”์ฒญํ•ด์„œ HTML์„ ์ „๋‹ฌ๋ฐ›์Œ (ํŽ˜์ด์ง€๋ฅผ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋‹ค์‹œ ๋ถˆ๋Ÿฌ์˜จ๋‹ค.)
  • SPA: ์ตœ์ดˆ์— ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ HTML์„ ์ „๋‹ฌ ๋ฐ›๊ณ  ๋ฐ์ดํ„ฐ๋ฅผ AJAX ํ†ต์‹ ์œผ๋กœ ์ „๋‹ฌํ•˜๋ฉฐ, ํŽ˜์ด์ง€์˜ ๋ณ€๊ฒฝ์ด ํ•„์š”ํ•  ๋•Œ ๋ณ€๊ฒฝ์ด ํ•„์š”ํ•œ ๋ถ€๋ถ„์„ JSON์œผ๋กœ ์ „๋‹ฌ ๋ฐ›๋Š”๋‹ค. (ํŽ˜์ด์ง€์—์„œ ๋ณ€๊ฒฝ๋œ ๋ถ€๋ถ„๋งŒ ๊ณ„์‚ฐํ•˜์—ฌ ๋‹ค์‹œ ๊ทธ๋ฆฐ๋‹ค.)

React

์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค(UI)๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

  • Component
    React์—์„œ ์„œ๋น„์Šค๋ฅผ ๊ฐœ๋ฐœํ•˜๋Š” ๋ฐ ์žˆ์–ด ์ชผ๊ฐœ์–ด ๊ตฌํ˜„ํ•˜๋Š” ๋…๋ฆฝ์ ์ธ ๋‹จ์œ„์ด๋‹ค.
  • Virtual DOM: (๊ฐ€์ƒ ๋ฌธ์„œ๊ฐ์ฒด๋ชจ๋ธ)
    ๊ฐ€์ƒ์ ์ธ ํ‘œํ˜„์„ ๋ฉ”๋ชจ๋ฆฌ์— ์ €์žฅํ•˜๊ณ  ReactDOM๊ณผ ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ์˜ํ•ด ์‹ค์ œ DOM๊ณผ ๋™๊ธฐํ™”ํ•˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ฐœ๋…
  • JSX
    JavaScript ๋‚ด์—์„œ UI๋ฅผ ์ž‘์„ฑํ•˜๊ธฐ ์œ„ํ•ด ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์ต์ˆ™ํ•œ ํ™˜๊ฒฝ์„ ์ œ๊ณต, HTML๊ณผ ์œ ์‚ฌํ•˜๋‹ค.

React์˜ ์—ญ์‚ฌ

  • 2013๋…„ Facebook ์‚ฌ์—์„œ ๋ฐœํ‘œํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. Facebook๊ณผ Instagram ๋“ฑ ์‚ฌ๋‚ด ์†Œํ”„ํŠธ์›จ์–ด์— ์‚ฌ์šฉํ•  ๋ชฉ์ ์œผ๋กœ ๊ฐœ๋ฐœํ–ˆ์œผ๋‚˜, ์ดํ›„ ์˜คํ”ˆ์†Œ์Šคํ™” ํ•˜์˜€๋‹ค.

  • ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒํ•œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ๊ฐ€์žฅ ๋งŽ์€ ์ธ๊ธฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

  • ํ™œ๋ฐœํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ์˜ ํ™œ๋™์œผ๋กœ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ๋„๊ตฌ๊ฐ€ ๋งŽ์ด ๊ฐœ๋ฐœ๋˜๊ณ  ์žˆ๋‹ค.


๋ฆฌ์•กํŠธ๋ฅผ ์•Œ๋ฉด ์ข‹์€ ์ ?

  • ์ƒ์‚ฐ์„ฑ/์žฌ์‚ฌ์šฉ์„ฑ: Component์™€ Hook์„ ํ™œ์šฉ: ์ž‘์€ ๋‹จ์œ„์˜, ๋…๋ฆฝ์ ์ธ ์š”์†Œ๋กœ ๊ฐœ๋ฐœํ•˜์—ฌ ๊ฐœ๋ฐœ์ž์˜ ์ƒ์‚ฐ์„ฑ๊ณผ ์ฝ”๋“œ์˜ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋†’์ธ๋‹ค.

  • ํ’๋ถ€ํ•œ ์ž๋ฃŒ/๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ: ํ˜„์žฌ React๋Š” ์ „ ์„ธ๊ณ„์ ์œผ๋กœ ๊ฐ€์žฅ ํ™œ๋ฐœํ•˜๊ฒŒ ์ปค๋ฎค๋‹ˆํ‹ฐ ํ™œ๋™์ด ์ด๋ฃจ์–ด์ง€๊ณ  ์žˆ์–ด ๋ฐฉ๋Œ€ํ•œ ์ž๋ฃŒ์™€ ํŽธ๋ฆฌํ•œ ์˜คํ”ˆ์†Œ์Šค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋“ฑ์ด ๊ณต์œ ๋˜๊ณ  ์žˆ๋‹ค.

  • ๋‹ค์–‘ํ•œ ์‚ฌ์šฉ์ฒ˜: ๋‹จ์ˆœํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํ•œ ๋ฒˆ ๋ฐฐ์šด React์ง€์‹์„ React-Native์— ์ ์šฉํ•˜์—ฌ ์•ˆ๋“œ๋กœ์ด๋“œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ฐ iOS ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋“ฑ์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋‹ค.

์ƒ์‚ฐ์„ฑ/์žฌ์‚ฌ์šฉ์„ฑ

<!--HTML/JS ์‚ฌ์šฉ-->
<body>
  <span>
    <script>
    	document.getElementById('text')
        .innerText = 'hello world';
    </script>
  </span>
</body>

๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑํ•˜๋Š” HTML๊ณผ, UI ๋‚ด ๋ฐ์ดํ„ฐ๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” JavaScript ๋กœ์ง์ด ๋ถ„๋ฆฌ๋˜์–ด ์žˆ์–ด ์ฝ”๋“œ ํŒŒ์•…์— ์˜ค๋žœ ์‹œ๊ฐ„์ด ๊ฑธ๋ฆฐ๋‹ค

<!--React์‚ฌ์šฉ-->
const App = () => {
  const text = 'hello world';
  return <span>{text}</span>
  }

JSX๋ฅผ ํ™œ์šฉํ•˜์—ฌ HTML ๋‚ด์— ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ํ•œ ๊ณต๊ฐ„์— ์‚ฝ์ž…ํ•  ์ˆ˜ ์žˆ์–ด ๊ฐœ๋ฐœ์ด ๊ฐ„๋‹จํ•ด์ง€๊ณ  ๋‹ค๋ฅธ ์‚ฌ๋žŒ์ด ๊ฐœ๋ฐœ ์˜๋„๋ฅผ ํŒŒ์•…ํ•˜๊ธฐ ์‰ฌ์›Œ์ง„๋‹ค.

ํ’๋ถ€ํ•œ ์ž๋ฃŒ / ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

Fluent UI, Redux, Mobx, Ant Design, React Hook Form, styled components ๋“ฑ, ์…€ ์ˆ˜ ์—†์„ ๋งŒํผ ๋ฐฉ๋Œ€ํ•œ ์ž๋ฃŒ์™€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์žˆ๋‹ค.

๋‹ค์–‘ํ•œ ์‚ฌ์šฉ์ฒ˜

  • React: ํฌ๋กฌ ํŒŒ์ด์–ดํญ์Šค ๋“ฑ ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‹คํ–‰ ๊ฐ€๋Šฅํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ.
  • React-Native: ์•ˆ๋“œ๋กœ์ด๋“œ/iOS ๋“ฑ์˜ ๋„ค์ดํ‹ฐ๋ธŒ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ.

์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํ•œ ๋ฒˆ ๋ฐฐ์šด React ์ง€์‹์„ React-Native์— ์ ์šฉํ•ด์„œ ์•ˆ๋“œ๋กœ์ด๋“œ/iOS ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋‹ค.

๋ฆฌ์•กํŠธ ํŒฉํŠธ์ฒดํฌ

React๋Š” ๋Œ€๊ทœ๋ชจ ์ž‘์—…์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ์ง€๋งŒ, ์†๋„ ๋ฉด์—์„œ๋Š” ๋ถˆ๋ฆฌํ•œ ์ ์ด ์žˆ๋‹ค.
React๋Š” ์ปดํฌ๋„ŒํŠธ ๋‚ด ๋ฐ์ดํ„ฐ ๋ณ€๊ฒฝ์ด ์žˆ์„ ์‹œ, UI๋ฅผ ์ž๋™์œผ๋กœ ์—…๋ฐ์ดํŠธ ํ•œ๋‹ค.


์–ด๋–ป๊ฒŒ ๋ฐฐ์šฐ๋Š” ๊ฒƒ์ด ์ข‹์„๊นŒ?

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ ์ œ์ด์ฟผ๋ฆฌ์™€ ๋น„๊ตํ•˜๋ฉฐ, ๊ฐ™์€ ๊ธฐ๋Šฅ์„ ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ React๋กœ ๋ณ€ํ™˜์‹œ์ผœ๋ณด๊ณ  React์˜ ํŠน์ง•๊ณผ ์žฅ์ ์„ ๋ชธ์— ์ตํ˜€๋ณด๋Š” ๊ฒƒ์ด ์ข‹๋‹ค. React ๊ธฐ๋ฐ˜ ๊ฐœ๋ฐœ์„ ํ•  ๋•Œ๋Š” ์ตœ์‹  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ตํžˆ๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

  • React ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•˜๊ณ , React์˜ ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ ์š”์†Œ์ธ Component์™€ JSX์— ๋Œ€ํ•ด ์ž˜ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค.

  • Props์™€ State / ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ๋ฅผ ํ†ตํ•ด ์ปดํฌ๋„ŒํŠธ๋ผ๋ฆฌ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›๊ณ , ์ปดํฌ๋„ŒํŠธ ๋‚ด์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฒ•, ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ์„ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฒ•์„ ์•„๋Š” ๊ฒƒ.

  • Hooks

jQuery ์˜ˆ

$("#todo-list").append(
      `<li>
        <span>${value}</span>
        <button type="button" class="complete">์™„๋ฃŒ</button>
        <button type="button" class="remove">์‚ญ์ œ</button>
      </li>`
    );

React ์˜ˆ

<ol id="todo-list">
        {todoList.map((item, idx) => (
          <li className={item.isCompleted === true ? "completed" : ""}>
            <span>{item.value}</span>
            <button onClick={() => handleCompleteClick(idx)}>์™„๋ฃŒ</button>
            <button onClick={() => handleRemoveClick(idx)}>์‚ญ์ œ</button>
          </li>
        ))}
      </ol>

Component:

const App = () => {
	const text = 'Hello, React!';
    return <span>{text}</span>

์ด๋Ÿฌํ•œ ํ˜•ํƒœ๋กœ ํ•˜๋‚˜์˜ '๋ธ”๋ก'์„ ์ƒ์„ฑํ•˜์—ฌ ํ•„์š”ํ•œ ๊ณณ์— ์กฐ๋ฆฝํ•˜์—ฌ ๊ฐœ๋ฐœํ•˜๋Š” ๋ถ€ํ’ˆ๊ณผ ๊ฐ™์€ ๊ฒƒ์„ ์ปดํฌ๋„ŒํŠธ๋ผ๊ณ  ํ•œ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋‹จ์—์„œ HTML ์ฝ”๋“œ๋ฅผ ๋ฆฌํ„ดํ•˜๋Š” JSX ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•œ๋‹ค.

State:

const [todoList, setTodoList] = useState([]);
const [inputValue, setInputValue] = useState('');

์ปดํฌ๋„ŒํŠธ ๋‚ด์—์„œ 'State'๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ์œ ๋™์ ์œผ๋กœ ๊ด€๋ฆฌํ•œ๋‹ค.
State๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ๋งˆ๋‹ค ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋‹ค์‹œ ๋ Œ๋”๋ง(Rendering)๋œ๋‹ค.


MISC.

์ ์€ ๋…ธ๋ ฅ์œผ๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ณด๋‹ค ํ›จ์”ฌ ํšจ์œจ์ ์œผ๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ฒŒ ๋•๋Š” ํ”„๋ ˆ์ž„์›Œํฌ.

๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋ฉด nodejs๋ผ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹คํ–‰๊ธฐ๋ฅผ ์„ค์น˜ํ•ด์•ผ ํ•œ๋‹ค.
nodejs: ์„ค์น˜๋Š” LTS ๋ฒ„์ „์„ ๊ถŒ์žฅํ•œ๋‹ค.

nodejs ์„ค์น˜ ํ›„, React ๊ฐœ๋ฐœํ™˜๊ฒฝ์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ์›ํ•˜๋Š” ๋””๋ ‰ํ† ๋ฆฌ๋‚ด์— ์œ„์น˜ํ•œ ์ฑ„๋กœ, npx create-react-app .๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ฐœ๋ฐœํ™˜๊ฒฝ์ด ์ž๋™์œผ๋กœ ์„ค์ •๋ฉ๋‹ˆ๋‹ค.

React ํŒŒ์ผ์„ ์‹คํ–‰ํ•  ๋•Œ์—๋Š” npm start ๋ช…๋ น์–ด ์‚ฌ์šฉ
profile
์‚ฌ์šฉ์ž์˜ ํŽธ์˜๋ฅผ ๋” ์ƒ๊ฐํ•˜๊ณ  ํŽธ์•ˆํ•œ UI/UX ๊ฐœ๋ฐœ์„ ๊ฟˆ๊พธ๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ์ง€๋ง์ƒ์ž…๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€