๐Ÿ’™ React - Intro

Bonnie Ryuยท2020๋…„ 11์›” 5์ผ
1

์ฐจ๊ทผ์ฐจ๊ทผ React ๐Ÿพ

๋ชฉ๋ก ๋ณด๊ธฐ
1/10

1. Why React?

1-1. Web Application์˜ ๋ฐœ์ „

๋ธŒ๋ผ์šฐ์ €๋ฅผ ์—ด๊ณ  ์‚ฌ์ดํŠธ์— ๋“ค์–ด๊ฐ€๋ฉด ๋ณด์—ฌ์ง€๋Š” ๊ฒƒย (UI: User Interface)ย ๊ณผ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒย (UX: User Experience)ย ์ด ๊ต‰์žฅํžˆ ๋งŽ๋‹ค. ์ด๋Ÿฌํ•œ ์ด์œ ๋กœ ์š”์ƒˆ๋Š” ์›น ํŽ˜์ด์ง€(Web Page)๋ผ๋Š” ๋‹จ์–ด๋ณด๋‹คย ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด(Web Application)๋ผ๋Š” ๋‹จ์–ด๊ฐ€ ๋งŽ์ด ์‚ฌ์šฉ๋˜๊ธฐ๋„ ํ•œ๋‹ค.

์ด์ฒ˜๋Ÿผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ทœ๋ชจ๊ฐ€ ์ปค์ง€๊ณ  ๋‹ค์–‘ํ•œ UI, UX๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ด์ „์˜ ๋ฐฉ๋ฒ•(DOM, jQuery)์œผ๋กœ๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•˜๊ณ  ์ฝ”๋“œ๋ฅผ ์œ ์ง€๋ณด์ˆ˜ ํ•˜๋Š” ๊ฒƒ์ด ์–ด๋ ค์›Œ์กŒ๋‹ค. ํ™”๋ฉด์˜ ๊ทธ ๋งŽ์€ DOM ์š”์†Œ๋“ค์— ์ง์ ‘ ์ ‘๊ทผํ•ด์„œ ์กฐ์ž‘ํ•˜๊ณ  ๊ด€๋ฆฌํ•˜๊ธฐ๋ž€ ์‰ฝ์ง€ ์•Š๋‹ค. jQuery๋„ ๊ฒฐ๊ตญ์—” ์‰ฝ๊ฒŒ DOM์— ์ ‘๊ทผํ•ด์„œ ์กฐ์ž‘์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜๋Š” ๋ฉ”์†Œ๋“œ์˜ ๋ชจ์Œ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋งˆ์ฐฌ๊ฐ€์ง€์ด๋‹ค.

๊ทœ๋ชจ๊ฐ€ ์ปค์ง€๊ณ  ๋ณต์žกํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•˜๋ฉฐ ์ƒ์‚ฐ์„ฑ์„ ํ–ฅ์ƒ์‹œํ‚ค๊ณ  ๋งŽ์€ ์–‘์˜ ๋ฐ์ดํ„ฐ ๊ด€๋ฆฌ์™€ ์ฝ”๋“œ ์œ ์ง€ ๋ณด์ˆ˜๋ฅผ ๋”์šฑ ํŽธ๋ฆฌํ•˜๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค์–‘ํ•œ Frontend Framework(Library)๊ฐ€ ๋“ฑ์žฅํ•˜๊ฒŒ ๋œ๋‹ค. ๊ทธ ์ค‘ ๊ฐ€์žฅ ๋งŽ์ด ์“ฐ์ด๋Š” ์„ธ ๊ฐ€์ง€๊ฐ€ Angular, Vue, React ์ด๋‹ค.

1-2. Frontend Framework(Library)

:: React

โ€œ์ง€์†์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€ํ™”ํ•˜๋Š” ๋Œ€๊ทœ๋ชจ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ตฌ์ถ•ํ•˜๋Š” ๊ฒƒโ€ย ์„ ๋ชฉํ‘œ๋กœ 2013๋…„ Facebook์—์„œ ๊ฐœ๋ฐœํ•œ Library.ย MVC(Model-View-Controller) Architectureย (ex. Angular, Vue)์™€๋Š” ๋‹ค๋ฅด๊ฒŒ ๋ฆฌ์•กํŠธ๋Š” ์˜ค์ง View๋งŒ ์‹ ๊ฒฝ์“ฐ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํŠน์„ฑ์ƒ ๋‚ด์žฅ๋˜์–ด ์žˆ๋Š” ๊ธฐ๋Šฅ์ด ๋ถ€์กฑํ•ดย third-party ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(ex. React-router, Redux)๋ฅผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•œ๋‹ค. ํŽ˜์ด์Šค๋ถ์˜ ์ง€์†์ ์ธ ๊ด€๋ฆฌ์™€ ํ•จ๊ป˜ ์ƒํƒœ๊ณ„๊ฐ€ ํ™œ์„ฑํ™” ๋˜์–ด ์žˆ์œผ๋ฉฐ ๋‹ค์–‘ํ•œ ์ž๋ฃŒ, ๊ทธ๋ฆฌ๊ณ  React Native์˜ ์‚ฌ์šฉ์œผ๋กœ ์ธํ•ด ์‚ฌ์šฉ์ž๊ฐ€ ๊พธ์ค€ํžˆ ์ฆ๊ฐ€ํ•œ๋‹ค.

