๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐Ÿ’ป Deep Wide Programming/React

[React JS] ๋ฆฌ์•กํŠธ ๊ธฐ๋ณธ ํ•™์Šต ๋ฉ”๋ชจ

728x90
๋ฐ˜์‘ํ˜•

1. Node, npm, npx, git ์„ค์น˜

1.node.js ์„ค์น˜(ํ™ˆํŽ˜์ด์ง€์—์„œ. ์„ค์น˜ํ™•์ธ : node -v / npm ์„ค์น˜ํ™•์ธ : npm -v)
2. ์ฝ˜์†”์—์„œ npm install npx -g (์„ค์น˜ํ™•์ธ: npx -v)
3. VSC ์„ค์น˜(๋‹ค๋ฅธ ์ฝ”๋“œ ์—๋””ํ„ฐ ์จ๋„ ๋จ)
4. git ์„ค์น˜(์„ค์น˜ ํ™•์ธ:์ฝ˜์†”์—์„œ git --version)

 

 

๋ฆฌ์•กํŠธ ์ปดํŒŒ์ผ create-react-app

๋ฆฌ์•กํŠธ์˜ ์ฝ”๋“œ๋Š” ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ดํ•ดํ•  ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์—, ์ด๊ฒƒ์„ ์…‹์—…ํ•˜๊ธฐ ์œ„ํ•ด Web pack๊ณผ Babel์„ ๋‹ค์šด๋กœ๋“œ ํ•ด์•ผํ•˜๊ณ , ์ปดํŒŒ์ผ์„ ํ•˜๋Š” ๊ทธ๋Ÿฐ ๋ณต์žกํ•˜๊ณ  ๊ท€์ฐฎ์€ ์ž‘์—…์ด ํ•„์š”ํ–ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ, ์ด์ œ๋Š” create-react-app์ด๋ผ๋Š” ๊ฑธ ํ†ตํ•ด์„œ, ํ•˜๋‚˜์˜ ๋ช…๋ น์œผ๋กœ React Web app์„ Set upํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. 

 

1. node js npm, npx ์„ค์น˜๊ฐ€ ๋˜์–ด์žˆ์–ด์•ผ ํ•œ๋‹ค. 

2. Documents > npx create-react-app ๋งŒ๋“ค๊ณ ์ž ํ•˜๋Š” ํด๋”์ด๋ฆ„

 

3. Vs code์—์„œ ํ•ด๋‹น ํด๋”๋ฅผ ์˜คํ”ˆ

1) readme๋ฅผ ๋‚ด ์ทจํ–ฅ๊ป ์ˆ˜์ •

2) package.json ->scripts์—์„œ start, build๋งŒ ๋‚จ๊ธด๋‹ค.

๋ถˆํ•„์š”ํ•œ ์ปด๋งˆ๊ฐ€ ๋’ค์— ๋‚จ์ง€ ์•Š๊ฒŒ ์ž˜ ์ง€์šด๋‹ค. - syntax ์—๋Ÿฌ๊ฐ€ ์ƒ๊ธธ ์ˆ˜ ์žˆ์Œ

3) npm์ด๋‚˜ yarn ์ด๋‚˜ ๋™์ผ => npm start๋กœ ์‹คํ–‰ํ•จ

 

index.html, index.js, App.js

์ด ์„ธ๊ฐ€์ง€๊ฐ€ ํ•ต์‹ฌ ๊ตฌ์„ฑ ์ถ•์ด๋‹ค. 

1. index.html

  • <div> id๋ฅผ ์ง€์ •ํ•ด์ฃผ๊ณ , index.js์—์„œ ํ•ด๋‹น div ๋‚ด๋ถ€์˜ ๋‚ด์šฉ์„ ํ‘œ์‹œํ•œ๋‹ค.

2. index.js

3. App.js

  • index.js์˜ ReactDom.render์—์„œ  <App />๋Š” ๋ฐ”๋กœ App.js๋ฅผ ์˜๋ฏธํ•˜๋Š” ๊ฒƒ. 
  • App.js => ์ปดํฌ๋„ŒํŠธ
  • Component = html์„ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜
  • htmlํ˜•ํƒœ๋กœ ์ž‘์„ฑํ•˜๋Š” js = jsx, ๋ฆฌ์•กํŠธ์—์„œ ์œ ์ผํ•œ ํ‘œํ˜„๋ฐฉ์‹

  • ๋ฆฌ์•กํŠธ๋Š” index.js์—์„œ ํ•˜๋‚˜์˜ ์ปดํฌ๋„ŒํŠธ๋งŒ renderํ•ด์ค„ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์—, ์ƒˆ๋กœ์šด Component๋Š” index.js๊ฐ€ ์•„๋‹Œ, Component์•ˆ์— ์จ์ฃผ๊ธฐ
  • Component๋Š” ๋Œ€๋ฌธ์ž๋กœ ์“ฐ๊ธฐ
  • Props ๊ฐœ๋… = Component ์•ˆ์— ๋„ฃ์„ ์ˆ˜ ์žˆ๋Š” ์š”์†Œ

