[멋쟁이 사자처럼 프론트엔드 스쿨] 69일차 TIL - 참조(Refs) 활용

🍰 날씨도 더운데 가만히 앉아서 수업 들으려니까 더 졸리고 집중이 잘 안 되는 것 같다. 

🍴 useRef

: React 훅. 컴포넌트의 생명주기 동안 유지되는 가변값을 저장하는 데 사용됨.

• 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지됨.
• 값을 변경해도 컴포넌트가 리렌더링 되지 않음.
• 주로 DOM 요소에 직접 접근하거나 이전 상태를 기억하는 데 사용됨.

countRef를 사용하여 컴포넌트의 리렌더링 없이 값을 유지하고 변경할 수 있는 예시 코드.

import React, { useRef, useState } from 'react';

function CounterWithRef() {
  const countRef = useRef(0);
  const [, setDummy] = useState(0);

  const incrementCount = () => {
    countRef.current += 1;
    console.log('현재 카운트:', countRef.current);
  };

  const displayCount = () => {
    setDummy(prev => prev + 1); // 강제 리렌더링
  };

  return (
    <div>
      <p>카운트: {countRef.current}</p>
      <button onClick={incrementCount}>증가 (콘솔에 기록)</button>
      <button onClick={displayCount}>화면에 표시</button>
    </div>
  );
}

export default CounterWithRef;

 

🍴 Vanilla Tilt 라이브러리

: 웹 사이트나 애플리케이션에서 사용자가 마우스를 움직일 때 특정 요소에 3D 틸트 효과를 주는 JavaScript 라이브러리.

• Vanilla Tilt 라이브러리 추가하기

pnpm add vanilla-tilt