๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๋ฐ˜์‘ํ˜•

React32

[React] ๋ผ์šฐํŒ…(Routing)์ด๋ž€? ๐Ÿฟ ๋ผ์šฐํŒ…(Routing)์ด๋ž€? ๋‹ค๋ฅธ ๊ฒฝ๋กœ(url ์ฃผ์†Œ)์— ๋”ฐ๋ผ ๋‹ค๋ฅธ View(ํ™”๋ฉด)๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ React ์ž์ฒด์—๋Š” ์ด๋Ÿฐ ๊ธฐ๋Šฅ์ด ๋‚ด์žฅ๋˜์–ด ์žˆ์ง€ ์•Š๋‹ค. (์ด๊ฒƒ์ด React๊ฐ€ Framework ๊ฐ€ ์•„๋‹Œ Library ๋กœ ๋ถ„๋ฅ˜๋˜๋Š” ์ด์œ ) ๊ทธ๋ž˜์„œ React์˜ ๋ผ์šฐํŒ… ๊ธฐ๋Šฅ์„ ์œ„ํ•ด ๊ฐ€์žฅ ๋งŽ์ด ์“ฐ์ด๋Š” React-router๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. ๐Ÿฟ ๋ฆฌ์•กํŠธ ๋ผ์šฐํ„ฐ(React Router)๋ž€? angular์ด๋‚˜ angular2, backbone ๊ฐ™์€ ํ”„๋ ˆ์ž„์›Œํฌ๋Š” ํ”„๋ ˆ์ž„์›Œํฌ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋ผ์šฐํŒ… ๊ธฐ๋Šฅ์ด ๊ธฐ๋ณธ์ ์œผ๋กœ ๋“ค์–ด์žˆ๋‹ค. ํ•˜์ง€๋งŒ React๋Š” View๋งŒ ๋‹ด๋‹นํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‹ค. ๊ทธ๋ž˜์„œ ๋ผ์šฐํŒ…์„ ๋‹ด๋‹นํ•˜๋Š” react-router์„ ๋”ฐ๋กœ ์„ค์น˜ํ•ด์ฃผ์–ด์•ผ ํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋˜ ๋‚˜์ค‘์— Model๊ณผ Controller๋ฅผ ๋‹ด๋‹นํ•˜๋Š” ํŒจํ‚ค์ง€๋ฅผ ์„ค์น˜ํ•ด์•ผ ํ•œ.. 2021. 11. 24.
[React] 10๊ฐ€์ง€ Hooks Collection of sexy React Hooks ready to install with NPM - useTitle - useInput - usePageLeave - useClick - useFadeIn - useFullscreen - useHover - useNetwork - useNotification - useScroll - useTabs - usePreventLeave - useConfirm - useAxios 1. useInput useInput์€ ๊ธฐ๋ณธ์ ์œผ๋กœ Input์„ ์—…๋ฐ์ดํŠธ ํ•œ๋‹ค. export const useInput = (initialValue, validator) => { const [value, setValue] = useState(initialValue); const onCh.. 2021. 11. 24.
Frontend Framework(Library) ๐ŸŒˆ Angular 2010๋…„ ๊ตฌ๊ธ€์—์„œ ๊ฐœ๋ฐœํ•œ SPA(Single Page Application) ๋ฐฉ์‹์˜ Javascript Framework. TypeScript ๊ธฐ๋ฐ˜์œผ๋กœ ๋งค์šฐ ์•ˆ์ •์ ์ด๊ณ  ํƒ„ํƒ„ํ•œ ํ”„๋ก ํŠธ์—”๋“œ ์•ฑ ๊ฐœ๋ฐœ์ด ๊ฐ€๋Šฅํ•˜๋ฉฐ ๋ชจ๋ฐ”์ผ ์›น, ๋„ค์ดํ‹ฐ๋ธŒ ๋ชจ๋ฐ”์ผ, ๋ฐ์Šคํฌํƒ‘ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊นŒ์ง€ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์— ํ•„์š”ํ•œ ๋Œ€๋ถ€๋ถ„์˜ ๊ธฐ๋Šฅ์„ ๊ฐ–์ถ”๊ณ  ์žˆ๋‹ค. Spring MVC์™€ ๊ต‰์žฅํžˆ ์œ ์‚ฌํ•œ ๋ฐฉ์‹์œผ๋กœ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด ์ง„ํ–‰๋œ๋‹ค. ๐Ÿ’ง ์žฅ์  Component ๊ธฐ๋ฐ˜ ๊ธฐ๋Šฅ์— ๋”ฐ๋ผ ์ฝ”๋“œ๋ฅผ ๋ถ„๋ฆฌํ•˜๊ณ , ์žฌ์‚ฌ์šฉ ํ•˜๋Š” ๊ฒƒ์ด ๊ต‰์žฅํžˆ ์‰ฝ๋‹ค. ์–‘๋ฐฉํ–ฅ ๋ฐ”์ธ๋”ฉ ์ง€์› ์›นํŽ˜์ด์ง€ ์†๋„ Angular๋กœ ๋งŒ๋“  SPA๋Š” ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ์˜ ์ „ํ™˜ ์†๋„๊ฐ€ ๊ต‰์žฅํžˆ ๋น ๋ฅด๋‹ค. TypeScript TypeScript๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์—„๊ฒฉํ•˜์ง€๋งŒ ๊ทธ๋งŒํผ ์ง๊ด€์ ์ด๊ณ  ์˜ค๋ฅ˜๋ฅผ ์ค„์ผ .. 2021. 11. 21.
[React] React๋ž€? ๐ŸŒธ React๋ž€? ํŽ˜์ด์Šค๋ถ์—์„œ ๊ฐœ๋ฐœํ•˜๊ณ  ๊ด€๋ฆฌํ•˜๋Š” ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค(UI)๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ Javascript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‹ค. ๐ŸŒธ React์˜ ์žฅ์  Javascript ๊ฐ์ฒด ํ˜•ํƒœ์˜ Virtual DOM์„ ์‚ฌ์šฉํ•˜์—ฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์„ฑ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚จ๋‹ค. Server & Client ์‚ฌ์ด๋“œ rendering ์ง€์›์„ ํ†ตํ•ด ๋ธŒ๋ผ์šฐ์ € ์ธก์˜ ์ดˆ๊ธฐ ๋ Œ๋”๋ง ๋”œ๋ ˆ์ด๋ฅผ ์ค„์ด๊ณ  SEO ํ˜ธํ™˜๋„ ๊ฐ€๋Šฅํ•ด์ง„๋‹ค. ๐Ÿ”ฅ ๋ Œ๋”๋ง(Readering)์ด๋ž€? html ์š”์†Œ(element), ๋˜๋Š” React ์š”์†Œ ๋“ฑ์˜ ์ฝ”๋“œ๊ฐ€ ๋ˆˆ์œผ๋กœ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ๊ทธ๋ ค์ง€๋Š” ๊ฒƒ. ์ปดํฌ๋„ŒํŠธ์˜ ๊ฐ€๋…์„ฑ์ด ๋งค์šฐ ๋†’๊ณ  ๊ฐ„๋‹จํ•˜์—ฌ ์‰ฌ์šด ์œ ์ง€๋ณด์ˆ˜, ๊ฐ„ํŽธํ•œ UI ์ˆ˜์ • ๋ฐ ์žฌ์‚ฌ์šฉ์ด ์šฉ์ดํ•˜๋‹ค.๐Ÿ”ฅ ์ปดํฌ๋„ŒํŠธ(Component)๋ž€? ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•œ UI ๋‹จ์œ„. props๋ฅผ input์œผ๋กœ ํ•˜๊ณ  UI๊ฐ€.. 2021. 11. 18.
[React] State & Event ๐Ÿท State '์ƒํƒœ'๋ผ๋Š” ๋œป. ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์ปดํฌ๋„ŒํŠธ์˜ ์ƒํƒœ ๊ฐ’. ํ™”๋ฉด์— ๋ณด์—ฌ์ค„ ์ปดํฌ๋„ŒํŠธ์˜ UI ์ •๋ณด(์ƒํƒœ)๋ฅผ ์ง€๋‹ˆ๊ณ  ์žˆ๋Š” ๊ฐ์ฒด. State๋Š” ์ปดํฌ๋„ŒํŠธ ๋‚ด์—์„œ ์ •์˜ํ•˜๊ณ  ์‚ฌ์šฉํ•˜๋ฉฐ ์–ผ๋งˆ๋“ ์ง€ ๋ฐ์ดํ„ฐ(๊ฐ์ฒด)๊ฐ€ ๋ณ€๊ฒฝ๋  ์ˆ˜ ์žˆ๋‹ค. State๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์šดํŠธ ๋  ๋•Œ ๊ธฐ๋ณธ๊ฐ’์„ ๊ฐ–๊ฒŒ ๋˜๊ณ  ์šฐ๋ฆฌ๋Š” ์ด State๋ฅผ ํ™œ์šฉํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ๋ณ€ํ™”์‹œ์ผœ์ค„ ์ˆ˜ ์žˆ๋‹ค. ๊ฐ์ฒด์˜ ํ˜•ํƒœ๋ฅผ ๊ฐ–๊ณ  ์žˆ๋‹ค. State๋ฅผ ๋ณ€๊ฒฝํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” setState ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค. class ์ปดํฌ๋„ŒํŠธ์—์„œ State๋ฅผ ์“ธ๋•Œ๋Š” ์ปดํฌ๋„ŒํŠธ์˜ ํ˜•ํƒœ๊ฐ€ ํด๋ž˜์Šค์ด๊ธฐ ๋•Œ๋ฌธ์— this.state๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฝ”๋“œ๋กœ ์ž‘์„ฑํ•ด๋ณด๋ฉด ๋”์šฑ ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋‹ค!.. ๊ณ  ํ•œ๋‹ค. ๐Ÿท State ๊ฐ์ฒด ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ State, ์ฆ‰ ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ์˜ ์ƒํƒœ๋ฅผ .. 2021. 11. 18.
[React] Props & Event ๐Ÿ’ฃ Props properties(์†์„ฑ). ๋‹จ์–ด ๋œป ๊ทธ๋Œ€๋กœ ์ปดํฌ๋„ŒํŠธ์˜ ์†์„ฑ๊ฐ’. ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๋กœ๋ถ€ํ„ฐ ์ „๋‹ฌ ๋ฐ›์€ ๋ฐ์ดํ„ฐ๋ฅผ ์ง€๋‹ˆ๊ณ  ์žˆ๋Š” ๊ฐ์ฒด์ด๋‹ค. props๋ฅผ ํ†ตํ•ด ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๋กœ๋ถ€ํ„ฐ ์ž์‹ ์ปดํฌ๋„ŒํŠธ์—๊ฒŒ state์˜ ์ƒํƒœ๊ฐ’, event handler๋ฅผ ๋„˜๊ฒจ์ค„ ์ˆ˜ ์žˆ๋‹ค. ์ฆ‰, props๋Š” ๋ถ€๋ชจ์—์„œ ์ž์‹์œผ๋กœ ๋ณด๋‚ด์ฃผ๋Š” ์†์„ฑ์ด๋‹ค. State์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ฝ”๋“œ๋กœ ์ž‘์„ฑํ•ด๋ณด๋ฉด ๋”์šฑ ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋‹ค!.. ๊ณ  ํ•œ๋‹ค ๐Ÿ’ฃ Props ๊ฐ์ฒด ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ props, ์ฆ‰ ์ปดํฌ๋„ŒํŠธ์˜ ์†์„ฑ์„ ์–ด๋–ป๊ฒŒ ์ •์˜ํ•˜๋Š”์ง€ ์•Œ์•„๋ณด์ž. // Parent.js import React from 'react'; import Child from '../pages/Child/Child'; class Parent extends React.Compone.. 2021. 11. 18.
๋ฐ˜์‘ํ˜•