App.js์•ˆ์— ์—ฌ๋Ÿฌ๊ฐœ์˜ Argument๋ฅผ ์ƒ์„ฑํ•˜๊ณ , Props๋ฅผ ์ด์šฉํ•ด์„œ ๋ฐ์ดํ„ฐ ์ฃผ๊ณ ๋ฐ›๊ธฐ

  • map : function์„ ์ทจํ•ด์„œ, ํ•ด๋‹น ํ•จ์ˆ˜๋ฅผ array์˜ ๊ฐ item์— ์ ์šฉํ•œ๋‹ค. 

React์˜ Element๋Š” ๋ชจ๋‘ ๊ณ ์œ ํ•ด์•ผ ํ•œ๋‹ค. 

  • list์— id๋ฅผ ์ถ”๊ฐ€ํ•ด์ค€๋‹ค.
  • ์›นํŽ˜์ด์ง€์˜ console์ฐฝ์— ์˜ค๋ฅ˜๊ฐ€ ์‚ฌ๋ผ์งˆ ๊ฒƒ

 

PropTypes

npm i prop-types

PropTypes๋ฅผ ์ด์šฉํ•ด, console์—์„œ prop ์ „๋‹ฌ์— ์ด์ƒ์ด ์—†๋Š”์ง€ ํ™•์ธ๊ฐ€๋Šฅ

 

๋™์  ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃจ๋Š” State

  • state๋ฅผ ์“ฐ๊ธฐ ์œ„ํ•ด์„œ๋Š”, class component ํ˜•ํƒœ๋ฅผ ์‚ฌ์šฉํ•ด์ค˜์•ผํ–”๋‹ค. (์•ž์„œ์„œ ํ–ˆ๋˜ ๊ฒƒ์€ function component. class component์™€ function component์—๋Š” ์ฐจ์ด๊ฐ€ ์žˆ๋‹ค.)
  • function component๋Š” ๋ฌด์–ธ๊ฐ€๋ฅผ returnํ•ด์„œ screen์— ํ‘œ์‹œํ•œ๋‹ค. 
  • class component๋Š” React.component๋กœ๋ถ€ํ„ฐ ํ™•์žฅ๋˜๊ณ  screen์— ํ‘œ์‹œํ•˜๊ธฐ ์œ„ํ•ด์„œ 'render()' ์•ˆ์— ๋„ฃ์–ด์ค˜์•ผ ํ•œ๋‹ค. render method์•ˆ์— ๋„ฃ์–ด์•ผ๋งŒ ํ•œ๋‹ค. 
  • ๊ทธ๋Ÿฌ๋ฉด ๋ฆฌ์•กํŠธ๊ฐ€ ์•Œ์•„์„œ ์ž๋™์œผ๋กœ, class component์˜ render method๋ฅผ ์‹คํ–‰ํ•œ๋‹ค.

  • state๋Š” object์ด๊ณ , ๋™์ ์ธ ๋ฐ์ดํ„ฐ๋ฅผ state ์•ˆ์— ์จ์ค€๋‹ค. ๊ทธ๋ฆฌ๊ณ  render method์—์„œ ํ˜ธ์ถœ์„ ํ•ด์ค€๋‹ค. 

  • setState({}) : state๋ฅผ ๋ฐ”๊พธ๊ณ  ์‹ถ๋‹ค๋ฉด, setState๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. ์ƒˆ๋กœ์šด ๋ฐ์ดํ„ฐ๋ฅผ ์•Œ์•„์„œ refreshํ•˜๊ณ , render function์„ refreshํ•ด ํ‘œ์‹œํ•ด์ค€๋‹ค. 

 

  • current ์จ์„œ, ๋” ์ฟจํ•˜๊ฒŒ ์ฝ”๋“œ์งœ๊ธฐ

 

React Lifecycle Method

  • refresh => Component์˜ render ํ˜ธ์ถœ -> componentDidMount 
  • setState ํ˜ธ์ถœ => render -> ์—…๋ฐ์ดํŠธ๊ฐ€ ๋˜๋ฉด, ComponentDidUpdate๊ฐ€ ์ž‘๋™ํ•  ๊ฒƒ

 

Axios

npm i axios

728x90
๋ฐ˜์‘ํ˜•