[ReactJS] React์—์„œ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋ฅผ ์—ฐ๊ฒฐํ•˜๊ณ , event ๊ฐ์ฒด๋ฅผ ํ™œ์šฉํ•  ๋•Œ ์ฃผ์˜ํ•ด์•ผ ํ•  ์ 

2022. 11. 4. 17:58ยทโ—ผ FrontEnd/ReactJS
๋ฐ˜์‘ํ˜•

๐Ÿšจ ๋ฌธ์ œ ์ƒํ™ฉ

React์—์„œ ํŠน์ • ์š”์†Œ์— ์ด๋ฒคํŠธ๋ฅผ ์—ฐ๊ฒฐํ•˜๊ณ , event ๊ฐ์ฒด๋ฅผ ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ๋ฐ›์•„ ํ™œ์šฉํ•˜๊ธฐ ์œ„ํ•ด ์œ„์™€ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜์˜€๋‹ค. ํ•˜์ง€๋งŒ 'event is deprecated'๋ผ๋Š” ์ดํ•ดํ•  ์ˆ˜ ์—†๋Š” ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜์˜€๊ณ  ์ฝ”๋“œ ์—ญ์‹œ ์‹คํ–‰๋˜์ง€ ์•Š์•˜๋‹ค. 

 


๐Ÿ’ก ๋ฌธ์ œ ํ•ด๊ฒฐ ๋ฐ ๊ณผ์ •

๋ฐ”๋‹๋ผ JS์—์„œ ํŠน์ • ์š”์†Œ์— ์ด๋ฒคํŠธ๋ฅผ ์—ฐ๊ฒฐํ•ด์ฃผ๋ ค๋ฉด ์šฐ์„  ํ•ด๋‹น ์š”์†Œ์— ํ•ด๋‹นํ•˜๋Š” DOM ๊ฐ์ฒด๋ฅผ DOM ํŠธ๋ฆฌ์—์„œ ์ฐพ์•„์•ผ ํ•œ๋‹ค. ๊ทธ๋Ÿฌ๊ณ  ๋‚œ ํ›„, ์ด ๊ฐ์ฒด์— ์›ํ•˜๋Š” ์ด๋ฒคํŠธ๋ฅผ addEventListener ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ์—ฐ๊ฒฐํ•ด์ฃผ๋ฉด ๋œ๋‹ค. ํ˜น์€ ์ธ๋ผ์ธ ๋ฐฉ์‹์œผ๋กœ ํŠน์ • ์š”์†Œ์— ํ•ด๋‹นํ•˜๋Š” HTML ํƒœ๊ทธ์— ์ด๋ฒคํŠธ ์†์„ฑ์„ ๋ฐ”๋กœ ๋ถ€์—ฌํ•ด์ฃผ๋Š” ๋ฐฉ๋ฒ•๋„ ์žˆ๋‹ค.

 

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

 

์ด ์ค‘ ํ›„์ž์˜ ๋ฐฉ์‹์ธ ํ•จ์ˆ˜์˜ ์ด๋ฆ„์„ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์—๋Š” 2๊ฐ€์ง€๊ฐ€ ์žˆ๋Š”๋ฐ, ์ด ๋•Œ ์–‘์‹์„ ๋ฐ˜๋“œ์‹œ ์ง€์ผœ์„œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด์•ผ ํ•œ๋‹ค.

// 1.
export default function Login() {

  function handleBtnClick() {
    // (์ƒ๋žต)
  }

  return (
    <button
      onClick={handleBtnClick}
    >
  );
}
// 2.
export default function Login() {

  function handleBtnClick() {
    // (์ƒ๋žต)
  }

  return (
    <button
      onClick={() => handleBtnClick()}
    >
  );
}

 

๋งŒ์ผ ์—ฌ๊ธฐ์„œ event ๊ฐ์ฒด๋ฅผ ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ๋ฐ›์•„ ํ™œ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋ฉด ๋œ๋‹ค. ์—ญ์‹œ ์–‘์‹์„ ๋ฐ˜๋“œ์‹œ ์ง€์ผœ์„œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค.

