React 에서는 ref 에 접근하여 DOM 엘리먼트에 접근할 수 있고 해당 style 프로퍼티를 setProperty() 메서드를 통해 수정할 수 있다.

ref 에 접근하여 컴포넌트의 배경 색을 변경하기

import React, { useRef } from 'react';

function MyComponent() {
  const divRef = useRef(null);

  const handleClick = () => {
    divRef.current.style.setProperty('background-color', 'red');
  };

  return (
    <div ref={divRef} onClick={handleClick}>
      Click me to change my background color!
    </div>
  );
}

handleClick 함수를 들여다보면 setProperty() 메서드를 통하여 div의 background-color 스타일 속성을 red로 변경하고 있다.

ref 에 접근하여 animation 적용하기

import React, { useRef } from 'react';

function MyComponent() {
  const boxRef = useRef(null);

  const handleButtonClick = () => {
    boxRef.current.style.setProperty('transform', 'translateX(100px)');
  };

  return (
    <div>
      <div
        ref={boxRef}
        style={{ width: '50px', height: '50px', backgroundColor: 'red' }}
      ></div>
      <button onClick={handleButtonClick}>Move Right</button>
    </div>
  );
}

언제 주로 우리는 ref.current.style.setProperty() 를 사용하는 가?

1. 요소의 위치, 크기 또는 불투명도를 애니메이션화하는 경우
2. 사용자 상호작용에 따라 입력 요소의 색상, 글꼴 크기 또는 기타 시각적 속성을 변경 하는 경우
3. 요소의 상태에 따라 CSS 전환 또는 애니메이션을 적용하는 경우
4. 부모 컴포넌트의 상태에 따라 자식 요소의 스타일을 업데이트하는 경우