์ฐธ๊ณ ) Library vs. Framework

2. What is React?

2-1. React ์ •์˜

React๋Š” ํŽ˜์ด์Šค๋ถ์—์„œ ๊ฐœ๋ฐœํ•˜๊ณ  ๊ด€๋ฆฌํ•˜๋Š”ย ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค(UI)๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‹ค. ๋ฆฌ์•กํŠธ์™€ ๊ฐ™์€ ํ”„๋ก ํŠธ์—”๋“œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํ˜น์€ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฐ€์žฅ ํฐ ์ด์œ  ์ค‘ ํ•˜๋‚˜๋Š” UI๋ฅผ ์ž๋™์œผ๋กœ ์—…๋ฐ์ดํŠธํ•ด ์ค€๋‹ค๋Š” ์ ์ด๋‹ค. ๋ฆฌ์•กํŠธ๋Š”ย ๊ฐ€์ƒ ๋”(Virtual Dom)ย ์„ ํ†ตํ•ด UI๋ฅผ ๋น ๋ฅด๊ฒŒ ์—…๋ฐ์ดํŠธํ•œ๋‹ค. ๊ฐ€์ƒ ๋”์€ย ์ด์ „ UI ์ƒํƒœ๋ฅผ ๋ฉ”๋ชจ๋ฆฌ์— ์œ ์ง€ํ•ด์„œ, ๋ณ€๊ฒฝ๋  UI์˜ ์ตœ์†Œ ์ง‘ํ•ฉ์„ ๊ณ„์‚ฐํ•˜๋Š” ๊ธฐ์ˆ ์ด๋‹ค. ์ด ๊ธฐ์ˆ  ๋•๋ถ„์— ๋ถˆํ•„์š”ํ•œ UI ์—…๋ฐ์ดํŠธ๋Š” ์ค„๊ณ , ์„ฑ๋Šฅ์€ ์ข‹์•„์ง„๋‹ค.

์˜ˆ์‹œ : ํŽ˜์ด์Šค๋ถ์˜ ์ข‹์•„์š” ์ˆ˜๋ฅผ ์—…๋ฐ์ดํŠธ ํ•ด์•ผ ํ•  ๊ฒฝ์šฐ,

{"title":"Hello",
"contents" : "Hello World",
"author" : "bonnie",
"likes" : 1}
<div id="post-1">
  <div class="title">Hello</div>
  <div class="contents">Hello World</div>
  <div class="author">bonnie</div>
  <div class="likes">1</div>
</div>

์œ„์™€ ๊ฐ™์ด JSON ๊ฐ์ฒด๊ฐ’์„ ์‚ฌ์šฉํ•˜๋Š” ๋ทฐ๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๊ณ  likes๊ฐ’์„ 2๋กœ ์—…๋ฐ์ดํŠธํ•œ๋‹ค๋ฉด post-1์˜ ๋‚ด๋ถ€์˜ likes์š”์†Œ๋ฅผ ์ฐพ์•„ ๋‚ด๋ถ€๋ฅผ ์ˆ˜์ •ํ•ด์•ผ ํ•œ๋‹ค. ๋ฐฉ๋ฒ•์€ ์–ด๋ ต์ง€์•Š์ง€๋งŒ ํ”„๋กœ์ ํŠธ ๊ทœ๋ชจ๊ฐ€ ์ปค์ง€๋ฉด ์ƒ๋‹นํžˆ ๋ณต์žกํ•ด์ง€๊ณ  ์ œ๋Œ€๋กœ ๊ด€๋ฆฌํ•˜์ง€ ์•Š์œผ๋ฉด ์„ฑ๋Šฅ๋„ ๋–จ์–ด์งˆ ์ˆ˜ ์žˆ๋‹ค.
์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ํŽ˜์ด์Šค๋ถ์€ ์–ด๋–ค ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€ํ•  ๋•Œ๋งˆ๋‹ค ์–ด๋–ค ๋ณ€ํ™”๋ฅผ ์ค„์ง€ ๊ณ ๋ฏผํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ ๊ธฐ์กด์˜ ๋ทฐ๋ฅผ ๋‚ ๋ ค๋ฒ„๋ฆฌ๊ณ  ์ฒ˜์Œ๋ถ€ํ„ฐ ๋‹ค์‹œ ๋žœ๋”๋ง ํ•˜๋Š” ๋ฐฉ์‹์„ ๊ณ ์•ˆํ•˜์˜€๋‹ค.
ํŽ˜์ด์Šค๋ถ ๊ฐœ๋ฐœํŒ€์€ ์œ„์˜ ๋ฐฉ์‹์œผ๋กœ ์ตœ๋Œ€ํ•œ ์„ฑ๋Šฅ์„ ์•„๋ผ๊ณ  ํŽธ์•ˆํ•œ UX๋ฅผ ์ œ๊ณตํ•˜๋ฉด์„œ ๊ตฌํ˜„ํ•˜๊ณ ์ž ๊ฐœ๋ฐœํ•œ ๊ฒƒ์ด ๋ฆฌ์•กํŠธ(React)์ด๋‹ค.

