findDOMNode

 

🎯 findDOMNode란 무엇인가요?

**findDOMNode**는 React에서 특정 DOM 요소를 직접 찾을 때 사용하는 함수예요.
React 컴포넌트가 화면에 렌더링되면 **HTML 태그(즉, DOM 요소)**가 만들어지는데요,
이 DOM 요소에 직접 접근하고 싶을 때 findDOMNode를 사용합니다.

 

🍕 비유로 이해하기: 사물함 찾기

여러분이 학교에 가서 자기 사물함을 찾는다고 상상해 보세요. 🎒

1. React 컴포넌트는 사물함 번호표
   • 사물함마다 **번호(컴포넌트)**가 붙어 있어요.
2. DOM 요소는 사물함 자체
   • 우리가 눈으로 보거나 손으로 만질 수 있는 **사물함(HTML 태그, DOM 요소)**이에요.
3. findDOMNode는 사물함을 찾는 도구
   • "5번 사물함이 어디 있지?"라고 물어볼 때 findDOMNode를 사용하면 바로 사물함 위치를 알려줘요.
   • 즉, 컴포넌트를 통해 실제 DOM 요소를 찾아내는 역할을 합니다.

 

🛠️ findDOMNode 사용법

findDOMNode는 ReactDOM 패키지에 포함되어 있어요.
아래 예제를 통해 어떻게 사용하는지 볼까요?

 

1. findDOMNode 기본 예제

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends Component {
  componentDidMount() {
    // findDOMNode를 사용해 DOM 요소에 접근
    const domElement = ReactDOM.findDOMNode(this);
    console.log(domElement); // 콘솔에 해당 DOM 요소가 출력됩니다
  }

  render() {
    return <div>안녕하세요! 저는 DOM입니다 😊</div>;
  }
}

export default MyComponent;

 

🔍 코드 설명

1. ReactDOM.findDOMNode(this)
   • findDOMNode는 컴포넌트 인스턴스(여기서는 this)를 전달받아서
     해당 컴포넌트의 실제 DOM 요소를 찾아줍니다.
2. 결과
   • 콘솔에 <div>안녕하세요! 저는 DOM입니다 😊</div>라는 DOM 요소가 출력됩니다.
   • 이렇게 우리는 React 컴포넌트를 통해 직접 DOM에 접근할 수 있게 돼요.

 

2. findDOMNode로 스타일 조작하기

findDOMNode를 사용해 DOM 요소의 스타일을 변경할 수도 있어요.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends Component {
  componentDidMount() {
    const domElement = ReactDOM.findDOMNode(this);
    domElement.style.color = 'blue'; // 텍스트 색상을 파란색으로 변경
  }

  render() {
    return <div>안녕하세요! 색이 변했어요! 🎨</div>;
  }
}

export default MyComponent;

 

🔍 코드 설명

1. findDOMNode로 찾은 DOM 요소의 스타일에 접근해요.
2. **style.color**를 변경해서 텍스트 색상을 파란색으로 바꿔요.

 

🚨 findDOMNode를 사용할 때 주의할 점

1. findDOMNode는 비추천(deprecated) 기능이에요
   • React 팀은 findDOMNode 대신 **ref**를 사용하는 것을 권장하고 있어요.
   • 이유는 findDOMNode가 React의 선언적 방식과 맞지 않기 때문이죠.
2. 함수형 컴포넌트에서는 사용할 수 없어요
   • findDOMNode는 클래스 컴포넌트에서만 사용할 수 있어요.
   • 함수형 컴포넌트에서는 대신 **useRef**를 사용해야 합니다.

 

✅ findDOMNode 대신 ref 사용하기

React에서 ref를 사용하면 더 안전하고 간단하게 DOM 요소에 접근할 수 있어요.
아래는 ref를 사용한 동일한 예제예요.

import React, { Component, createRef } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = createRef(); // ref 생성
  }

  componentDidMount() {
    this.myRef.current.style.color = 'blue'; // ref를 사용해 DOM 스타일 변경
  }

  render() {
    return <div ref={this.myRef}>안녕하세요! 색이 변했어요! 🎨</div>;
  }
}

export default MyComponent;

 

🔍 ref를 사용하면 좋은 점

1. 더 선언적이고 직관적이에요
   • ref를 통해 DOM 요소에 접근하면 코드가 더 깔끔해져요.
2. 함수형 컴포넌트에서도 사용 가능
   • useRef 훅을 사용하면 함수형 컴포넌트에서도 DOM 요소를 다룰 수 있어요.

 

🌟 한 줄 요약

**findDOMNode**는 React에서 클래스 컴포넌트의 DOM 요소에 직접 접근할 때 사용하는 함수지만,
현재는 **ref**를 사용하는 것이 더 안전하고 권장되는 방법이에요!

 

 

🎉 마무리

React의 **findDOMNode**는 오래된 기능이지만, DOM 요소를 찾아야 하는 상황에서 사용되었어요.
하지만 이제는 더 깔끔하고 안전한 방법인 **ref**를 사용하는 게 좋습니다!