React ref μ½λ°± μ΅μ νμ λ―Έλ¬ν μ°¨μ΄λ₯Ό νμν©λλ€. μ λ λ² μ€νλλμ§, useCallbackμΌλ‘ λ°©μ§νλ λ°©λ², 볡μ‘ν μ±μ μ±λ₯μ λ§μ€ν°νλ λ°©λ²μ λ°°μ°μΈμ.
React Ref μ½λ°± λ§μ€ν°νκΈ°: μ±λ₯ μ΅μ νλ₯Ό μν κΆκ·Ήμ μΈ κ°μ΄λ
νλ μΉ κ°λ° μΈκ³μμ μ±λ₯μ λ¨μν κΈ°λ₯μ΄ μλλΌ νμ μμμ λλ€. Reactλ₯Ό μ¬μ©νλ κ°λ°μμκ² λΉ λ₯΄κ³ λ°μμ±μ΄ λ°μ΄λ μ¬μ©μ μΈν°νμ΄μ€λ₯Ό ꡬμΆνλ κ²μ μ£Όμ λͺ©νμ λλ€. Reactμ κ°μ DOMκ³Ό μ¬μ‘°μ μκ³ λ¦¬μ¦μ΄ λ§μ μ΄λ €μ΄ μμ μ μ²λ¦¬νμ§λ§, μ΅μμ μ±λ₯μ λ°ννλ €λ©΄ κΉμ μ΄ν΄κ° μ€μν νΉμ ν¨ν΄κ³Ό APIκ° μμ΅λλ€. κ·Έλ¬ν μμ μ€ νλλ refs κ΄λ¦¬, νΉν μ’ μ’ μ€ν΄λλ μ½λ°± refsμ λμμ λλ€.
Refsλ λ λ λ©μλμμ μμ±λ DOM λ
Έλ λλ React μμμ μ‘μΈμ€νλ λ°©λ²μ μ 곡ν©λλ€. μ΄λ ν¬μ»€μ€ κ΄λ¦¬, μ λλ©μ΄μ
νΈλ¦¬κ±° λλ νμ¬ DOM λΌμ΄λΈλ¬λ¦¬μ ν΅ν©κ³Ό κ°μ μμ
μ νμμ μΈ μ΄μ€μΌμ΄ν ν΄μΉμ
λλ€. useRefκ° ν¨μν μ»΄ν¬λνΈμμ κ°λ¨ν κ²½μ°μ νμ€μ΄ λμμ§λ§, μ½λ°± refsλ μ°Έμ‘°κ° μ€μ λκ³ ν΄μ λλ μμ μ λν λ κ°λ ₯νκ³ μΈλ°ν μ μ΄λ₯Ό μ 곡ν©λλ€. κ·Έλ¬λ μ΄ νμλ λ―Έλ¬ν¨μ΄ λ°λ¦
λλ€. μ½λ°± refλ μ»΄ν¬λνΈμ λΌμ΄νμ¬μ΄ν΄ λμ μ¬λ¬ λ² μ€νλ μ μμΌλ©°, μ¬λ°λ₯΄κ² μ²λ¦¬λμ§ μμΌλ©΄ μ±λ₯ λ³λͺ© νμκ³Ό λ²κ·Έλ₯Ό μ λ°ν μ μμ΅λλ€.
μ΄ ν¬κ΄μ μΈ κ°μ΄λλ React ref μ½λ°±μ λͺ νν μ€λͺ ν©λλ€. λ€μμ μ΄ν΄λ΄ λλ€.
- μ½λ°± refsκ° λ¬΄μμ΄λ©° λ€λ₯Έ ref μ νκ³Ό μ΄λ»κ² λ€λ₯Έκ°.
- μ½λ°± refsκ° λ λ² νΈμΆλλ ν΅μ¬ μ΄μ (
nullλ‘ ν λ², μμλ‘ ν λ²). - ref μ½λ°±μ μΈλΌμΈ ν¨μλ₯Ό μ¬μ©νλ κ²½μ°μ μ±λ₯ λ¬Έμ .
useCallbackν μ μ¬μ©νμ¬ μ΅μ ννλ νμ€ν μ루μ .- μ’ μμ±μ μ²λ¦¬νκ³ μΈλΆ λΌμ΄λΈλ¬λ¦¬μ ν΅ν©νκΈ° μν κ³ κΈ ν¨ν΄.
μ΄ κΈ°μ¬λ₯Ό λ§μΉλ©΄ μ½λ°± refsλ₯Ό μμ μκ² μ¬μ©ν μ μλ μ§μμ κ°κ² λμ΄ React μ ν리μΌμ΄μ μ΄ κ°λ ₯ν λΏλ§ μλλΌ λ§€μ° λ°μ΄λ μ±λ₯μ λ°ννλλ‘ λ³΄μ₯ν μ μμ΅λλ€.
κ°λ¨ν 볡μ΅: μ½λ°± Refsλ 무μμΈκ°?
μ΅μ νμ λ€μ΄κ°κΈ° μ μ μ½λ°± refκ° λ¬΄μμΈμ§ κ°λ¨ν λ€μ μ΄ν΄λ³΄κ² μ΅λλ€. useRef() λλ React.createRef()λ‘ μμ±λ ref κ°μ²΄λ₯Ό μ λ¬νλ λμ ref μμ±μ ν¨μλ₯Ό μ λ¬ν©λλ€. μ΄ ν¨μλ μ»΄ν¬λνΈκ° λ§μ΄νΈ λ° μΈλ§μ΄νΈλ λ Reactμ μν΄ μ€νλ©λλ€.
Reactλ μ»΄ν¬λνΈκ° λ§μ΄νΈλ λ DOM μμλ₯Ό μΈμλ‘ μ¬μ©νμ¬ ref μ½λ°±μ νΈμΆνκ³ , μ»΄ν¬λνΈκ° μΈλ§μ΄νΈλ λ nullμ μΈμλ‘ μ¬μ©νμ¬ νΈμΆν©λλ€. μ΄λ κ² νλ©΄ μ°Έμ‘°κ° μ¬μ© κ°λ₯νκ² λκ±°λ νκ΄΄λκΈ° μ§μ μ μ νν μκ°μ μ λ°νκ² μ μ΄ν μ μμ΅λλ€.
λ€μμ ν¨μν μ»΄ν¬λνΈμ κ°λ¨ν μμ λλ€.
import React, { useState } from 'react';
function TextInputWithFocusButton() {
let textInput = null;
const setTextInputRef = element => {
console.log('Ref callback fired with:', element);
textInput = element;
};
const focusTextInput = () => {
// Focus the text input using the raw DOM API
if (textInput) textInput.focus();
};
return (
<div>
<input type="text" ref={setTextInputRef} />
<button onClick={focusTextInput}>
Focus the text input
</button>
</div>
);
}
μ΄ μμμ setTextInputRefλ μ½λ°± refμ
λλ€. <input> μμκ° λ λλ§λ λ ν΄λΉ μμλ‘ νΈμΆλμ΄ focus()λ₯Ό νΈμΆνκΈ° μν΄ μ μ₯νκ³ λμ€μ μ¬μ©ν μ μμ΅λλ€.
ν΅μ¬ λ¬Έμ : Ref μ½λ°±μ΄ λ λ² μ€νλλ μ΄μ λ 무μμ λκΉ?
κ°λ°μλ₯Ό μ’ μ’ νΌλμ€λ½κ² νλ μ£Όμ λμμ μ½λ°±μ μ΄μ€ νΈμΆμ λλ€. μ½λ°± refκ° μλ μ»΄ν¬λνΈκ° λ λλ§λ λ μ½λ°± ν¨μλ μΌλ°μ μΌλ‘ μ°μμ μΌλ‘ λ λ² νΈμΆλ©λλ€.
- 첫 λ²μ§Έ νΈμΆ:
nullμ μΈμλ‘ μ¬μ©ν©λλ€. - λ λ²μ§Έ νΈμΆ: DOM μμ μΈμ€ν΄μ€λ₯Ό μΈμλ‘ μ¬μ©ν©λλ€.
μ΄κ²μ λ²κ·Έκ° μλλΌ React νμ μλμ μΈ μ€κ³ μ νμ
λλ€. nullμ μ¬μ©ν νΈμΆμ μ΄μ ref (μλ κ²½μ°)κ° λΆλ¦¬λκ³ μμμ λνλ
λλ€. μ΄λ κ² νλ©΄ μ€μν μ 리 μμ
μ μνν μ μλ κΈ°νκ° μ 곡λ©λλ€. μλ₯Ό λ€μ΄ μ΄μ λ λλ§μμ λ
Έλμ μ΄λ²€νΈ 리μ€λλ₯Ό μ°κ²°ν κ²½μ° null νΈμΆμ μ λ
Έλκ° μ°κ²°λκΈ° μ μ ν΄λΉ 리μ€λλ₯Ό μ κ±°νλ μλ²½ν μκ°μ
λλ€.
κ·Έλ¬λ λ¬Έμ λ μ΄ λ§μ΄νΈ/μΈλ§μ΄νΈ μ£ΌκΈ°κ° μλλλ€. μ§μ ν μ±λ₯ λ¬Έμ λ μ»΄ν¬λνΈμ μν μ λ°μ΄νΈκ° ref μ체μ μμ ν κ΄λ ¨μ΄ μλ λ°©μμΌλ‘ λ°μνλ κ²½μ°μλ λͺ¨λ λ¨μΌ μ¬λ λλ§μμ μ΄ μ΄μ€ μ€νμ΄ λ°μν λ λ°μν©λλ€.
μΈλΌμΈ ν¨μμ λ¬Έμ μ
λ€μμ μ¬λ λλ§λλ ν¨μν μ»΄ν¬λνΈ λ΄λΆμ κ²λ³΄κΈ°μ 무ν΄ν ꡬνμ κ³ λ €ν΄ λ³΄κ² μ΅λλ€.
import React, { useState } from 'react';
function FrequentUpdatesComponent() {
const [count, setCount] = useState(0);
return (
<div>
<h3>Counter: {count}</h3>
<button onClick={() => setCount(c => c + 1)}>Increment</button>
<div
ref={(node) => {
// This is an inline function!
console.log('Ref callback fired with:', node);
}}
>
I am the referenced element.
</div>
</div>
);
}
μ΄ μ½λλ₯Ό μ€ννκ³ "Increment" λ²νΌμ ν΄λ¦νλ©΄ λͺ¨λ ν΄λ¦μμ μ½μμ λ€μμ΄ νμλ©λλ€.
Ref callback fired with: null
Ref callback fired with: <div>...</div>
μ μ΄λ° μΌμ΄ λ°μν κΉμ? κ° λ λλ§μμ ref propμ λν΄ μλ‘μ΄ ν¨μ μΈμ€ν΄μ€λ₯Ό μμ±νκ³ μκΈ° λλ¬Έμ
λλ€. (node) => { ... }. μ¬μ‘°μ νλ‘μΈμ€ μ€μ Reactλ μ΄μ λ λλ§μ propsμ νμ¬ λ λλ§μ propsλ₯Ό λΉκ΅ν©λλ€. ref propμ΄ λ³κ²½λμμμ νμΈν©λλ€ (μ΄μ ν¨μ μΈμ€ν΄μ€μμ μ ν¨μ μΈμ€ν΄μ€λ‘). Reactμ κ³μ½μ λΆλͺ
ν©λλ€. ref μ½λ°±μ΄ λ³κ²½λλ©΄ λ¨Όμ nullμ μ¬μ©νμ¬ μ΄μ refλ₯Ό μ§μ°κ³ , DOM λ
Έλλ₯Ό μ¬μ©νμ¬ μ refλ₯Ό μ€μ ν΄μΌ ν©λλ€. μ΄λ κ² νλ©΄ λͺ¨λ λ¨μΌ λ λλ§μμ λΆνμνκ² μ 리/μ€μ μ£ΌκΈ°κ° νΈλ¦¬κ±°λ©λλ€.
κ°λ¨ν console.logμ κ²½μ° μ΄λ μ¬μν μ±λ₯ μ νμ
λλ€. νμ§λ§ μ½λ°±μ΄ λ€μκ³Ό κ°μ λΉμ©μ΄ λ§μ΄ λλ μμ
μ μννλ€κ³ μμν΄ λ³΄μΈμ.
- 볡μ‘ν μ΄λ²€νΈ 리μ€λ μ°κ²° λ° λΆλ¦¬ (μ:
scroll,resize). - D3.js μ°¨νΈ λλ λ§€ν λΌμ΄λΈλ¬λ¦¬μ κ°μ λ¬΄κ±°μ΄ νμ¬ λΌμ΄λΈλ¬λ¦¬ μ΄κΈ°ν.
- λ μ΄μμ 리νλ‘μ°λ₯Ό μ λ°νλ DOM μΈ‘μ μν.
λͺ¨λ μν μ λ°μ΄νΈμμ μ΄ λ‘μ§μ μ€ννλ©΄ μ ν리μΌμ΄μ μ μ±λ₯μ΄ μ¬κ°νκ² μ νλκ³ μΆμ νκΈ° μ΄λ €μ΄ λ―Έλ¬ν λ²κ·Έκ° λ°μν μ μμ΅λλ€.
μ루μ : `useCallback`μΌλ‘ λ©λͺ¨μ΄μ μ΄μ
μ΄ λ¬Έμ μ λν ν΄κ²°μ±
μ λ³κ²½νλ €λ κ²½μ°κ° μλλ©΄ Reactκ° μ¬λ λλ§μμ ref μ½λ°±μ λν΄ μ νν λμΌν ν¨μ μΈμ€ν΄μ€λ₯Ό μμ νλλ‘ νλ κ²μ
λλ€. μ΄κ²μ useCallback ν
μ λν μλ²½ν μ¬μ© μ¬λ‘μ
λλ€.
useCallbackμ μ½λ°± ν¨μμ λ©λͺ¨μ΄μ μ΄μ
λ λ²μ μ λ°νν©λλ€. μ΄ λ©λͺ¨μ΄μ μ΄μ
λ λ²μ μ μ’
μμ± λ°°μ΄μ μ’
μμ± μ€ νλκ° λ³κ²½λ κ²½μ°μλ§ λ³κ²½λ©λλ€. λΉ μ’
μμ± λ°°μ΄ ([])μ μ 곡νμ¬ μ»΄ν¬λνΈμ μ 체 μλͺ
λμ μ μ§λλ μμ μ μΈ ν¨μλ₯Ό λ§λ€ μ μμ΅λλ€.
useCallbackμ μ¬μ©νμ¬ μ΄μ μμ λ₯Ό 리ν©ν°λ§ν΄ λ³΄κ² μ΅λλ€.
import React, { useState, useCallback } from 'react';
function OptimizedComponent() {
const [count, setCount] = useState(0);
// Create a stable callback function with useCallback
const myRefCallback = useCallback(node => {
// This logic now runs only when the component mounts and unmounts
console.log('Ref callback fired with:', node);
if (node !== null) {
// You can perform setup logic here
console.log('Element is mounted!');
}
}, []); // <-- Empty dependency array means the function is created only once
return (
<div>
<h3>Counter: {count}</h3>
<button onClick={() => setCount(c => c + 1)}>Increment</button>
<div ref={myRefCallback}>
I am the referenced element.
</div>
</div>
);
}
μ΄μ μ΄ μ΅μ νλ λ²μ μ μ€ννλ©΄ μ½μ λ‘κ·Έκ° μ΄ λ λ²λ§ νμλ©λλ€.
- μ»΄ν¬λνΈκ° μ²μ λ§μ΄νΈλ λ (
Ref callback fired with: <div>...</div>). - μ»΄ν¬λνΈκ° μΈλ§μ΄νΈλ λ (
Ref callback fired with: null).
"Increment" λ²νΌμ ν΄λ¦ν΄λ λ μ΄μ ref μ½λ°±μ΄ νΈλ¦¬κ±°λμ§ μμ΅λλ€. λͺ¨λ μ¬λ λλ§μμ λΆνμν μ 리/μ€μ μ£ΌκΈ°λ₯Ό μ±κ³΅μ μΌλ‘ λ°©μ§νμ΅λλ€. Reactλ νμ λ λλ§μμ ref propμ λν΄ λμΌν ν¨μ μΈμ€ν΄μ€λ₯Ό νμΈνκ³ λ³κ²½μ΄ νμνμ§ μλ€κ³ μ¬λ°λ₯΄κ² νλ¨ν©λλ€.
κ³ κΈ μλλ¦¬μ€ λ° λͺ¨λ² μ¬λ‘
λΉ μ’
μμ± λ°°μ΄μ΄ μΌλ°μ μ΄μ§λ§ ref μ½λ°±μ΄ props λλ μνμ λ³κ²½μ λ°μν΄μΌ νλ μλ리μ€κ° μμ΅λλ€. μ΄κ²μ΄ useCallbackμ μ’
μμ± λ°°μ΄μ νμ΄ μ§μ μΌλ‘ λΉλλ κ³³μ
λλ€.
μ½λ°±μμ μ’ μμ± μ²λ¦¬
μν λλ propμ λ°λΌ ref μ½λ°± λ΄μμ μΌλΆ λ‘μ§μ μ€νν΄μΌ νλ€κ³ κ°μ ν©λλ€. μλ₯Ό λ€μ΄ νμ¬ ν λ§λ₯Ό κΈ°λ°μΌλ‘ `data-` μμ±μ μ€μ ν©λλ€.
function ThemedComponent({ theme }) {
const [internalState, setInternalState] = useState(0);
const themedRefCallback = useCallback(node => {
if (node !== null) {
// This callback now depends on the 'theme' prop
console.log(`Setting theme attribute to: ${theme}`);
node.setAttribute('data-theme', theme);
}
}, [theme]); // <-- Add 'theme' to the dependency array
return (
<div>
<p>Current Theme: {theme}</p>
<div ref={themedRefCallback}>This element's theme will update.</div>
{/* ... imagine a button here to change the parent's theme ... */}
</div>
);
}
μ΄ μμμλ useCallbackμ μ’
μμ± λ°°μ΄μ themeμ μΆκ°νμ΅λλ€. μ΄κ²μ λ€μμ μλ―Έν©λλ€.
- μλ‘μ΄
themedRefCallbackν¨μλthemepropμ΄ λ³κ²½λ κ²½μ°μλ§ μμ±λ©λλ€. themepropμ΄ λ³κ²½λλ©΄ Reactλ μ ν¨μ μΈμ€ν΄μ€λ₯Ό κ°μ§νκ³ ref μ½λ°±μ λ€μ μ€νν©λλ€ (λ¨Όμ nullλ‘, λ€μμΌλ‘ μμλ‘).- μ΄λ κ² νλ©΄ μ
λ°μ΄νΈλ
themeκ°μΌλ‘ `data-theme` μμ±μ μ€μ νλ ν¨κ³Όλ₯Ό λ€μ μ€νν μ μμ΅λλ€.
μ΄κ²μ μ¬λ°λ₯΄κ³ μλλ λμμ λλ€. κ΄λ ¨ μλ μν μ λ°μ΄νΈμμ μ€νλλ κ²μ λ°©μ§νλ©΄μ μ’ μμ±μ΄ λ³κ²½λ λ ref λ‘μ§μ λ€μ νΈλ¦¬κ±°νλλ‘ Reactμ λͺ μμ μΌλ‘ μ§μνκ³ μμ΅λλ€.
νμ¬ λΌμ΄λΈλ¬λ¦¬μ ν΅ν©
μ½λ°± refsμ κ°μ₯ κ°λ ₯ν μ¬μ© μ¬λ‘ μ€ νλλ DOM λ Έλμ μ°κ²°ν΄μΌ νλ νμ¬ λΌμ΄λΈλ¬λ¦¬μ μΈμ€ν΄μ€λ₯Ό μ΄κΈ°ννκ³ νκ΄΄νλ κ²μ λλ€. μ΄ ν¨ν΄μ μ½λ°±μ λ§μ΄νΈ/μΈλ§μ΄νΈ νΉμ±μ μλ²½νκ² νμ©ν©λλ€.
λ€μμ μ°¨νΈ λλ λ§΅ λΌμ΄λΈλ¬λ¦¬μ κ°μ λΌμ΄λΈλ¬λ¦¬λ₯Ό κ΄λ¦¬νκΈ° μν κ°λ ₯ν ν¨ν΄μ λλ€.
import React, { useRef, useCallback, useEffect } from 'react';
import SomeChartingLibrary from 'some-charting-library';
function ChartComponent({ data }) {
// Use a ref to hold the library instance, not the DOM node
const chartInstance = useRef(null);
const chartContainerRef = useCallback(node => {
// The node is null when the component unmounts
if (node === null) {
if (chartInstance.current) {
console.log('Cleaning up chart instance...');
chartInstance.current.destroy(); // Cleanup method from the library
chartInstance.current = null;
}
return;
}
// The node exists, so we can initialize our chart
console.log('Initializing chart instance...');
const chart = new SomeChartingLibrary(node, {
// Configuration options
data: data,
});
chartInstance.current = chart;
}, [data]); // Re-create the chart if the data prop changes
return <div className="chart-container" ref={chartContainerRef} style={{ height: '400px' }} />;
}
μ΄ ν¨ν΄μ λ§€μ° κΉλνκ³ νλ ₯μ μ λλ€.
- μ΄κΈ°ν: `div`κ° λ§μ΄νΈλλ©΄ μ½λ°±μ `node`λ₯Ό μμ ν©λλ€. μ°¨νΈ λΌμ΄λΈλ¬λ¦¬μ μ μΈμ€ν΄μ€λ₯Ό λ§λ€κ³ `chartInstance.current`μ μ μ₯ν©λλ€.
- μ 리: μ»΄ν¬λνΈκ° μΈλ§μ΄νΈλ λ (λλ `data`κ° λ³κ²½λμ΄ μ¬μ€νμ΄ νΈλ¦¬κ±°λλ κ²½μ°) μ½λ°±μ΄ λ¨Όμ `null`λ‘ νΈμΆλ©λλ€. μ½λλ μ°¨νΈ μΈμ€ν΄μ€κ° μ‘΄μ¬νλμ§ νμΈνκ³ , μ‘΄μ¬νλ κ²½μ° ν΄λΉ `destroy()` λ©μλλ₯Ό νΈμΆνμ¬ λ©λͺ¨λ¦¬ λμλ₯Ό λ°©μ§ν©λλ€.
- μ λ°μ΄νΈ: μ’ μμ± λ°°μ΄μ `data`λ₯Ό ν¬ν¨νλ©΄ μ°¨νΈμ λ°μ΄ν°λ₯Ό κ·Όλ³Έμ μΌλ‘ λ³κ²½ν΄μΌ νλ κ²½μ° μ 체 μ°¨νΈκ° κΉλνκ² νκ΄΄λκ³ μ λ°μ΄ν°λ‘ λ€μ μ΄κΈ°νλ©λλ€. κ°λ¨ν λ°μ΄ν° μ λ°μ΄νΈμ κ²½μ° λΌμ΄λΈλ¬λ¦¬μμ `update()` λ©μλλ₯Ό μ 곡ν μ μμΌλ©°, μ΄ λ©μλλ λ³λμ `useEffect`μμ μ²λ¦¬ν μ μμ΅λλ€.
μ±λ₯ λΉκ΅: μΈμ μ΅μ νκ° *μ λ§λ‘* μ€μν κΉμ?
μ€μ©μ μΈ μ¬κ³ λ°©μμΌλ‘ μ±λ₯μ μ κ·Όνλ κ²μ΄ μ€μν©λλ€. λͺ¨λ ref μ½λ°±μ `useCallback`μΌλ‘ λννλ κ²μ΄ μ’μ μ΅κ΄μ΄μ§λ§ μ€μ μ±λ₯ μν₯μ μ½λ°± λ΄λΆμμ μνλλ μμ μ λ°λΌ ν¬κ² λ¬λΌμ§λλ€.
λ―Έλ―Έν μν₯ μλ리μ€
μ½λ°±μ΄ κ°λ¨ν λ³μ ν λΉλ§ μννλ κ²½μ° κ° λ λλ§μμ μ ν¨μλ₯Ό λ§λλ μ€λ²ν€λλ λ―Έλ―Έν©λλ€. μ΅μ JavaScript μμ§μ ν¨μ μμ± λ° κ°λΉμ§ μμ§μ λ§€μ° λΉ λ¦ λλ€.
μ: ref={(node) => (myRef.current = node)}
μ΄λ¬ν κ²½μ° κΈ°μ μ μΌλ‘ λ μ΅μ νλμ΄ μμ§λ§ μ€μ μ ν리μΌμ΄μ μμ μ±λ₯ μ°¨μ΄λ₯Ό μΈ‘μ ν κ°λ₯μ±μ μμ΅λλ€. μ±κΈν μ΅μ νμ ν¨μ μ λΉ μ§μ§ λ§μμμ€.
μ€λν μν₯ μλ리μ€
ref μ½λ°±μ΄ λ€μ μ€ νλλ₯Ό μννλ κ²½μ° νμ useCallbackμ μ¬μ©ν΄μΌ ν©λλ€.
- DOM μ‘°μ: ν΄λμ€λ₯Ό μ§μ μΆκ°νκ±°λ μ κ±°νκ³ , μμ±μ μ€μ νκ±°λ, μμ ν¬κΈ°λ₯Ό μΈ‘μ ν©λλ€ (λ μ΄μμ 리νλ‘μ°λ₯Ό νΈλ¦¬κ±°ν μ μμ).
- μ΄λ²€νΈ 리μ€λ:
addEventListenerλ°removeEventListenerλ₯Ό νΈμΆν©λλ€. λͺ¨λ λ λλ§μμ μ΄λ₯Ό μ€ννλ©΄ λ²κ·Έμ μ±λ₯ λ¬Έμ κ° λ°μν κ°λ₯μ±μ΄ ν½λλ€. - λΌμ΄λΈλ¬λ¦¬ μΈμ€ν΄μ€ν: μ°¨νΈ μμ μμ λ³Ό μ μλ―μ΄ λ³΅μ‘ν κ°μ²΄λ₯Ό μ΄κΈ°ννκ³ ν΄μ²΄νλ κ²μ λΉμ©μ΄ λ§μ΄ λλλ€.
- λ€νΈμν¬ μμ²: DOM μμμ μ‘΄μ¬ μ¬λΆμ λ°λΌ API νΈμΆμ μνν©λλ€.
- λ©λͺ¨μ΄μ μ΄μ
λ μμμ Refs μ λ¬:
React.memoλ‘ λνλ μμ μ»΄ν¬λνΈμ ref μ½λ°±μ propμΌλ‘ μ λ¬νλ κ²½μ° λΆμμ ν μΈλΌμΈ ν¨μλ λ©λͺ¨μ΄μ μ΄μ μ κΉ¨κ³ μμμ΄ λΆνμνκ² λ€μ λ λλ§λλλ‘ ν©λλ€.
μ’μ κ²½ν λ²μΉ: ref μ½λ°±μ κ°λ¨ν ν λΉ νλ μ΄μμ΄ ν¬ν¨λμ΄ μλ κ²½μ° useCallbackμΌλ‘ λ©λͺ¨μ΄μ μ΄μ
νμμμ€.
κ²°λ‘ : μμΈ‘ κ°λ₯νκ³ λ°μ΄λ μ±λ₯μ μ½λ μμ±
Reactμ ref μ½λ°±μ DOM λ Έλ λ° μ»΄ν¬λνΈ μΈμ€ν΄μ€μ λν μΈλ°ν μ μ΄λ₯Ό μ 곡νλ κ°λ ₯ν λꡬμ λλ€. ν΄λΉ λΌμ΄νμ¬μ΄ν΄ (νΉν μ 리 μ€ μλμ μΈ `null` νΈμΆ)μ μ΄ν΄νλ κ²μ΄ ν¨κ³Όμ μΌλ‘ μ¬μ©νλ λ° ν΅μ¬μ λλ€.
ref propμ μΈλΌμΈ ν¨μλ₯Ό μ¬μ©νλ μΌλ°μ μΈ μν° ν¨ν΄μ λͺ¨λ λ λλ§μμ λΆνμνκ³ μ μ¬μ μΌλ‘ λΉμ©μ΄ λ§μ΄ λλ μ¬μ€νμΌλ‘ μ΄μ΄μ§λ€λ κ²μ μμμ΅λλ€. ν΄κ²°μ±
μ μ°μνκ³ κ΄μ©μ μΈ Reactμ
λλ€. useCallback ν
μ μ¬μ©νμ¬ μ½λ°± ν¨μλ₯Ό μμ νν©λλ€.
μ΄ ν¨ν΄μ λ§μ€ν°νλ©΄ λ€μμ μνν μ μμ΅λλ€.
- μ±λ₯ λ³λͺ© νμ λ°©μ§: λͺ¨λ μν λ³κ²½μμ λΉμ©μ΄ λ§μ΄ λλ μ€μ λ° ν΄μ²΄ λ‘μ§μ νΌνμμμ€.
- λ²κ·Έ μ κ±°: μ΄λ²€νΈ 리μ€λμ λΌμ΄λΈλ¬λ¦¬ μΈμ€ν΄μ€κ° μ€λ³΅ λλ λ©λͺ¨λ¦¬ λμ μμ΄ κΉλνκ² κ΄λ¦¬λλλ‘ λ³΄μ₯ν©λλ€.
- μμΈ‘ κ°λ₯ν μ½λ μμ±: μ»΄ν¬λνΈκ° λ§μ΄νΈ, μΈλ§μ΄νΈλ λ λλ νΉμ μ’ μμ±μ΄ λ³κ²½λ λλ§ μμλλ‘ μ ννκ² μλνλ ref λ‘μ§μ΄ μλ μ»΄ν¬λνΈλ₯Ό λ§λλλ€.
λ€μμ 볡μ‘ν λ¬Έμ λ₯Ό ν΄κ²°νκΈ° μν΄ refμ λλ¬νλ©΄ λ©λͺ¨μ΄μ μ΄μ λ μ½λ°±μ νμ κΈ°μ΅νμμμ€. μ΄λ μ½λμ μμ λ³νμ΄μ§λ§ React μ ν리μΌμ΄μ μ νμ§κ³Ό μ±λ₯μ ν° μ°¨μ΄λ₯Ό λ§λ€μ΄ μ μΈκ³ μ¬μ©μμ λ λμ κ²½νμ κΈ°μ¬ν μ μμ΅λλ€.