A JavaScript library for building user interfaces
React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time.

์ฐธ๊ณ ) Why did we build React?

3. ์ž‘์—… ํ™˜๊ฒฝ ์„ค์ •

3-1. Node.js & npm

:: Node.js

Node.js ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋ธŒ๋ผ์šฐ์ € ๋ฐ–(ex. ์„œ๋ฒ„)์—์„œ๋„ ๋™์ž‘ํ•˜๊ฒŒ ํ•˜๋Š” ํ™˜๊ฒฝ์„ ์˜๋ฏธํ•œ๋‹ค. ๋ฆฌ์•กํŠธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‹คํ–‰๋˜๋Š” ์ฝ”๋“œ์ด๋ฏ€๋กœ Node.js์™€ ์ง์ ‘์ ์ธ ์—ฐ๊ด€์€ ์—†์ง€๋งŒ, ํ”„๋กœ์ ํŠธ๋ฅผ ๊ฐœ๋ฐœํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ ์ฃผ์š” ๋„๊ตฌ๋“ค(ex. ๋ฐ”๋ฒจ, ์›นํŒฉ)์ด Node.js ๊ธฐ๋ฐ˜์ด๊ธฐ ๋•Œ๋ฌธ์— ๋ฐ˜๋“œ์‹œ ์„ค์น˜ํ•ด์•ผ ํ•œ๋‹ค. Node.js๋ฅผ ์„ค์น˜ํ•˜๋ฉดย npm(node package manager)ย ์ด ์ž๋™์œผ๋กœ ์„ค์น˜ ๋˜๋Š”๋ฐ npm์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋…ธ๋“œ(Node.js)๊ฐ€ ์„ค์น˜๋˜์–ด ์žˆ์–ด์•ผ ํ•œ๋‹ค. ํ„ฐ๋ฏธ๋„์—์„œ ์•„๋ž˜์˜ ๋ช…๋ น์–ด๋ฅผ ์‹คํ–‰ ํ•จ์œผ๋กœ์จ Node.js ์˜ ๋ฒ„์ „์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. ๋…ธ๋“œ ๋ฒ„์ „์ด ์ •์ƒ์ ์œผ๋กœ ํ™•์ธ๋˜๋ฉด ์„ค์น˜๋„ ์ •์ƒ์ ์œผ๋กœ ์ด๋ฃจ์–ด์ง„ ๊ฒƒ์ด๋‹ค.

$ node -v

:: npm

Node ๊ธฐ๋ฐ˜์˜ ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋ฉด npm(node package manager)์ด๋ผ๋Š” ํŒจํ‚ค์ง€ ๋„๊ตฌ๊ฐ€ ํ•„์š”ํ•˜๋‹ค. npm ์„ ํ†ตํ•ด ๋‹ค์–‘ํ•œ ํŒจํ‚ค์ง€๋ฅผ ์„ค์น˜ํ•˜๊ณ  ๋ฒ„์ „์„ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค. ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ npm ๋ฒ„์ „์„ ํ™•์ธํ•˜๋Š” ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด ์„ค์น˜๊ฐ€ ์ •์ƒ์ ์œผ๋กœ ์ด๋ฃจ์–ด์กŒ๋Š”์ง€ ํ™•์ธํ•ด๋ณผ ์ˆ˜ ์žˆ๋‹ค.

$ npm -v

Node.js ์„ค์น˜ ํ›„์—” ์œ„์˜ ์‚ฌ์ง„๊ณผ ๊ฐ™์ด ํ„ฐ๋ฏธ๋„์— node -v, npm -v ๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•˜์—ฌ ๋ฒ„์ „์„ ์ฒดํฌํ•˜๊ณ  ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์„ค์น˜ ๋˜์—ˆ๋Š”์ง€ ํ™•์ธํ•œ๋‹ค.

