React

camilleยท2022๋…„ 5์›” 8์ผ
0

React

๋ชฉ๋ก ๋ณด๊ธฐ
1/9
post-thumbnail

๐Ÿ“• Frontend-Framework(Library)

" Angular VS Vue VS React "

  • Angular
    : TypeScript ๊ธฐ๋ฐ˜์œผ๋กœ ์•ˆ์ •์ ์ด๊ณ  ํƒ„ํƒ„ํ•œ app๊ฐœ๋ฐœ์ด ๊ฐ€๋Šฅํ•˜๋ฉฐ,Framework๋‹ต๊ฒŒ ๋‹คํ–ฅํ•œ ๊ธฐ๋Šฅ์ด ๋‚ด์žฅ๋˜์–ด์žˆ๋‹ค. ํ•˜์ง€๋งŒ ๋ฌด๊ฒ๊ณ  ๋ฐฐ์šฐ๊ธฐ๊ฐ€ ์–ด๋ ต๋‹ค๋Š” ๋‹จ์ ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

  • Vue
    : Evan You๋ผ๋Š” ๊ฐœ์ธ์ด ๊ฐœ๋ฐœํ•œ ํ”„๋ ˆ์ž„์›Œํฌ๋กœ ์ฝ”๋“œ๊ฐ€ ๊น”๋”ํ•˜๊ณ  ๋ฐฐ์šฐ๊ธฐ ์‰ฝ๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ€์žฅ ๋‚˜์ค‘์— ์ƒ๊ฒผ์ง€๋งŒ, ์„ฑ์žฅ ์†๋„๊ฐ€ ์ •๋ง ๋น ๋ฅธ ํŽธ์ด๋‹ค.

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

" Library VS Framework "

React๋ž€?

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

So,
๋ฆฌ์•กํŠธ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ธฐ๋ณธ์œผ๋กœ ์“ฐ๋˜, ์•ฝ๊ฐ„์˜ ์—…๊ทธ๋ ˆ์ด๋“œ๊ฐ€ ๋˜์–ด์žˆ๋‹ค๊ณ  ๋ณผ ์ˆ˜ ์žˆ๋‹ค.
๊ทธ๋Ÿฌ๋ฉด, ์ด ์•ฝ๊ฐ„์˜ ์—…๋ฐ์ดํŠธ๋ž€ ๋ฌด์—‡์ผ๊นŒ?

  • ์ž๋™์œผ๋กœ UI๋ฅผ ์—…๋ฐ์ดํŠธ ํ•ด์ค€๋‹ค. : ๊ธฐ์กด์˜ ์›น์‚ฌ์ดํŠธ ๊ฐ™์€ ๊ฒฝ์šฐ์—๋Š” ์—…๋ฐ์ดํŠธ ๋œ ๊ฒƒ์„ ๋ณด๋ ค๋ฉด ๋ฆฌํ”„๋ ˆ์‰ฌ๋ฅผ ํ•˜๋‚˜ ํ•˜๋‚˜ ํ•ด์ค˜์•ผ ํ–ˆ์ง€๋งŒ, ๋ฆฌ์•กํŠธ ๊ฐ™์€ ๊ฒฝ์šฐ์—๋Š” ์–ด๋–ค ๋‚ด์šฉ์ด ๋ฐ”๋€Œ์—ˆ์„ ๋•Œ ์ž๋™์œผ๋กœ ์—…๋ฐ์ดํŠธ๋ฅผ ํ•ด์ค€๋‹ค.

  • ์ฝ”๋“œ์˜ ์žฌํ™œ์šฉ์„ ๋งŽ์ด ํ•  ์ˆ˜์žˆ๋‹ค.

  • ์ฝ”๋“œ ์ •๋ฆฌ๋ฅผ ํ•ด์ค€๋‹ค.

  • HTML๊ณผ Javascript๋ฅผ ํ•ฉ์นœ ๊ฒƒ์ด JSX๋ฌธ๋ฒ•์ด๋ผ๊ณ  ํ•œ๋‹ค.

๐Ÿ“š ๋ฆฌ์•กํŠธ ์‹œ์ž‘์ „์— ์•Œ์•„๋‘๋ฉด ์ข‹์€ JS ๋ฌธ๋ฒ•

let person = {
  name : "kim",
  age : 40
}
//let name = person.name
//let age = person['age']
let {age} = person
console.log(age)
< 40 

let array = [1,2,3,4]
let [a,b,...rest] = array
console.log(rest);
< [3,4]

