'react-datepicker'์—์„œ ๋‚ ์งœ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•  ๋•Œ ๊ฒช์—ˆ๋˜ ์‹œํ–‰์ฐฉ์˜ค
ยท
Frontend/React
1. react-datepicker๋กœ ๋‹ฌ๋ ฅ์„ ๊ตฌํ˜„ํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค.ํ˜„์žฌ ์ง„ํ–‰ํ•˜๊ณ  ์žˆ๋Š” ํ”„๋กœ์ ํŠธ์—์„œ ๋‹ฌ๋ ฅ์œผ๋กœ ๋‚ ์งœ๋ฅผ ์„ ํƒํ•˜๋Š” ๊ฒƒ์„ ๊ตฌํ˜„ํ•ด์•ผ ํ–ˆ๋‹ค. ๋‹ฌ๋ ฅ์„ ์ง์ ‘ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์€ ํž˜๋“ค ๊ฒƒ ๊ฐ™์•„์„œ ‘react-datepicker’ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค. ์ผ๋‹จ ๋‹ฌ๋ ฅ UI๋ฅผ ํ”ผ๊ทธ๋งˆ์— ๋งž๊ฒŒ ์ปค์Šคํ…€ํ•˜๋Š” ๊ฒƒ์— ์ง‘์ค‘ํ–ˆ๋‹ค. ๋‹ฌ๋ ฅ์„ ์ปค์Šคํ…€ํ•˜๋Š” ๊ฒƒ์€ ์ƒ๊ฐ๋ณด๋‹ค ์–ด๋ ค์› ์ง€๋งŒ, ์—ฌ๋Ÿฌ ๋ฒˆ ์‹œํ–‰์ฐฉ์˜ค๋ฅผ ๊ฒช์œผ๋‹ˆ ๋น„์Šทํ•˜๊ฒŒ ๋ณด์ด๊ฒŒ ๋งŒ๋“œ๋Š”๋ฐ์—๋Š” ์„ฑ๊ณตํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.  2. ์ด์ œ ๋‚ ์งœ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜์ž์ด์ œ๋Š” ์„ ํƒํ•œ ๋‚ ์งœ๋ฅผ ์ƒํƒœ๋กœ ๊ด€๋ฆฌํ•ด์•ผ ํ•œ๋‹ค.๋จผ์ € ๊ตฌ์กฐ๋ฅผ ์„ค๋ช…ํ•˜์ž๋ฉด, SelectBox๋ฅผ ํด๋ฆญํ•˜๋ฉด ๋‚ด๊ฐ€ ๋งŒ๋“ค์–ด๋†“์€ Dialog ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋‚˜์˜ค๊ณ , Dialog ์ปดํฌ๋„ŒํŠธ์˜ children์— Datepicker๊ฐ€ ์žˆ๊ณ  ๊ทธ ๋ฐ‘์—๋Š” ํ™•์ธ(confirm) ๋ฒ„ํŠผ๊ณผ ๋‹ซ๊ธฐ(ca..
[KUIT] 5์ฃผ์ฐจ ์›Œํฌ๋ถ ๋ณด์ถฉ(React)
ยท
KUIT
์ด ๊ธ€์€ KUIT Web ๋ถ€์›๋ถ„๋“ค์„ ๋Œ€์ƒ์œผ๋กœ ์“ด ๊ธ€์ž…๋‹ˆ๋‹ค. 1. ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ๋กœ ๋Œ€์ฒด๋œ ์ด์œ class ProfilePage extends React.Component { showMessage = () => { alert(`${this.props.user} ๋ฅผ ํŒ”๋กœ์šฐ ํ–ˆ์Šต๋‹ˆ๋‹ค`); } handleClick = () => { // const {user} = this.props; ์ด๋ ‡๊ฒŒ ๋ฏธ๋ฆฌ ํ• ๋‹นํ•ด๋‘ฌ์„œ ํ•ด๊ฒฐ์€ ๊ฐ€๋Šฅ // setTimeout(() => this.showMessage(user), 3000); setTimeout(this.showMessage, 5000); // this.showMessage ๋Œ€์‹  user ๋„ฃ์œผ๋ฉด ํ•ด๊ฒฐ ๊ฐ€๋Šฅ } render() { return Fol..
[GDSC Konkuk kprintf] React 19 ์—…๋ฐ์ดํŠธ ๊ฐ•์˜ ์ •๋ฆฌ + ํ›„๊ธฐ
ยท
Event
์˜ค๋Š˜ GDSC์—์„œ ์ฃผ์ตœํ•œ 'kprintf'๋ผ๋Š” ํ–‰์‚ฌ๋ฅผ ๋‹ค๋…€์™”๋‹ค. ๋””์Šค์ฝ”๋“œ์—์„œ kprintf๋ผ๋Š” ํ–‰์‚ฌ๊ฐ€ ์—ด๋ฆฐ๋‹ค๋Š” ๊ฒƒ์„ ํ™•์ธํ•˜๊ณ  ๋ฌด์Šจ ์ฃผ์ œ์— ๋Œ€ํ•œ ๊ฐ•์˜๊ฐ€ ์—ด๋ฆฌ๋Š”์ง€ ์‚ดํŽด๋ดค๋‹ค. ๋‹ค์–‘ํ•œ ์ฃผ์ œ๋“ค์ด ์žˆ์—ˆ๋Š”๋ฐ ๊ทธ ์ค‘์— React์— ๋Œ€ํ•œ, ์ •ํ™•ํžˆ๋Š” React ๋ฒ„์ „์ด 19๋กœ ์—…๋ฐ์ดํŠธ๋˜๋ฉด์„œ ์–ด๋–ป๊ฒŒ ๋ฐ”๋€Œ๋Š”์ง€ ์•Œ๋ ค์ฃผ๋Š” ๊ฐ•์˜๊ฐ€ ์žˆ๊ธธ๋ž˜ ๋ฐ”๋กœ ์‹ ์ฒญํ–ˆ๋‹ค. React๋ฅผ ์‚ฌ์šฉํ•ด๋ณธ ์ ์€ ๊ฝค ์žˆ์ง€๋งŒ ๋ฒ„์ „์ด ๋ช‡์ธ์ง€, ๋˜ ์ตœ์‹  ๊ธฐ๋Šฅ์€ ๋ฌด์—‡์ธ์ง€์— ๋Œ€ํ•œ ๊ด€์‹ฌ์€ ๊ฐ–์ง€ ์•Š์•˜์—ˆ๋‹ค. ์ด๋ฒˆ ์„ธ์…˜์„ ํ†ตํ•ด React์— ๋Œ€ํ•˜์—ฌ ๋” ๊นŠ์€ ์ดํ•ด๋„๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ๊ธฐ๋Œ€ํ–ˆ๋‹ค. ์ด๋ฒˆ ํ•™๊ธฐ์—(์‚ฌ์‹ค ์ €๋ฒˆํ•™๊ธฐ๋„) ์‹ ๊ณตํ•™๊ด€์—์„œ ์ˆ˜์—…์„ ๋“ฃ์ง€ ์•Š๊ธฐ์— ์ •๋ง ์˜ค๋žœ๋งŒ์— ์‹ ๊ณตํ•™๊ด€์„ ๋ฐฉ๋ฌธํ•œ ๊ฒƒ ๊ฐ™๋‹ค. ์ž…์žฅ๊ถŒ QR์ฝ”๋“œ๋ฅผ ์ฒดํฌํ•˜๊ณ  ํ•™๋ฒˆ๊ณผ ์ด๋ฆ„์„ ์ž‘์„ฑํ–ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์œ„ ์‚ฌ์ง„๊ณผ ๊ฐ™์ด ๊ฒฝํ’ˆ์„ ๋ฐ›์•˜๋‹ค..
[PROlog] CRUD ๊ฒŒ์‹œํŒ ๋งŒ๋“ค๊ธฐ ํ”„๋กœ์ ํŠธ ์‹œ์ž‘
ยท
Project/PROlog
1. ๋ฐฑ์—”๋“œ๋ฅผ ์ „๊ณตํ•˜๋Š” ์นœ๊ตฌ์—๊ฒŒ ์—ฐ๋ฝ์ด ์™”๋‹ค. ์ด๋ฒˆ ๊ฒจ์šธ๋ฐฉํ•™ ๋™์•ˆ ๋™์•„๋ฆฌ์—์„œ ์ง„ํ–‰ํ–ˆ๋˜ ํ”„๋กœ์ ํŠธ๊ฐ€ ๋์ด ๋‚ฌ๋‹ค. https://www.behance.net/gallery/192520373/-MOCU ๋ชจ๋‘์˜ ์ฟ ํฐ, MOCU ๋ชจ๋‘์˜ ์ฟ ํฐ, MOCU ๊ฒŒ์‹œ: 2024๋…„ 2์›” 27์ผ www.behance.net (์ €๋ฒˆ ๊ฒจ์šธ๋ฐฉํ•™ ๋™์•ˆ ๊ฐœ๋ฐœํ•œ ํ”„๋กœ์ ํŠธ์˜ ํฌํŠธํด๋ฆฌ์˜ค๋Š” ์œ„ ๋งํฌ๋ฅผ ํ†ตํ•ด ์ฐธ๊ณ ํ•  ์ˆ˜ ์žˆ๋‹ค.) ํ”„๋กœ์ ํŠธ๊ฐ€ ๋๋‚˜๊ธฐ ํ•˜๋ฃจ ์ „ ๋‚ , ๊ฐ‘์ž๊ธฐ ์นœ๊ตฌํ•œํ…Œ ์นดํ†ก์ด ์™”๋‹ค. ๋ฐฑ์—”๋“œ๋ฅผ ๊ณต๋ถ€ํ•˜๊ณ  ์žˆ๋Š” ์นœ๊ตฌ์˜€๋‹ค. ์ง€๊ธˆ ํ•˜๊ณ  ์žˆ๋Š” ํ”„๋กœ์ ํŠธ๊ฐ€ ๋๋‚˜๋ฉด ๊ฐ™์ด ํ”„๋กœ์ ํŠธ๋ฅผ ํ•  ์ƒ๊ฐ์ด ์—†๋ƒ๊ณ . ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๋ฉด์„œ ํ”„๋ก ํŠธ์—”๋“œ ์‹ค๋ ฅ์„ ๋” ๊ธฐ๋ฅด๊ณ  ์‹ถ์—ˆ๊ธฐ์— ๋ฐ”๋กœ ์ˆ˜๋ฝํ–ˆ๋‹ค. ํ”„๋กœ์ ํŠธ๊ฐ€ ๋๋‚˜๊ณ  ๋ฉฐ์น  ๋’ค, ์šฐ๋ฆฌ๋Š” ํ”„๋กœ์ ํŠธ์— ๋Œ€ํ•œ ํšŒ์˜๋ฅผ ํ–ˆ๋‹ค. ๋งŒ๋“ค๊ณ ์ž ํ•˜๋Š” ํ”„๋กœ์ ..
[React, TS] ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉฐ ์ƒํƒœ ๊ด€๋ฆฌ์— ๋Œ€ํ•ด ์•Œ๊ฒŒ ๋œ ๊ฒƒ๋“ค
ยท
Frontend/React
์ด๋ฒˆ์— ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ useState()๋ฅผ ํ™œ์šฉํ•œ ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ํ•˜๊ณ  ์žˆ๋Š”๋ฐ, ์ƒํƒœ๊ด€๋ฆฌ์— ๋Œ€ํ•œ ํ™•์‹คํ•œ ์ดํ•ด ์—†์ด ๋ฌด์ž‘์ • ์ž‘์—…์„ ํ•˜๋‹ค๋ณด๋‹ˆ ์ฝ”๋“œ๊ฐ€ ๋‚ด๊ฐ€ ์ดํ•ดํ•˜๊ธฐ๋„ ์–ด๋ ค์šธ ์ •๋„๋กœ ๋ณต์žกํ•ด์ ธ ์žˆ์—ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ƒํƒœ๊ด€๋ฆฌ์— ๋Œ€ํ•œ ๊ณต๋ถ€๋ฅผ ํ•˜๊ณ  ๋‹ค์‹œ ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ–ˆ๋‹ค. ์ด๋ฒˆ์— ์•Œ๊ฒŒ ๋œ ๋‚ด์šฉ์„ ํ•œ ๋ฒˆ ์ •๋ฆฌํ•ด ๋ณด๋ ค ํ•œ๋‹ค. 1. ์ƒํƒœ ๊ด€๋ฆฌ๋Š” ๋ถ€๋ชจ์—์„œ ์ด๋ฃจ์–ด์ง€๊ณ , ์ž์‹์—๊ฒŒ props๋กœ ์ „๋‹ฌํ•œ๋‹ค. ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ A์™€ ์ž์‹ ์ปดํฌ๋„ŒํŠธ B,C๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜์ž. ๊ทธ๋ ‡๋‹ค๋ฉด ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๋กœ์ง์€ ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ A์— ์ž‘์„ฑํ•˜๊ณ  ์ด๋ฅผ ์ž์‹ํ•œํ…Œ props๋กœ ์ „๋‹ฌํ•˜๋ฉด ๋œ๋‹ค. ๋งŒ์•ฝ ์ž์‹ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ์ƒํƒœ๊ฐ€ ์—…๋ฐ์ดํŠธ๋˜๋Š” ๊ฒƒ์„ ๋ถ€๋ชจํ•œํ…Œ ์ „๋‹ฌํ•˜๊ณ  ์‹ถ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜์ž. (์—ฌ๊ธฐ์„œ ๋ถ€๋ชจ๋Š” SearchResult.tsx์ด๊ณ , ์ž์‹์€ BtmShee..
[ํ”„๋กœ์ ํŠธ] ์˜ํ™” ์ •๋ณด ์›น์‚ฌ์ดํŠธ React๋กœ ๊ตฌํ˜„ํ•˜๊ธฐ
ยท
Project/Nomadcoder
๋งํฌ ๊นƒํ—ˆ๋ธŒ: https://github.com/crohasang/React-Practice GitHub - crohasang/React-Practice: ๋ณ„์ ์ด 8.5์  ์ด์ƒ์ธ ์˜ํ™”๋“ค์„ ์ •๋ ฌํ•ด์„œ ๋ณด์—ฌ์ฃผ๋Š” ์‚ฌ์ดํŠธ๋ฅผ React๋ฅผ ํ™œ ๋ณ„์ ์ด 8.5์  ์ด์ƒ์ธ ์˜ํ™”๋“ค์„ ์ •๋ ฌํ•ด์„œ ๋ณด์—ฌ์ฃผ๋Š” ์‚ฌ์ดํŠธ๋ฅผ React๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๊ตฌํ˜„ํ•˜์˜€์Šต๋‹ˆ๋‹ค. - GitHub - crohasang/React-Practice: ๋ณ„์ ์ด 8.5์  ์ด์ƒ์ธ ์˜ํ™”๋“ค์„ ์ •๋ ฌํ•ด์„œ ๋ณด์—ฌ์ฃผ๋Š” ์‚ฌ์ดํŠธ๋ฅผ React๋ฅผ ํ™œ์šฉ github.com ์‚ฌ์ดํŠธ ์ ‘์†: https://crohasang.github.io/React-Practice/ React App crohasang.github.io ๋งŒ๋“ค๊ฒŒ ๋œ ๊ณ„๊ธฐ์™€ ๊ณผ์ • ๋…ธ๋งˆ๋“œ์ฝ”๋”์˜ 'ReactJS๋กœ ์˜ํ™” ์›น ์‚ฌ์ดํŠธ ๋งŒ๋“ค๊ธฐ..
[React] useEffect()์— ๋Œ€ํ•ด์„œ
ยท
Frontend/React
useEffect()๋Š” ์ฝ”๋“œ์˜ ์‹คํ–‰ ์‹œ์ ์„ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ํ•จ์ˆ˜์ด๋‹ค. useEffect()๋Š” ๋‘ ๊ฐœ์˜ argument๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”๋ฐ, ์ฒซ ๋ฒˆ์งธ argument๋Š” ์šฐ๋ฆฌ๊ฐ€ ์‹คํ–‰ํ•˜๊ณ  ์‹ถ์€ ์ฝ”๋“œ๊ฐ€, ๋‘ ๋ฒˆ์งธ argument์—๋Š” [] ๋ฐฐ์—ด(dependency)์ด ์žˆ๋‹ค. ๋‘ ๋ฒˆ์งธ argument์— ๋ฌด์—‡์ด ๋“ค์–ด๊ฐ€๋А๋ƒ์— ๋”ฐ๋ผ ์‹คํ–‰ ๊ฒฐ๊ณผ๊ฐ€ ๋‹ฌ๋ผ์ง€๋Š”๋ฐ, 1. ๋นˆ ๋ฐฐ์—ด์„ ๋„ฃ๋Š” ๊ฒฝ์šฐ -> ์ตœ์ดˆ 1ํšŒ ๋žœ๋”๋ง ๋  ๋•Œ๋งŒ ์‹คํ–‰ํ•œ๋‹ค. 2. [a] -> a๊ฐ€ ๋ณ€๊ฒฝ๋  ๊ฒฝ์šฐ๋งŒ ๋žœ๋”๋งํ•œ๋‹ค. 3. [a, b] -> a๋‚˜ b์ค‘ ํ•˜๋‚˜๊ฐ€ ๊ฐ’์ด ๋ณ€๊ฒฝ ๋  ๋•Œ ๋žœ๋”๋งํ•œ๋‹ค. useEffect()๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ถˆํ•„์š”ํ•œ ๋ Œ๋”๋ง๊ณผ ์ž‘์—…์„ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ๋‹ค. ์˜ˆ์‹œ ์ฝ”๋“œ const onChange = (event) => setKeyword(event.target.v..
[React] Props์— ๋Œ€ํ•ด์„œ
ยท
Frontend/React
React์—์„œ Props๋Š” ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๋กœ๋ถ€ํ„ฐ ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” ๋งค์ปค๋‹ˆ์ฆ˜์ด๋‹ค. ์š”์†Œ๋ฅผ ๋งŒ๋“ค ๋•Œ๋งˆ๋‹ค ์Šคํƒ€์ผ๋“ค์„ ์ž‘์„ฑํ•ด์ฃผ๋Š” ๊ฒƒ์€ ๋„ˆ๋ฌด ์‹œ๊ฐ„์ด ์˜ค๋ž˜ ๊ฑธ๋ฆฐ๋‹ค. ๊ทธ ๋Œ€์‹  ์Šคํƒ€์ผ๋“ค์„ ๋ชจ๋‘ ๊ฐ–๋Š” ๋‹จ ํ•œ๊ฐ€์ง€์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. Props ์ฝ”๋“œ ์˜ˆ์‹œ ๋‚ด๊ฐ€ ๋งŒ๋“ค๊ณ  ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๋“ค์€ function Btn() -> ๊ด„ํ˜ธ๋กœ argument(์ธ์ž)๋ฅผ ๋ฐ›๋Š”๋ฐ, ์ด ๋•Œ argument์˜ ์ด๋ฆ„์€ ๋งˆ์Œ๋Œ€๋กœ ์ง€์–ด์ค„ ์ˆ˜ ์žˆ๋‹ค. ๋ฆฌ์•กํŠธ๊ฐ€ ์‹ค์ œ๋กœ ํ•˜๋Š” ์ž‘์—…์€ ํ•จ์ˆ˜(Btn())๋ฅผ ํ˜ธ์ถœํ•ด์„œ ์šฐ๋ฆฌ๊ฐ€ ๋„ฃ์–ด๋‘” ๋ชจ๋“  ๊ฒƒ๋“ค์„ ์ฒซ ๋ฒˆ์งธ ์ธ์ž๋กœ ๋„ฃ์–ด์ฃผ๋Š” ๊ฒƒ์ด๋‹ค. Btn ์ปดํฌ๋„ŒํŠธ์˜ prop๋“ค์—๊ฒŒ ์ ‘๊ทผํ•˜๋ ค๋ฉด prop.text ๋“ฑ์œผ๋กœ ์ ์–ด์ค€๋‹ค. React.memo() props์— function๋„ ๋ณด๋‚ผ ์ˆ˜..
[React] useState()์— ๋Œ€ํ•ด์„œ
ยท
Frontend/React
์–ด๋–ป๊ฒŒ ํ•˜๋ฉด React.js์—์„œ ๊ฐ’์ด ๋ฐ”๋€” ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ด์•„์ค„ ์ˆ˜ ์žˆ์„๊นŒ? useState()๋ฅผ ํ™œ์šฉํ•˜๋ฉด React.JS์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅ์‹œ์ผœ ์ž๋™์œผ๋กœ ๋ฆฌ๋ Œ๋”๋ง์„ ์ผ์œผํ‚ฌ ์ˆ˜ ์žˆ๋‹ค. useState() ์ฝ”๋“œ ์˜ˆ์‹œ const data = React.useState();๋ฅผ console.log ์‹œํ‚ค๋ฉด [undefined, f ] -> undefined์™€ ํ•จ์ˆ˜๊ฐ€ ์ ํžŒ ๋ฐฐ์—ด์ด ๋‚˜ํƒ€๋‚œ๋‹ค. undefined๋Š” data์ด๊ณ  f๋Š” data๋ฅผ ๋ฐ”๊ฟ€ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํ•จ์ˆ˜์ด๋‹ค. React.useState() ํ•จ์ˆ˜๋Š” ์ดˆ๊ธฐ๊ฐ’์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฆ‰, undefined -> ์ดˆ๊ธฐ๊ฐ’ , f -> ๊ทธ ๊ฐ’์„ ๋ฐ”๊พธ๋Š” ํ•จ์ˆ˜์ด๋‹ค. React.useState() ๋ฐฐ์—ด์—์„œ ๋ณดํ†ต ๋ฐ์ดํ„ฐ์—๋Š” counter์ฒ˜๋Ÿผ ์›ํ•˜๋Š”๋Œ€๋กœ ๋ถ™์ด๊ณ  f๋Š” set ๋’ค์— ๋ฐ์ดํ„ฐ ์ด..
[React] createElement, ReactDOM, JSX์— ๋Œ€ํ•ด์„œ
ยท
Frontend/React
createElement React์—์„œ๋Š” createElement ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด React ์š”์†Œ๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ ์‹ค์ œ๋กœ createElement๋ฅผ ์“ฐ๋Š” ๊ฒฝ์šฐ๋Š” ๋งŽ์ง€ ์•Š๊ธฐ์—, ์ดํ•ด๋งŒ ํ•˜๊ณ  ๋„˜์–ด๊ฐ€์ž. createElement๋ฅผ ์“ธ ๋•Œ ์ฒซ ๋ฒˆ์งธ argument๋Š” root์— ๋“ค์–ด๊ฐˆ HTML ํƒœ๊ทธ์ด๋ฉฐ, ๋‘ ๋ฒˆ์งธ argument๋Š” props๊ฐ€ ํฌํ•จ๋œ object, ์„ธ ๋ฒˆ์งธ argument๋Š” content์ด๋‹ค. โ€ป chatGPT์˜ createElement์— ๋Œ€ํ•œ ์„ค๋ช…๋„ ์ฒจ๋ถ€ํ•œ๋‹ค. React.createElement(type, [props], [...children]) type: React ์š”์†Œ์˜ ํƒ€์ž…์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, HTML ์š”์†Œ๋ผ๋ฉด ๋ฌธ์ž์—ด๋กœ "div", "span" ๋“ฑ์„ ์‚ฌ์šฉํ•˜๋ฉฐ, ์‚ฌ์šฉ์ž ์ •์˜ ..