// 1. ์•„๊นŒ์™€ ๋ณ„ ๋‹ค๋ฅผ ๋ฐ” ์—†์Œ
export default function Login() {

  function handleBtnClick(event) {
    // (์ƒ๋žต)
  }

  return (
    <button
      onClick={handleBtnClick}
    >
  );
}
// 2. (event) => ํ•จ์ˆ˜ ์ด๋ฆ„(event)
// ์–‘ ๊ด„ํ˜ธ ๋‚ด์— ๋ชจ๋‘ event ๋งค๊ฐœ๋ณ€์ˆ˜ ์ด๋ฆ„์„ ์ž‘์„ฑํ•ด์•ผ ํ•œ๋‹ค!!
export default function Login() {

  function handleBtnClick() {
    // (์ƒ๋žต)
  }

  return (
    <button
      onClick={(event) => handleBtnClick(event)}
    >
  );
}

 

์‚ฌ์‹ค ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๊ณผ์ •์€ ์ •๋ง ๋‹จ์ˆœํ–ˆ๋‹ค. ์ธํ„ฐ๋„ท์—์„œ ๋‹ค๋ฅธ React ์ฝ”๋“œ๋ฅผ ๋ณด๋‹ค๊ฐ€ ๋‚˜์˜ ์ฝ”๋“œ๋ฅผ ๋‹ค์‹œ ๋ณด๊ณ  '์–ด? ์—ฌ๊ธฐ์— ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ๋„ฃ์–ด์ค˜์•ผ ํ•˜๋Š” ๊ฑฐ ์•„๋‹Œ๊ฐ€?'ํ•˜๋Š” ๊นจ๋‹ฌ์Œ์„ ์–ป์–ด ๋ฐ”๋กœ ์˜ค๋ฅ˜๋ฅผ ํ•ด๊ฒฐํ–ˆ๋‹ค.

 


๐Ÿ’ฌ ๋А๋‚€ ์ 

์ด๋ฒˆ์— ๋งˆ์ฃผํ–ˆ๋˜ ์—๋Ÿฌ๋Š” ์‚ฌ์‹ค ์ •๋ง ์‚ฌ์†Œํ•œ ๋ฌธ์ œ๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐ์—” ๊ฝค๋‚˜ ์˜ค๋žœ ์‹œ๊ฐ„์ด ์†Œ์š”๋˜์—ˆ๋‹ค. ์ด ๊ธ€์„ ๋ณด๋Š” ๋ˆ„๊ตฐ๊ฐ€๋Š” '๋ญ˜ ์ด๋Ÿฐ ๊ฑธ ๊ฐ€์ง€๊ณ ..?'๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ค ์ง€๋„ ๋ชจ๋ฅด๊ฒ ๋‹ค. ํ•˜์ง€๋งŒ ์ฝ”๋”ฉ์„ ๊ณต๋ถ€ํ•ด ๋ณธ ์‚ฌ๋žŒ์ด๋ผ๋ฉด ์‚ฌ์†Œํ•ด๋ณด์˜€๋˜ ๋ฌธ์ œ์— ์˜์™ธ๋กœ ์˜ค๋žœ ์‹œ๊ฐ„๋™์•ˆ ๋ง‰ํ˜€ ์ „์ „๊ธ๊ธํ–ˆ๋˜ ๊ฒฝํ—˜์ด ๋ˆ„๊ตฌ๋‚˜ ํ•œ ๋ฒˆ์ฏค ์žˆ์œผ๋ฆฌ๋ผ ์ƒ๊ฐํ•œ๋‹ค. ์ด๋ฒˆ ๋ฌธ์ œ๊ฐ€ ๋‚˜์—๊ฒ ๊ทธ๋Ÿฐ ๋ฅ˜์˜ ๋ฌธ์ œ๊ฐ€ ์•„๋‹ˆ์—ˆ์„๊นŒ ์‹ถ๋‹ค. ๋Œ€์‹  ์ด๋ฒˆ ๊ฒฝํ—˜์„ ํ†ตํ•ด ๊นจ๋‹ฌ์•˜๋˜ ์ ๋“ค์€ ํ™•์‹คํžˆ ํ•™์Šตํ•˜๊ณ , ๋‹ค์Œ๋ถ€ํ„ด ์ด์™€ ๊ฐ™์€ ์‹ค์ˆ˜๋ฅผ ์ €์ง€๋ฅด์ง€ ์•Š๋„๋ก ํ•˜๋Š” ๊ฒƒ์ด ์ง€๊ธˆ ๋‚˜์—๊ฒŒ ๋” ์ค‘์š”ํ•œ ๊ณผ์ œ๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ ๋‹ค.

 

