참조변수.current

Q1.

React에서, 참조변수와 연결된 인풋태그만, 참조변수.current로 접근할 수 있는거야?

 

 

 

A1.

ChatGPT의 말:

 

React에서 참조 변수 (ref)를 사용하면, 해당 변수는 특정 DOM 요소나 React 컴포넌트의 직접적인 접근을 제공해 줍니다. 하지만 참조 변수는 단순히 인풋 태그에만 국한되지 않으며, 다양한 DOM 요소나 클래스형 컴포넌트에도 사용할 수 있습니다. 이와 관련된 내용을 정리하자면:

---

1. 참조 변수란?

React에서 ref는 특정 DOM 요소나 React 컴포넌트의 접근을 위해 사용됩니다. 이는 useRef 훅(함수형 컴포넌트에서 사용)이나 React.createRef() (클래스형 컴포넌트에서 사용)을 통해 생성됩니다.

2. ref.current란?

ref.current는 ref를 통해 연결된 DOM 요소나 컴포넌트를 가리키는 속성입니다.

• ref.current는 실제로 연결된 DOM 요소에 직접 접근하는 방식으로 작동합니다.
• 따라서, 인풋 태그만 사용할 수 있는 것이 아니라, 모든 HTML 태그, DOM 노드, 그리고 일부 React 컴포넌트에서도 사용할 수 있습니다.

---

3. ref와 input 태그 연결 예제

import React, { useRef } from "react";

const InputFocusExample = () => {
  const inputRef = useRef(null);

  const focusInput = () => {
    // ref를 통해 DOM에 직접 접근
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Enter text here" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

export default InputFocusExample;

• 위 코드에서 inputRef.current는 <input> 태그 DOM 요소를 가리킵니다.
• 버튼 클릭 시 inputRef.current.focus()를 통해 인풋에 포커스를 줄 수 있습니다.

---

4. 다른 DOM 요소에 대한 ref 사용

ref는 반드시 input 태그에만 연결되는 것이 아닙니다. 다른 DOM 요소에도 연결할 수 있습니다.

import React, { useRef } from "react";

const DivExample = () => {
  const divRef = useRef(null);

  const changeBackgroundColor = () => {
    if (divRef.current) {
      divRef.current.style.backgroundColor = "lightblue";
    }
  };

  return (
    <div>
      <div ref={divRef} style={{ width: "200px", height: "100px", border: "1px solid black" }}>
        I am a div
      </div>
      <button onClick={changeBackgroundColor}>Change Background Color</button>
    </div>
  );
};

export default DivExample;

• 이 경우 divRef.current는 <div> 요소를 가리킵니다.
• 버튼 클릭 시 <div>의 배경색을 변경합니다.

---

5. ref와 연결된 React 컴포넌트

React에서는 클래스형 컴포넌트에도 ref를 연결할 수 있습니다. 단, 함수형 컴포넌트에 ref를 연결하려면 forwardRef를 사용해야 합니다.

import React, { useRef, forwardRef, useImperativeHandle } from "react";

// 자식 컴포넌트
const ChildComponent = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    showAlert() {
      alert("Hello from Child Component!");
    },
  }));

  return <div>Child Component</div>;
});

// 부모 컴포넌트
const ParentComponent = () => {
  const childRef = useRef(null);

  const triggerChildAlert = () => {
    if (childRef.current) {
      childRef.current.showAlert();
    }
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={triggerChildAlert}>Trigger Child Alert</button>
    </div>
  );
};

export default ParentComponent;

• 이 경우 childRef.current는 ChildComponent의 특정 메서드(showAlert)에 접근할 수 있습니다.

---

결론

• ref는 input 태그에만 사용되는 것이 아니라, DOM 요소 및 React 컴포넌트에도 연결할 수 있습니다.
• ref.current를 통해 연결된 요소나 컴포넌트의 속성 및 메서드에 접근할 수 있습니다.
• 주로 ref는 DOM에 직접 접근해야 하는 특별한 상황(예: 포커스 설정, 스타일 변경 등)에 사용됩니다.

궁금한 점이 더 있다면 언제든지 질문해주세요! 😊