{"id":669,"date":"2025-02-13T15:42:00","date_gmt":"2025-02-13T06:42:00","guid":{"rendered":"https:\/\/blog.anchors-biz.com\/?p=669"},"modified":"2025-02-25T19:46:50","modified_gmt":"2025-02-25T10:46:50","slug":"react-hook-useref-%ec%9d%b4%ed%95%b4%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/blog.anchors-biz.com\/?p=669","title":{"rendered":"React Hook – UseRef \uc774\ud574\ud558\uae30"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

React\uc758 useRef\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0c1\ud0dc \uad00\ub9ac\uc640 DOM \uc811\uadfc\uc744 \uac04\ub2e8\ud558\uace0 \ud6a8\uc728\uc801\uc73c\ub85c \ucc98\ub9ac\ud560 \uc218 \uc788\ub294 \uac15\ub825\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4. \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 useRef\uc758 \uae30\ubcf8 \uac1c\ub150, \uc0ac\uc6a9 \ubc29\ubc95, \uadf8\ub9ac\uace0 \ud65c\uc6a9 \uc0ac\ub840\ub97c \uc911\uc2ec\uc73c\ub85c \uc124\uba85\ud569\ub2c8\ub2e4. \ud2b9\ud788, \ub80c\ub354\ub9c1 \ucd5c\uc801\ud654\uc640 \uc0c1\ud0dc \uad00\ub9ac\uc758 \ucc28\uc774\uc810\uc744 \uc774\ud574\ud558\uace0, \uc2e4\ubb34\uc5d0\uc11c useRef\ub97c \uc5b4\ub5bb\uac8c \ud65c\uc6a9\ud560 \uc218 \uc788\ub294\uc9c0 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\n\n\n\n

1. useRef<\/code>\ub780 \ubb34\uc5c7\uc778\uac00?<\/h2>\n\n\n\n

useRef<\/strong>\ub294 React\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 Hook \uc911 \ud558\ub098\ub85c, **\ucc38\uc870(ref)**\ub97c \uc0dd\uc131\ud558\uace0 \uad00\ub9ac\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \uc8fc\ub85c DOM \uc694\uc18c\uc5d0 \uc9c1\uc811 \uc811\uadfc\ud558\uac70\ub098, \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0c1\ud0dc\uc640\ub294 \ub3c5\ub9bd\uc801\uc73c\ub85c \uac12\uc744 \uc800\uc7a5\ud558\uace0 \uc720\uc9c0\ud560 \ub54c \ud65c\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n

useRef<\/code>\ub294 React\uc758 \uc0c1\ud0dc \uad00\ub9ac\uc640\ub294 \ub2e4\ub974\uac8c, \uac12\uc774 \ubcc0\uacbd\ub418\uc5b4\ub3c4 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub2e4\uc2dc \ub80c\ub354\ub9c1\ud558\uc9c0 \uc54a\ub294 \ud2b9\uc9d5\uc774 \uc788\uc2b5\ub2c8\ub2e4. \ub530\ub77c\uc11c \ub80c\ub354\ub9c1\uacfc \uad00\uacc4\uc5c6\uc774 \uac12\uc744 \uc720\uc9c0\ud558\uac70\ub098 DOM \uc694\uc18c\ub97c \uc870\uc791\ud574\uc57c \ud560 \ub54c \uc720\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

\uc8fc\uc694 \ud2b9\uc9d5<\/h4>\n\n\n\n
  • \ub80c\ub354\ub9c1\uc744 \ubc1c\uc0dd\uc2dc\ud0a4\uc9c0 \uc54a\uc74c<\/strong>: useRef<\/code>\ub85c \uad00\ub9ac\ud558\ub294 \uac12\uc740 \ubcc0\uacbd\ub418\uc5b4\ub3c4 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub2e4\uc2dc \ub80c\ub354\ub9c1\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/li>
  • \ucef4\ud3ec\ub10c\ud2b8 \uc0dd\uc560\uc8fc\uae30 \ub3d9\uc548 \uac12 \uc720\uc9c0<\/strong>: useRef<\/code>\ub85c \uc800\uc7a5\ub41c \uac12\uc740 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc5b8\ub9c8\uc6b4\ud2b8\ub420 \ub54c\uae4c\uc9c0 \uc720\uc9c0\ub429\ub2c8\ub2e4.<\/li>
  • DOM \uc694\uc18c \uc811\uadfc<\/strong>: \ud2b9\uc815 DOM \uc694\uc18c\uc5d0 \uc9c1\uc811 \uc811\uadfc\ud558\uc5ec \uc870\uc791\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n
    <\/div>\n\n\n\n
    \n\n\n\n

    2. useRef<\/code>\uc758 \uae30\ubcf8 \uc0ac\uc6a9\ubc95<\/h2>\n\n\n\n

    useRef<\/code>\ub294 React\uc5d0\uc11c \uc0c1\ud0dc \uad00\ub9ac\uc640 DOM \uc811\uadfc\uc744 \uac04\ub2e8\ud788 \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc778 \uc0ac\uc6a9\ubc95\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n\n\n\n

    \uc0c1\ud0dc \uad00\ub9ac\uc5d0 useRef<\/code> \uc0ac\uc6a9\ud558\uae30<\/strong><\/h4>\n\n\n\n
    import React, { useRef } from \"react\";\n\nfunction Counter() {\n  const countRef = useRef(0); \/\/ \ucd08\uae30\uac12 \uc124\uc815\n\n  const increment = () => {\n    countRef.current += 1; \/\/ current\ub97c \ud1b5\ud574 \uac12\uc5d0 \uc811\uadfc\n    console.log(\"Current count:\", countRef.current);\n  };\n\n  return (\n    <div>\n      <button onClick={increment}>Increment<\/button>\n      <p>Check the console for the count value!<\/p>\n    <\/div>\n  );\n}\n\nexport default Counter;<\/code><\/pre>\n\n\n\n
    DOM \uc811\uadfc\uc5d0 useRef<\/code> \uc0ac\uc6a9\ud558\uae30<\/strong><\/h4>\n\n\n\n
    import React, { useRef } from \"react\";\n\nfunction InputFocus() {\n  const inputRef = useRef(null);\n\n  const focusInput = () => {\n    inputRef.current.focus(); \/\/ input \uc694\uc18c\uc5d0 \ud3ec\ucee4\uc2a4\n  };\n\n  return (\n    <div>\n      <input ref={inputRef} type=\"text\" placeholder=\"Type something...\" \/>\n      <button onClick={focusInput}>Focus Input<\/button>\n    <\/div>\n  );\n}\n\nexport default InputFocus;<\/code><\/pre>\n\n\n\n
    <\/div>\n\n\n\n
    \n\n\n\n
    3. useRef<\/code>\uc640 useState<\/code>\uc758 \ucc28\uc774\uc810<\/h2>\n\n\n\n
    useRef<\/code>\uc640 useState<\/code>\ub294 \ubaa8\ub450 \uac12\uc744 \uc800\uc7a5\ud560 \uc218 \uc788\uc9c0\ub9cc, \ub2e4\uc74c\uacfc \uac19\uc740 \ucc28\uc774\uc810\uc774 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n\n\n\n
    \n
    \n
    \ud2b9\uc9d5<\/strong><\/td>useRef<\/strong><\/td>useState<\/strong><\/td><\/tr>
    \ub80c\ub354\ub9c1 \ubc1c\uc0dd \uc5ec\ubd80<\/td>\uac12\uc774 \ubcc0\uacbd\ub418\uc5b4\ub3c4 \ub80c\ub354\ub9c1\uc744 \ubc1c\uc0dd\uc2dc\ud0a4\uc9c0 \uc54a\uc74c<\/td>\uac12\uc774 \ubcc0\uacbd\ub418\uba74 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub2e4\uc2dc \ub80c\ub354\ub9c1<\/td><\/tr>
    \uc8fc\uc694 \uc0ac\uc6a9 \ubaa9\uc801<\/td>DOM \uc811\uadfc, \ub80c\ub354\ub9c1\uacfc \ubb34\uad00\ud55c \uac12 \uc800\uc7a5<\/td>UI \uc5c5\ub370\uc774\ud2b8\ub97c \uc704\ud55c \uc0c1\ud0dc \uad00\ub9ac<\/td><\/tr>
    \uac12 \uc720\uc9c0 \uae30\uac04<\/td>\ucef4\ud3ec\ub10c\ud2b8 \uc0dd\uc560\uc8fc\uae30 \ub3d9\uc548 \uc720\uc9c0<\/td>\uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 \uc0c8\ub85c\uc6b4 \uac12\uc73c\ub85c \uc5c5\ub370\uc774\ud2b8<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n<\/div>\n\n\n\n
    <\/div>\n\n\n\n
    \n\n\n\n
    4. useRef\ub97c \uc0ac\uc6a9\ud558\ub294 \uc8fc\uc694 \uc0ac\ub840<\/h2>\n\n\n\n
    4.1. DOM \uc694\uc18c \uc811\uadfc \ubc0f \uc870\uc791<\/strong><\/h4>\n\n\n\n
    useRef<\/code>\ub294 DOM \uc694\uc18c\uc5d0 \uc9c1\uc811 \uc811\uadfc\ud574\uc57c \ud560 \ub54c \uc720\uc6a9\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ud2b9\uc815 \uc785\ub825 \ud544\ub4dc\uc5d0 \ud3ec\ucee4\uc2a4\ub97c \uc8fc\uac70\ub098 \uc2a4\ud06c\ub864 \uc704\uce58\ub97c \uc81c\uc5b4\ud560 \ub54c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
    function ScrollToTop() {\n  const divRef = useRef(null);\n\n  const scrollToTop = () => {\n    divRef.current.scrollTop = 0; \/\/ \uc2a4\ud06c\ub864 \uc704\uce58\ub97c \ub9e8 \uc704\ub85c \uc774\ub3d9\n  };\n\n  return (\n    <div>\n      <div ref={divRef} style={{ height: \"200px\", overflow: \"auto\" }}>\n        <p>\uae34 \ub0b4\uc6a9...<\/p>\n      <\/div>\n      <button onClick={scrollToTop}>Scroll to Top<\/button>\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    4.2. \ub80c\ub354\ub9c1 \ud69f\uc218 \ucd94\uc801<\/strong><\/h4>\n\n\n\n
    \ucef4\ud3ec\ub10c\ud2b8\uac00 \uba87 \ubc88 \ub80c\ub354\ub9c1\ub418\uc5c8\ub294\uc9c0 \ucd94\uc801\ud560 \ub54c useRef<\/code>\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
    function RenderCounter() {\n  const renderCount = useRef(1);\n\n  useEffect(() => {\n    renderCount.current += 1;\n    console.log(\"Render Count:\", renderCount.current);\n  });\n\n  return <p>Check the console for render count!<\/p>;\n}<\/code><\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    4.3. \uc774\uc804 \uac12 \uc800\uc7a5<\/strong><\/h4>\n\n\n\n
    useRef<\/code>\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc774\uc804 \uc0c1\ud0dc \uac12\uc744 \uc800\uc7a5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
    function PreviousValue() {\n  const [count, setCount] = useState(0);\n  const prevCount = useRef(0);\n\n  useEffect(() => {\n    prevCount.current = count; \/\/ \ud604\uc7ac \uac12\uc744 \uc774\uc804 \uac12\uc73c\ub85c \uc800\uc7a5\n  }, [count]);\n\n  return (\n    <div>\n      <p>Current Count: {count}<\/p>\n      <p>Previous Count: {prevCount.current}<\/p>\n      <button onClick={() => setCount(count + 1)}>Increment<\/button>\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    4.4. \uc131\ub2a5 \ucd5c\uc801\ud654<\/strong><\/h4>\n\n\n\n
    useRef<\/code>\ub294 \ub80c\ub354\ub9c1\uacfc \ubb34\uad00\ud55c \uac12\uc744 \uc800\uc7a5\ud560 \ub54c \uc720\uc6a9\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc560\ub2c8\uba54\uc774\uc158 \ud504\ub808\uc784 ID\ub098 \ud0c0\uc774\uba38 ID\ub97c \uc800\uc7a5\ud558\uc5ec \ubd88\ud544\uc694\ud55c \ub80c\ub354\ub9c1\uc744 \ubc29\uc9c0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
    function Timer() {\n  const timerId = useRef(null);\n\n  const startTimer = () => {\n    timerId.current = setInterval(() => {\n      console.log(\"Timer running...\");\n    }, 1000);\n  };\n\n  const stopTimer = () => {\n    clearInterval(timerId.current);\n  };\n\n  return (\n    <div>\n      <button onClick={startTimer}>Start Timer<\/button>\n      <button onClick={stopTimer}>Stop Timer<\/button>\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    4.5. \uc678\ubd80 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc640\uc758 \ud1b5\ud569<\/strong><\/h4>\n\n\n\n
    useRef<\/code>\ub294 \uc678\ubd80 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc640 React\ub97c \ud1b5\ud569\ud560 \ub54c\ub3c4 \uc790\uc8fc \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ucc28\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub098 \uce94\ubc84\uc2a4 API\uc640 \uac19\uc740 DOM \uae30\ubc18 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud560 \ub54c useRef<\/code>\ub97c \ud1b5\ud574 DOM \uc694\uc18c\ub97c \ucc38\uc870\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
    import { useEffect, useRef } from \"react\";\n\nfunction CanvasExample() {\n  const canvasRef = useRef(null);\n\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    const ctx = canvas.getContext(\"2d\");\n    ctx.fillStyle = \"blue\";\n    ctx.fillRect(0, 0, 100, 100);\n  }, []);\n\n  return <canvas ref={canvasRef} width={200} height={200}><\/canvas>;\n}<\/code><\/pre>\n\n\n\n
    \n
    \n
    <\/div>\n<\/div>\n<\/div>\n\n\n\n
    \n\n\n\n
    5. useRef<\/code>\uc758 \uc7a5\uc810\uacfc \uc8fc\uc758\uc810<\/h2>\n\n\n\n
    \uc7a5\uc810<\/strong><\/h4>\n\n\n\n
    1. DOM \uc694\uc18c\uc5d0 \uc9c1\uc811 \uc811\uadfc \uac00\ub2a5<\/strong>
      useRef<\/code>\ub97c \uc0ac\uc6a9\ud558\uba74 React\uc758 \uc120\uc5b8\uc801 \ubc29\uc2dd\uacfc \ud568\uaed8 \ud2b9\uc815 DOM \uc694\uc18c\uc5d0 \uc9c1\uc811 \uc811\uadfc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ud3ec\ucee4\uc2a4 \uc124\uc815, \uc2a4\ud06c\ub864 \uc704\uce58 \uc870\uc815, \ub610\ub294 Canvas\uc640 \uac19\uc740 DOM \uc694\uc18c\ub97c \uc870\uc791\ud560 \ub54c \uc720\uc6a9\ud569\ub2c8\ub2e4.<\/li>
    2. \ub80c\ub354\ub9c1 \uc5c6\uc774 \uac12 \uc720\uc9c0<\/strong>
      useRef<\/code>\ub294 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub2e4\uc2dc \ub80c\ub354\ub9c1\ub418\ub354\ub77c\ub3c4 \uac12\uc774 \ucd08\uae30\ud654\ub418\uc9c0 \uc54a\uace0 \uc720\uc9c0\ub429\ub2c8\ub2e4. \uc0c1\ud0dc(useState<\/code>)\uc640\ub294 \ub2e4\ub974\uac8c \uac12\uc774 \ubcc0\uacbd\ub418\uc5b4\ub3c4 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub2e4\uc2dc \ub80c\ub354\ub9c1\ud558\uc9c0 \uc54a\uc73c\ubbc0\ub85c, \ubd88\ud544\uc694\ud55c \ub80c\ub354\ub9c1\uc744 \ubc29\uc9c0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>
    3. \ud0c0\uc774\uba38, \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec \ub4f1 \uc678\ubd80 \uac12 \uad00\ub9ac<\/strong>
      useRef<\/code>\ub294 \ud0c0\uc774\uba38 ID, \uc774\uc804 \uc0c1\ud0dc \uac12, \ub610\ub294 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\uc640 \uac19\uc740 \uac12\uc744 \uc800\uc7a5\ud558\uace0 \uad00\ub9ac\ud558\ub294 \ub370 \uc801\ud569\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc0c1\ud0dc\uc640\ub294 \ub3c5\ub9bd\uc801\uc73c\ub85c \uc678\ubd80 \uac12\uc744 \uc548\uc804\ud558\uac8c \uad00\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>
    4. \ucd08\uae30\ud654 \ube44\uc6a9 \uc808\uac10<\/strong>
      useRef<\/code>\ub294 \ucd08\uae30\ud654 \uc2dc\uc810\uc5d0\ub9cc \uac12\uc744 \uc124\uc815\ud558\uba70, \uc774\ud6c4\uc5d0\ub294 \uac12\uc774 \uc720\uc9c0\ub418\ubbc0\ub85c \ucd08\uae30\ud654 \ube44\uc6a9\uc774 \ub192\uc740 \uc791\uc5c5\uc744 \ubc18\ubcf5\uc801\uc73c\ub85c \uc218\ud589\ud558\uc9c0 \uc54a\uc544\ub3c4 \ub429\ub2c8\ub2e4.<\/li>
    5. React\uc758 \uc0c1\ud0dc \uad00\ub9ac\uc640 \ubd84\ub9ac<\/strong>
      useRef<\/code>\ub294 React\uc758 \uc0c1\ud0dc \uad00\ub9ac\uc640 \ubcc4\uac1c\ub85c \ub3d9\uc791\ud558\ubbc0\ub85c, \uc0c1\ud0dc\ub97c \ubcc0\uacbd\ud558\uc9c0 \uc54a\uace0\ub3c4 \uac12\uc744 \uc800\uc7a5\ud558\uac70\ub098 \ucc38\uc870\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \uc0c1\ud0dc \ubcc0\uacbd\uc73c\ub85c \uc778\ud574 \ubc1c\uc0dd\ud558\ub294 \ubd88\ud544\uc694\ud55c \ub80c\ub354\ub9c1\uc744 \ubc29\uc9c0\ud558\ub294 \ub370 \uc720\uc6a9\ud569\ub2c8\ub2e4.<\/li><\/ol>\n\n\n\n
      \n\n\n\n
      \uc8fc\uc758\uc810<\/strong><\/h4>\n\n\n\n
      1. \uac12 \ubcc0\uacbd \uc2dc \ub80c\ub354\ub9c1\ub418\uc9c0 \uc54a\uc74c<\/strong>
        useRef<\/code>\uc758 \uac12\uc774 \ubcc0\uacbd\ub418\uc5b4\ub3c4 \ucef4\ud3ec\ub10c\ud2b8\ub294 \ub2e4\uc2dc \ub80c\ub354\ub9c1\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \ub530\ub77c\uc11c, \uac12 \ubcc0\uacbd\uc5d0 \ub530\ub77c UI\ub97c \uc5c5\ub370\uc774\ud2b8\ud574\uc57c \ud558\ub294 \uacbd\uc6b0\uc5d0\ub294 useState<\/code>\ub97c \uc0ac\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4<\/li>
      2. DOM \uc870\uc791\uc740 \ucd5c\uc18c\ud654\ud574\uc57c \ud568<\/strong>
        React\ub294 \uc120\uc5b8\uc801 UI\ub97c \uc9c0\ud5a5\ud558\ubbc0\ub85c, useRef<\/code>\ub97c \uc0ac\uc6a9\ud55c DOM \uc870\uc791\uc740 \uaf2d \ud544\uc694\ud55c \uacbd\uc6b0\uc5d0\ub9cc<\/strong><\/span> \uc0ac\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4. \uacfc\ub3c4\ud55c DOM \uc870\uc791\uc740 React\uc758 \uc0c1\ud0dc \uad00\ub9ac\uc640 \ucda9\ub3cc\ud558\uac70\ub098, \ucf54\ub4dc\uc758 \uc720\uc9c0\ubcf4\uc218\uc131\uc744 \ub5a8\uc5b4\ub728\ub9b4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>
      3. \ucd08\uae30\uac12 \uc124\uc815 \uc8fc\uc758<\/strong>
        useRef<\/code>\ub294 \ucd08\uae30\uac12\uc744 \uc124\uc815\ud558\uc9c0 \uc54a\uc73c\uba74 undefined<\/code>\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4. \ub530\ub77c\uc11c, \ucd08\uae30\uac12\uc774 \ud544\uc694\ud55c \uacbd\uc6b0 \uba85\uc2dc\uc801\uc73c\ub85c \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4.<\/li>
      4. \ud074\ub9b0\uc5c5 \ucc98\ub9ac \ud544\uc694<\/strong>
        useRef<\/code>\ub97c \uc0ac\uc6a9\ud574 \ud0c0\uc774\uba38\ub098 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\ub97c \uad00\ub9ac\ud560 \uacbd\uc6b0, \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc5b8\ub9c8\uc6b4\ud2b8\ub420 \ub54c \uc774\ub97c \uc815\ub9ac\ud558\uc9c0 \uc54a\uc73c\uba74 \uba54\ubaa8\ub9ac \ub204\uc218\ub098 \uc608\uae30\uce58 \uc54a\uc740 \ub3d9\uc791\uc774 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>
      5. React\uc758 \uc0c1\ud0dc \uad00\ub9ac\uc640 \ud63c\ub3d9 \uc8fc\uc758<\/strong>
        useRef<\/code>\ub294 \uc0c1\ud0dc \uad00\ub9ac\uac00 \uc544\ub2cc \ucc38\uc870\ub97c \uc704\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4. \uc0c1\ud0dc \ubcc0\uacbd\uacfc \uad00\ub828\ub41c \uc791\uc5c5\uc5d0\ub294 \ubc18\ub4dc\uc2dc useState<\/code>\ub97c \uc0ac\uc6a9\ud574\uc57c \ud558\uba70, useRef<\/code>\ub97c \uc798\ubabb \uc0ac\uc6a9\ud558\uba74 React\uc758 \uc0c1\ud0dc \uad00\ub9ac \ud750\ub984\uc744 \ubc29\ud574\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><\/ol>\n\n\n\n
        <\/div>\n\n\n\n
        \n\n\n\n
        6. \uacb0\ub860<\/h2>\n\n\n\n
        useRef<\/code>\ub294 React\uc5d0\uc11c \uc0c1\ud0dc \uad00\ub9ac\uc640 DOM \uc811\uadfc\uc744 \ud6a8\uc728\uc801\uc73c\ub85c \ucc98\ub9ac\ud560 \uc218 \uc788\ub294 \uac15\ub825\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4. \ub80c\ub354\ub9c1\uacfc \ubb34\uad00\ud55c \uac12\uc744 \uc800\uc7a5\ud558\uac70\ub098 DOM \uc694\uc18c\ub97c \uc870\uc791\ud574\uc57c \ud560 \ub54c \uc720\uc6a9\ud558\uba70, \uc131\ub2a5 \ucd5c\uc801\ud654\uc5d0\ub3c4 \ud070 \ub3c4\uc6c0\uc744 \uc90d\ub2c8\ub2e4. \uc2e4\ubb34\uc5d0\uc11c\ub294 DOM \uc811\uadfc, \ub80c\ub354\ub9c1 \ud69f\uc218 \ucd94\uc801, \uc774\uc804 \uac12 \uc800\uc7a5, \uc678\ubd80 \ub77c\uc774\ube0c\ub7ec\ub9ac \ud1b5\ud569 \ub4f1 \ub2e4\uc591\ud55c \uc0c1\ud669\uc5d0\uc11c \ud65c\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. useRef<\/code>\ub97c \uc801\uc808\ud788 \ud65c\uc6a9\ud558\uba74 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc131\ub2a5\uacfc \uc720\uc9c0\ubcf4\uc218\uc131\uc744 \ud06c\uac8c \ud5a5\uc0c1\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
        <\/div>\n\n\n\n
        <\/p>\n\n\n\n
        \"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
        React\uc758 useRef\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0c1\ud0dc \uad00\ub9ac\uc640 DOM \uc811\uadfc\uc744 \uac04\ub2e8\ud558\uace0 \ud6a8\uc728\uc801\uc73c\ub85c \ucc98\ub9ac\ud560 \uc218 \uc788\ub294 \uac15\ub825\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4. \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 useRef\uc758 \uae30\ubcf8 \uac1c\ub150, \uc0ac\uc6a9 \ubc29\ubc95, \uadf8\ub9ac\uace0 \ud65c\uc6a9 \uc0ac\ub840\ub97c \uc911\uc2ec\uc73c\ub85c \uc124\uba85\ud569\ub2c8\ub2e4. \ud2b9\ud788, \ub80c\ub354\ub9c1 \ucd5c\uc801\ud654\uc640 \uc0c1\ud0dc \uad00\ub9ac\uc758 \ucc28\uc774\uc810\uc744 \uc774\ud574\ud558\uace0, \uc2e4\ubb34\uc5d0\uc11c useRef\ub97c \uc5b4\ub5bb\uac8c \ud65c\uc6a9\ud560 \uc218 \uc788\ub294\uc9c0 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. 1. useRef\ub780 \ubb34\uc5c7\uc778\uac00? useRef\ub294 React\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 Hook \uc911 \ud558\ub098\ub85c, **\ucc38\uc870(ref)**\ub97c \uc0dd\uc131\ud558\uace0 \uad00\ub9ac\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \uc8fc\ub85c […]<\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_mi_skip_tracking":false},"categories":[3],"tags":[60,59,64,55],"_links":{"self":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/669"}],"collection":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=669"}],"version-history":[{"count":3,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/669\/revisions"}],"predecessor-version":[{"id":702,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=\/wp\/v2\/posts\/669\/revisions\/702"}],"wp:attachment":[{"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=669"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=669"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.anchors-biz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=669"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}