React

ํšŒ์‚ฌ ํ”„๋กœ์ ํŠธ์—์„œ ๊ฑฐ๋ž˜๋ช…์„ธํ‘œ๋ฅผ A4 ๊ฐ€๋กœ ๋ฐฉํ–ฅ(landscape)์œผ๋กœ ์ธ์‡„ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค.- ํ™”๋ฉด์—๋Š” ์™ผ์ชฝ ์˜์—ญ๋งŒ ํ‘œ์‹œ- ์ธ์‡„ ์‹œ์—๋Š” A4 ํ•œ ์žฅ์„ ๊ฝ‰ ์ฑ„์›Œ ์ขŒ/์šฐ ๋ชจ๋‘ ์ถœ๋ ฅ (ํ•˜๋‚˜๋Š” ๊ณ ๊ฐ์šฉ / ํ•˜๋‚˜๋Š” ๋‚ด๋ถ€์šฉ)- ์ธ์‡„ ์‹œ ์ „์šฉ ์Šคํƒ€์ผ ์ ์šฉ (ํฐํŠธ ํฌ๊ธฐ, ์—ฌ๋ฐฑ ๋“ฑ ์กฐ์ •)์ด๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด React to Print์˜ useReactToPrint ํ›…์„ ์‚ฌ์šฉํ•˜์—ฌ, ํŠน์ • DOM์— ๋Œ€ํ•ด ์ธ์‡„ ์ž‘์—…์„ ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” React to Print ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด ํŠน์ • ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ธ์‡„ํ•˜๊ณ , ์ธ์‡„ ์‹œ์—๋งŒ ์ ์šฉ๋˜๋Š” ์Šคํƒ€์ผ์„ ์„ค์ •ํ•˜์—ฌ ์ด ๋ฌธ์ œ๋ฅผ ์–ด๋–ป๊ฒŒ ํ•ด๊ฒฐํ–ˆ๋Š”์ง€ ๊ณต์œ ํ•ด ๋ด…๋‹ˆ๋‹ค! ์™œ window.print()๊ฐ€ ์•„๋‹Œ React to Print?์ผ๋ฐ˜์ ์œผ๋กœ ์›น์—์„œ ์ธ์‡„ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•  ๋•Œ window.p..
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์—์„œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ํ”„๋ ˆ์ž„์›Œํฌ๋Š” ์„œ๋กœ ๋‹ค๋ฅธ ์—ญํ• ์„ ์ˆ˜ํ–‰ํ•˜๋ฉฐ, ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ๊ณผ ์‚ฌ์šฉ ๋ฐฉ์‹์—์„œ๋„ ์ฐจ์ด๊ฐ€ ์žˆ๋‹ค. 1. ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ํ”„๋ ˆ์ž„์›Œํฌ์˜ ๊ธฐ๋ณธ ๊ฐœ๋…๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(Library)๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ํŠน์ • ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๋„๊ตฌ๋“ค์˜ ์ง‘ํ•ฉ. ๊ฐœ๋ฐœ์ž๋Š” ํ•„์š”ํ•  ๋•Œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ํŠน์ • ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค.๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ํ๋ฆ„์„ ์ง์ ‘ ์ œ์–ดํ•˜์ง€ ์•Š๋Š”๋‹ค. ๋Œ€์‹ , ๊ฐœ๋ฐœ์ž๊ฐ€ ํ•„์š”ํ•œ ๊ธฐ๋Šฅ์„ ์„ ํƒ์ ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.ํ”„๋ ˆ์ž„์›Œํฌ(Framework)ํ”„๋ ˆ์ž„์›Œํฌ๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ธฐ๋ณธ ๊ตฌ์กฐ๋ฅผ ์ œ๊ณตํ•˜๊ณ , ๊ทธ ์•ˆ์—์„œ ๊ฐœ๋ฐœ์ด ์ด๋ฃจ์–ด์ง€๋„๋ก ํ•œ๋‹ค. ํ”„๋ ˆ์ž„์›Œํฌ๋Š” ์ฝ”๋“œ์˜ ํ๋ฆ„์„ ์ œ์–ดํ•˜๋ฉฐ, ๊ฐœ๋ฐœ์ž๋Š” ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ์ œ์‹œํ•˜๋Š” ๋ฐฉ์‹์— ๋งž์ถ”์–ด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด์•ผ ํ•œ๋‹ค.ํ”„๋ ˆ์ž„์›Œํฌ๋Š” โ€œ์ œ์–ด์˜ ์—ญ์ „(Inversion of Control..
Context๋ž€? : Props Drilling์˜ ๋Œ€์•ˆ Context๋Š” ์ปดํฌ๋„ŒํŠธ์—์„œ Props๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๋„˜๊ฒจ์ฃผ๋Š” ๋ฐฉ์‹์ด๋‹ค. ํŠน์ • ๋ฐ์ดํ„ฐ๋ฅผ ์ปดํฌ๋„ŒํŠธ ํŠธ๋ฆฌ ์ „์ฒด์— ๊ฑธ์ณ ์‰ฝ๊ฒŒ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค€๋‹ค. Context๋Š” Props Drilling ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ด ์ค„ ์ˆ˜ ์žˆ๋‹ค. Props Drilling : ์ค‘์ฒฉ๋œ ์—ฌ๋Ÿฌ ๊ณ„์ธต์˜ ์ปดํฌ๋„ŒํŠธ์—๊ฒŒ props ์ „๋‹ฌ. ๋ฌธ์ œ์ : ํŠน์ • prop์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ์ปดํฌ๋„ŒํŠธ๋“ค์—๊ฒŒ๋„ ํ•ด๋‹น prop์„ ๋‚ด๋ ค์ฃผ์–ด์•ผ ํ•˜๋Š” ๋น„ํšจ์œจ. ๊ฐ€๋…์„ฑ ํ•˜๋ฝ. ์ปดํฌ๋„ŒํŠธ ๊ฒฐํ•ฉ๋„ ์ƒ์Šน์œผ๋กœ ๋ถˆํ•„์š”ํ•œ ๋ฆฌ๋ Œ๋”๋ง ๋ฐœ์ƒ ๊ฐ€๋Šฅ, ์ฝ”๋“œ์˜ ๋ณต์žก๋„ ์ฆ๊ฐ€ context๋Š” ๋ฆฌ์•กํŠธ ๋ฒ„์ „ 16๋ถ€ํ„ฐ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ฆฌ์•กํŠธ ๋‚ด์žฅ API๋กœ, ์–ด๋–ค ๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ๋ผ๋„ ๋ฆฌ์•กํŠธ๋ฅผ import ํ•˜๋ฉด context๋ฅผ ๋ฐ”๋กœ ์ƒ์„ฑํ•˜๊ณ  ..
React์—์„œ ์ปดํฌ๋„ŒํŠธ์˜ ์ƒ๋ช…์ฃผ๊ธฐ๋Š” ํฌ๊ฒŒ ์„ธ ๋‹จ๊ณ„๋กœ ๊ตฌ๋ถ„๋œ๋‹ค. : ๋งˆ์šดํŒ…(Mounting), ์—…๋ฐ์ดํŠธ(Updating), ๊ทธ๋ฆฌ๊ณ  ์–ธ๋งˆ์šดํŒ…(Unmounting) ๊ฐ ๋‹จ๊ณ„๋Š” ์ปดํฌ๋„ŒํŠธ์˜ ์ƒ์„ฑ, ์—…๋ฐ์ดํŠธ ๋ฐ ํŒŒ๊ดด ๊ณผ์ •์— ํ•ด๋‹นํ•œ๋‹ค. 1. ๋งˆ์šดํŒ…(Mounting) ์ด ๋‹จ๊ณ„๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ฒ˜์Œ์œผ๋กœ ์ƒ์„ฑ๋˜์–ด DOM์— ์‚ฝ์ž…๋˜๋Š” ๊ณผ์ •์ด๋‹ค. ๋งˆ์šดํŠธ ๊ณผ์ •์—์„œ๋Š” ์ฒ˜์Œ์œผ๋กœ render ๋ฉ”์„œ๋“œ๊ฐ€ ํ˜ธ์ถœ๋˜์–ด ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ™”๋ฉด์— ๋ Œ๋”๋ง ๋œ๋‹ค. ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ๊ฐ€ ๋งˆ์šดํŒ… ๋‹จ๊ณ„์—์„œ ํ˜ธ์ถœ๋œ๋‹ค. (์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ๋Š” ๋ณผ๋“œ์ฒด) constructor(): ์ปดํฌ๋„ŒํŠธ์˜ ์ƒ์„ฑ์ž. ์ปดํฌ๋„ŒํŠธ์˜ ์ดˆ๊ธฐ ์ƒํƒœ๋ฅผ ์„ค์ •ํ•œ๋‹ค. static getDerivedStateFromProps(): ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์šดํŠธ ๋˜๊ธฐ ์ „์— ํ˜ธ์ถœ๋œ๋‹ค. props์— ์˜ํ•ด ..
useMemo ์‚ฌ์šฉ ๋ชฉ์  useMemo๋Š” React์—์„œ ์ œ๊ณตํ•˜๋Š” ํ›…(Hook) ์ค‘ ํ•˜๋‚˜๋กœ, ์ฃผ๋กœ ๋‘ ๊ฐ€์ง€ ๋ชฉ์ ์œผ๋กœ ์‚ฌ์šฉ๋œ๋‹ค. ๊ณ„์‚ฐ ๋น„์šฉ์ด ๋†’์€ ์—ฐ์‚ฐ์˜ ๊ฒฐ๊ณผ๋ฅผ ์ €์žฅํ•˜๊ณ  ์žฌ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด - ๋งŒ์•ฝ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๊ณ„์‚ฐ ๋น„์šฉ์ด ๋งŽ์ด ๋“œ๋Š” ์—ฐ์‚ฐ์„ ์ˆ˜ํ–‰ํ•˜๊ณ , ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ์—ฌ๋Ÿฌ ๋ฒˆ ์žฌ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค๋ฉด useMemo๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ•ด๋‹น ๊ฒฐ๊ณผ๋ฅผ ์ €์žฅํ•˜๊ณ  ํ•„์š”ํ•  ๋•Œ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฐธ์กฐ ๋™์ผ์„ฑ(Reference Equality)์„ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•ด - React์—์„œ ๊ฐ์ฒด๋‚˜ ๋ฐฐ์—ด๊ณผ ๊ฐ™์€ ๋ณต์žกํ•œ ๋ฐ์ดํ„ฐ ํƒ€์ž…์„ props๋กœ ๋„˜๊ธธ ๋•Œ, ์ด ๋ฐ์ดํ„ฐ๊ฐ€ ๋งค๋ฒˆ ์ƒˆ๋กœ ์ƒ์„ฑ๋˜๋ฉด ์ž์‹ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ถˆํ•„์š”ํ•˜๊ฒŒ ์žฌ๋ Œ๋”๋ง๋  ์ˆ˜ ์žˆ๋‹ค. useMemo๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ด๋Ÿฌํ•œ ๊ฐ์ฒด๋‚˜ ๋ฐฐ์—ด์„ ์ €์žฅํ•˜๋ฉด, ์ปดํฌ๋„ŒํŠธ์˜ ๋ฆฌ๋ Œ๋”๋ง์ด ๋ฐœ์ƒํ•ด๋„ ๋™์ผํ•œ ์ฐธ์กฐ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ๋‹ค...
์˜ค๋Š˜ ๋‚ ์งœ, ํ˜„์žฌ ์‹œ๊ฐ ๊ฐ€์ ธ์˜ค๊ธฐ const getDefaultDate = () => { const today = new Date(); const year = today.getFullYear(); const month = (today.getMonth() + 1).toString().padStart(2, '0'); const day = today.getDate().toString().padStart(2, '0'); const hours = today.getHours().toString().padStart(2, '0'); const minutes = today.getMinutes().toString().padStart(2, '0'); const seconds = today.getSeconds().toStrin..
interface IDownloadExcelParams { responseType?: ResponseType; } const fileAPI = { downloadExcel: (params: IDownloadExcelParams) => { return JSON.get(`file/excel`, params); }, } API ์ •์˜ ๋ถ€๋ถ„ const [isDownloading, setIsDownloading] = useState(false); const downloadTemplate = async () => { try { setIsDownloading(true); const response = await fileAPI.downloadExcel({ responseType: 'blob', }); if (respon..