๋ฐ˜์‘ํ˜•

'โ—ผ FrontEnd > ReactJS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[ReactJS] React JS ์†Œ๊ฐœ ๋ฐ ์„ค์น˜  (0) 2023.01.22
[ReactJS] ๊ฐœ๋ฐœ ๋„์ค‘ ๋งˆ์ฃผํ–ˆ๋˜ ์˜ค๋ฅ˜ ๋ชจ์Œ (2022๋…„ 11-12์›”)  (0) 2023.01.20
[ReactJS] ๋ฐฑ์—์„œ GET method๋ฅผ ํ†ตํ•ด ๋ฐ›์•„์˜จ ๋ฐ์ดํ„ฐ๋ฅผ ๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹นํ•  ๋•Œ ๊ฐ’์ด ์ฝํ˜€์ง€์ง€ ์•Š๋Š” ๋ฌธ์ œ - Uncaught TypeError: Cannot read properties of undefined (reading '0')  (0) 2022.12.09
[ReactJS] setState์˜ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋กœ ์ธํ•œ ๋ฒ„๊ทธ ํ•ด๊ฒฐํ•˜๊ธฐ  (0) 2022.11.04
[ReactJS] React๋กœ ์š”์†Œ์— ํด๋ž˜์Šค ์ถ”๊ฐ€ ๋ฐ ์ œ๊ฑฐํ•˜๊ธฐ (๋ถ€์ œ : React์—์„œ ์ง์ ‘ DOM์„ ์กฐ์ž‘ํ•˜์ง€ ์•Š๋„๋ก ํ•˜์ž)  (0) 2022.11.04
'โ—ผ FrontEnd/ReactJS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • [ReactJS] ๊ฐœ๋ฐœ ๋„์ค‘ ๋งˆ์ฃผํ–ˆ๋˜ ์˜ค๋ฅ˜ ๋ชจ์Œ (2022๋…„ 11-12์›”)
  • [ReactJS] ๋ฐฑ์—์„œ GET method๋ฅผ ํ†ตํ•ด ๋ฐ›์•„์˜จ ๋ฐ์ดํ„ฐ๋ฅผ ๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹นํ•  ๋•Œ ๊ฐ’์ด ์ฝํ˜€์ง€์ง€ ์•Š๋Š” ๋ฌธ์ œ - Uncaught TypeError: Cannot read properties of undefined (reading '0')
  • [ReactJS] setState์˜ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋กœ ์ธํ•œ ๋ฒ„๊ทธ ํ•ด๊ฒฐํ•˜๊ธฐ
  • [ReactJS] React๋กœ ์š”์†Œ์— ํด๋ž˜์Šค ์ถ”๊ฐ€ ๋ฐ ์ œ๊ฑฐํ•˜๊ธฐ (๋ถ€์ œ : React์—์„œ ์ง์ ‘ DOM์„ ์กฐ์ž‘ํ•˜์ง€ ์•Š๋„๋ก ํ•˜์ž)