//spread
let person = {name: "kim", age: 12}
let person2 = {...person}
let person3 = person
console.log(person2);
< {name: "kim", age: 12}
console.log(person3);
< {name: "kim", age: 12}

๐Ÿ‘ฉโ€๐Ÿซ ์œ ๊ด€์ƒ์œผ๋กœ ๋ณด๋ฉด person2์™€ person3 ๊ฐ๊ฐ ๋‘๊ฐœ์˜ ๊ฐ’์ด ๊ฐ™์•„ ๋ณด์ด์ง€๋งŒ ์ด ๋‘๊ฐœ์˜ ๋ณต์‚ฌ ๋ฉ”์ปค๋‹ˆ์ฆ˜์ด ์กฐ๊ธˆ ๋‹ค๋ฅด๋‹ค.
person3๊ณผ ๊ฐ™์ด ...์„ ๋„ฃ์ง€ ์•Š๊ณ  ๋ฐ”๋กœ ํ• ๋‹น์„ ํ•˜๊ฒŒ๋˜๋ฉด, ์ด๊ฑฐ๋Š” ๊ฐ์ฒด์˜ ์ฃผ์†Œ ๊ฐ’๋งŒ ๋ณต์‚ฌํ•˜๋Š” ๊ฒƒ์ด๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ์ฆ‰ ๊ฐ์ฒด๋Š” ํ•˜๋‚˜์ด๊ณ  ๊ทธ ๊ฐ์ฒด๋ฅผ ์ฐธ์กฐํ•˜๋Š” ๋ณ€์ˆ˜๊ฐ€ ๋‘๊ฐœ์ด๋‹ค. !! ํ•˜์ง€๋งŒ ...์„ ๋„ฃ์€ person2๊ฐ™์€ ๊ฒฝ์šฐ๋Š” ๋ณต์‚ฌ๊ฐ€ ๋˜์–ด์„œ ...์„ ๋„ฃ์–ด์„œ ๊ฐ์ฒด๊ฐ€ ํ•˜๋‚˜ ์ƒ๊ธฐ๋Š” ๊ฒƒ์ด๋‹ค.

console.log(person2 == person2)๋กœ ๋น„๊ตํ•ด ๋ณด๋ฉด false๊ฐ€ ๋‚˜์˜ค๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.
ํ•˜์ง€๋งŒ, console.log(person == person3)๋กœ ํ•˜๋ฉด true ๋‘˜์˜ ๊ฐ’์ด ๊ฐ™๋‹ค๊ณ  ๋‚˜์˜จ๋‹ค.
let person = {name: "kim", age: 12}

let person2 = {...person, name:"kayoung"}
let person3 = person
console.log(person2);
< {name: "kayoung", age: 12}
console.log(person3);
< {name: "kim", age: 12}
person2์— ์ด๋ฆ„์„ ์ถ”๊ฐ€ํ•ด์„œ ๋ณ€๊ฒฝํ•ด์ฃผ๋Š” ๊ฒƒ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.

let a = [1,2]
let b = [...a,3]
console.log(b); 
<[1,2,3]
let c = [...a,...b]
console.log(c);
<[1,2,1,2,3]
๋˜๋Š” 
//์‚ผํ•ญ์—ฐ์‚ฐ์ž
let person = {name:ka, age:50}

if(person){
  console.log(person.name)
}else{
  console.log("there is no person")
}
< ka
----------------------------------------------------
console.log(person? person.name:"there is no person")
< ka

CRA(Create-React-App)

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

  • ๋ฆฌ์•กํŠธ๋Š” UI๊ธฐ๋Šฅ๋งŒ ์ œ๊ณตํ•˜๊ธฐ์— ๊ฐœ๋ฐœ์ž๊ฐ€ ์ง์ ‘ ๊ตฌ์ถ•ํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ๋“ค์ด ๋งŽ๋‹ค.
  • ์ฒ˜์Œ ์‹œ์ž‘ํ•˜๋Š” ๋‹จ๊ณ„์—์„œ๋Š” ์ง์ ‘ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ๊ตฌ์ถ•ํ•˜๊ธฐ๊ฐ€ ์–ด๋ ต๋‹ค
  • If you're learning React or Creating a new single-page app, use Create React App
  • CRA๋Š” ๋ฆฌ์•กํŠธ๋กœ ์›น์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ํ™˜๊ฒฝ์„ ์ œ๊ณตํ•œ๋‹ค.
  • CRA๋ฅผ ์ด์šฉํ•˜๋ฉด ํ•˜๋‚˜์˜ ๋ช…๋ น์–ด๋กœ ๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœํ™˜๊ฒฝ ๊ตฌ์ถ•์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

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