3-2. CRA(Create-React-App)

: ๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๋Š”๋ฐ ํ•„์š”ํ•œ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ์„ธํŒ… ํ•ด์ฃผ๋Š” ๋„๊ตฌ(toolchain)

๋ฆฌ์•กํŠธ๋Š” UI ๊ธฐ๋Šฅ๋งŒ ์ œ๊ณตํ•œ๋‹ค. ๋”ฐ๋ผ์„œ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ง์ ‘ ๊ตฌ์ถ•ํ•ด์•ผํ•˜๋Š” ๊ฒƒ๋“ค์ด ๋งŽ๋‹ค. ์ „๋ฐ˜์ ์ธ ์Šค์Šคํ…œ์„ ์ง์ ‘ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์œผ๋‹ˆ ์›ํ•˜๋Š” ํ™˜๊ฒฝ์— ๋งž๊ฒŒ ์ตœ์ ํ™”ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ๋ฐ˜๋Œ€๋กœ ์‹ ๊ฒฝ์“ธ ๊ฒƒ์ด ๋งŽ๊ธฐ ๋•Œ๋ฌธ์— ์ฒ˜์Œ ์‹œ์ž‘ํ•˜๋Š” ๋‹จ๊ณ„์—์„œ๋Š” ์ง์ ‘ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ๊ตฌ์ถ•ํ•˜๊ธฐ ์–ด๋ ค์šธ ์ˆ˜ ์žˆ๋‹ค.

๋ฆฌ์•กํŠธ ํŒ€์—์„œ๋Š” ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด CRA(Create-React-App)์„ ๋งŒ๋“ค์—ˆ๋‹ค. CRA๋Š” ๋ฆฌ์•กํŠธ๋กœ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ํ™˜๊ฒฝ์„ ์ œ๊ณตํ•œ๋‹ค. CRA๋ฅผ ์ด์šฉํ•˜๋ฉด ํ•˜๋‚˜์˜ ๋ช…๋ น์–ด๋กœ ๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœํ™˜๊ฒฝ์„ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ๋‹ค.

If youโ€™re learning React or creating a new single-page app, use Create React App.
์ฐธ๊ณ ) Create a New React App

CRA์—๋Š” ๋ฐ”๋ฒจ๊ณผ ์›นํŒฉ๊ณผ ๊ฐ™์ด ๋ฆฌ์•กํŠธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์‹คํ–‰์— ํ•„์š”ํ•œ ๋‹ค์–‘ํ•œ ํŒจํ‚ค์ง€๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์œผ๋ฉฐ, ํ…Œ์ŠคํŠธ ์‹œ์Šคํ…œ, ES6+ ๋ฌธ๋ฒ•, CSS ํ›„์ฒ˜๋ฆฌ ๋“ฑ ๊ฑฐ์˜ ํ•„์ˆ˜๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐœ๋ฐœ ํ™˜๊ฒฝ๋„ ๊ตฌ์ถ•ํ•ด ์ค€๋‹ค. ์ด๋Ÿฌํ•œ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ์ง์ ‘ ๊ตฌ์ถ•ํ•  ๊ฒฝ์šฐ ์‹œ๊ฐ„์ด ์˜ค๋ž˜ ๊ฑธ๋ฆด ๋ฟ ์•„๋‹ˆ๋ผ ์œ ์ง€ ๋ณด์ˆ˜๋„ ํ•ด์•ผํ•œ๋‹ค. CRA๋ฅผ ์ด์šฉํ•˜๋ฉด ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ์„ธํŒ…์„ ํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์— ๊ธฐ์กด ๊ธฐ๋Šฅ์„ ๊ฐœ์„ ํ•˜๊ฑฐ๋‚˜ ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ–ˆ์„ ๋•Œ ํŒจํ‚ค์ง€ ๋ฒ„์ „๋งŒ ์˜ฌ๋ฆฌ๋ฉด ๋œ๋‹ค.

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.

Create React App doesnโ€™t handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses Babel and webpack, but you donโ€™t need to know anything about them.

์ฐธ๊ณ )ย JavaScript build Toolchain

:: A JavaScript build toolchain typically consists of:

  1. Aย package manager, such as Yarn or npm. It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
  2. Aย bundler, such as webpack or Parcel. It lets you write modular code and bundle it together into small packages to optimize load time.
  3. Aย compilerย such as Babel. It lets you write modern JavaScript code that still works in older browsers.

:: If you prefer to set up your own JavaScript toolchain from scratch, donโ€™t forget to ensure your custom toolchain is correctly set up for production.

profile
Ryuwisdom

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