GiantStepDEV
article thumbnail

Ref

  • ์ฐธ์กฐ(reference)์˜ ์ค„์ž„๋ง๋กœ, React์—์„œ DOM ์š”์†Œ๋‚˜ ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ ์ธ์Šคํ„ด์Šค์— ๋Œ€ํ•œ ์ง์ ‘์ ์ธ ์ฐธ์กฐ๋ฅผ ์ƒ์„ฑํ•˜๊ณ , ์ €์žฅํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” ๊ฐ์ฒด ์ž…๋‹ˆ๋‹ค.

์‚ฌ์šฉ ๋ชฉ์ 

  • DOM ์š”์†Œ์— ๋Œ€ํ•œ ์ฐธ์กฐ
    ๐Ÿ‘‰ Ref๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ DOM ์š”์†Œ๋ฅผ ์ง์ ‘ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ํฌ์ปค์Šค ์„ค์ •, ํ…์ŠคํŠธ ์„ ํƒ, ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋“ฑ์„ ๊ตฌํ˜„ํ•  ๋•Œ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ์—์„œ id๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์•ˆ๋˜๋Š” ์ด์œ !!!
 ๐Ÿ‘‰ ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ ์•ˆ์—์„œ๋„ id๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜๋Š” ์žˆ์Šต๋‹ˆ๋‹ค. JSX ์•ˆ์—์„œ DOM์— id๋ฅผ ๋‹ฌ๋ฉด ํ•ด๋‹น DOM์„ ๋ Œ๋”๋ง ํ•  ๋•Œ ๊ทธ๋Œ€๋กœ ์ „๋‹ฌ ๋ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ํŠน์ˆ˜ํ•œ ๊ฒฝ์šฐ๊ฐ€ ์•„๋‹ˆ๋ฉด ์‚ฌ์šฉ์„ ๊ถŒ์žฅํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ•˜๋‚˜์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์—ฌ๋Ÿฌ ๋ฒˆ ํ˜ธ์ถœํ•˜๋Š” ๊ฒฝ์šฐ ์œ ์ผํ•ด์•ผ ํ•  id๊ฐ€ ์ค‘๋ณต id๋กœ ๋งŒ๋“ค์–ด์ง€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

useRef

  • React Hook ์ค‘ ํ•˜๋‚˜๋กœ, ๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•œ ๊ฐ์ฒด๋ฅผ ์ฐธ์กฐํ•˜๊ณ  ์œ ์ง€ํ•  ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
  • ์ด ๊ฐ์ฒด๋Š” .current ์†์„ฑ์„ ๊ฐ€์ง€๋ฉฐ, ์ด ์†์„ฑ์€ ์ดˆ๊ธฐ๊ฐ’์œผ๋กœ ์„ค์ •๋˜๊ณ  ๋ณ€๊ฒฝ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์ปดํฌ๋„ŒํŠธ์˜ ๋ Œ๋”๋ง ์‚ฌ์ด์—์„œ ๊ฐ’์„ ์œ ์ง€ํ•˜๊ณ ์ž ํ•  ๋•Œ ์‚ฌ์šฉ๋˜๋ฉฐ, ์ฃผ๋กœ ํŠน์ • ์š”์†Œ์— ํฌ์ปค์Šค๋ฅผ ์„ค์ •ํ•˜๊ฑฐ๋‚˜ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ ์šฉํ•  ๋•Œ ์œ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํฌ์ปค์Šค ์„ค์ •

import React, { useRef } from 'react';

function App() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus the input</button>
    </div>
  );
}
profile

GiantStepDEV

@kongmi

ํฌ์ŠคํŒ…์ด ์ข‹์•˜๋‹ค๋ฉด "์ข‹์•„์š”โค๏ธ" ๋˜๋Š” "๊ตฌ๋…๐Ÿ‘๐Ÿป" ํ•ด์ฃผ์„ธ์š”!