SangYoonLee (SYL)
SangYoonLee (SYL)
Slow, But Steady Wins The Race ๐Ÿ˜Ž
    ๋ฐ˜์‘ํ˜•
  • SangYoonLee (SYL)
    โ—† Slow, But Steady โ—†
    SangYoonLee (SYL)
  • ์ „์ฒด
    ์˜ค๋Š˜
    ์–ด์ œ
    • โ—ป ์ „์ฒด ๊ธ€ ์ˆ˜ : (132)
      • โœช ์ทจ๋ฏธ, ๊ฒฝํ—˜ ํšŒ๊ณ  ๋ฐ ์ผ์ƒ (26)
        • [์ทจ๋ฏธ] Room Escape (2)
        • [ํšŒ๊ณ ] IT ๊ด€๋ จ ๊ฒฝํ—˜ ํšŒ๊ณ  (18)
        • [์ผ์ƒ] ์ผ์ƒ ์ƒ๊ฐ (4)
        • [์ผ์ƒ] ๋…ํ›„๊ฐ (1)
      • โ—ผ FrontEnd (30)
        • Web & HTML, CSS (9)
        • JavaScript (4)
        • TypeScript (1)
        • ReactJS (16)
      • โ—ผ CS (3)
        • ์ž๋ฃŒ๊ตฌ์กฐ & ์•Œ๊ณ ๋ฆฌ์ฆ˜ (1)
        • ์ปดํ“จํ„ฐ ๊ตฌ์กฐ (1)
        • ์šด์˜์ฒด์ œ (1)
      • โ—ผ PS Note (40)
        • ๋ฐฑ์ค€ (38)
        • ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค (2)
      • โ—ผ IT Etc. (33)
        • (Until 2021) (21)
        • Python (6)
        • C | C# | C++ (1)
        • Git (1)
        • Unity (4)
        • Game Dev. (0)
  • ๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

    • ํ™ˆ
    • ๐Ÿ’ป GitHub
    • ๐ŸŸข Velog
    • ๐Ÿงฉ ์˜จ๋ผ์ธ ๋ฐฉํƒˆ์ถœ ์ถœ์‹œ ์ž‘ํ’ˆ ๋ชจ์Œ
  • ๋งํฌ

    • GitHub
  • ๊ณต์ง€์‚ฌํ•ญ

  • ์ธ๊ธฐ ๊ธ€

  • ํƒœ๊ทธ

    pygame
    1929
    ์†Œ์ˆ˜ ๊ตฌํ•˜๊ธฐ
    ๊ฐœ์ธ ํ”„๋กœ์ ํŠธ
    ์œ ๋‹ˆํ‹ฐ
    ๋ฆฌ์—‘ํŠธ
    wecode
    ์ฝ”๋“œ์ˆจ
    JavaScript
    Python
    ๋ฐฑ์ค€
    Component
    ์•Œ๊ณ ๋ฆฌ์ฆ˜
    ํ›„๊ธฐ
    unity
    ํŒŒ์ด์ฌ
    React
    ๊ด€์‹ฌ์‚ฌ์˜ ๋ถ„๋ฆฌ
    ๋ฐฉํƒˆ์ถœ๊ณ ์‚ฌ
    ํšŒ๊ณ 
    ๋”๋ผ๋น„๋ฆฐ์Šค
    ์ฃผ๊ฐ„ ํšŒ๊ณ 
    Cpp
    ์ฝ”๋”ฉ ์ผ๊ธฐ
    ํ”„๋กœ์ ํŠธ
    ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค
    ์œ„์ฝ”๋“œ
    CodeSoom
    ๋ฏธ๊ถ ๊ฒŒ์ž„
    C++
  • ์ตœ๊ทผ ๋Œ“๊ธ€

  • ์ตœ๊ทผ ๊ธ€

  • hELLOยท Designed By์ •์ƒ์šฐ.v4.10.3
SangYoonLee (SYL)
[ReactJS] React์—์„œ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋ฅผ ์—ฐ๊ฒฐํ•˜๊ณ , event ๊ฐ์ฒด๋ฅผ ํ™œ์šฉํ•  ๋•Œ ์ฃผ์˜ํ•ด์•ผ ํ•  ์ 
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”