TIL 230413 useInsertionEffect / useId / useImperativeHandle

🎆 오늘 한 것

• useInsertionEffect / useId / useImperativeHandle
• 유데미 리액트 복습(섹션 10~11)

✨ Hooks

🎇 useInsertionEffect

DOM 요소가 삽입될 때 콜백 함수를 실행하는 기능을 제공

useEffect와 유사하지만, 콜백 함수가 DOM 요소가 실제로 삽입될 때 실행된다는 차이점이 있다!
useInsertionEffect는 useEffect와 유사하게 의존성 배열(Dependency array)을 사용하여 효과를 실행할 때 필요한 값을 전달할 수 있다. 또, useInsertionEffect 훅에서 반환된 함수는 요소가 DOM에서 제거될 때 실행된다.

useInsertionEffect 함수는 두 개의 매개변수를 가진다. 첫 번째 매개변수는 삽입 이벤트가 발생할 DOM 요소를 선택하는 함수, 두 번째 매개변수는 삽입 이벤트가 발생할 때 실행될 콜백 함수.

import { useState } from 'react';
import { useInsertionEffect } from 'react-use';

function App() {
  const [items, setItems] = useState([1, 2, 3]);

  const handleAddItem = () => {
    setItems([...items, items.length + 1]);
  };

  useInsertionEffect((el) => {
    //요소가 추가될 때 애니메이션 효과를 적용
    //첫 번째 매개변수는 요소가 추가될 때 실행될 함수를 정의
    el.classList.add('fade-in');
    //요소의 classList에 'fade-in' 클래스를 추가하여 애니메이션 효과를 적용
    setTimeout(() => {
      el.classList.remove('fade-in');
      //0.5초 후에 해당 클래스를 제거하여 애니메이션을 종료
    }, 500);
  }, [items]);
  //items 배열이 변경될 때마다 useInsertionEffect의 첫 번째 매개변수로 전달된 함수가 실행되어 애니메이션 효과가 적용

  return (
    <div>
      <button onClick={handleAddItem}>Add Item</button>
      {items.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
}

🎇 useId

웹 접근성과 관련하여 사용되는 훅으로, 컴포넌트에서 고유한 ID를 생성하고 이를 다른 요소와 연결할 수 있는 기능을 제공

useId는 react-aria 라이브러리에 포함되어 있으며, React 17 이상에서 사용할 수 있다. 이 훅은 컴포넌트에서 고유한 ID를 생성하는 데 사용된다. 예시로, 렌더링 시점에서 ID 충돌을 방지하기 위해 반복되는 요소를 렌더링하는 경우 useId를 사용해 요소마다 고유한 ID를 생성할 수 있다.

useId 함수는 매개변수를 가진다. 첫 번째 매개변수는 선택적으로 커스텀 ID를 제공하고, 두 번째 매개변수는 선택적으로 ID를 포맷하는 함수를 제공한다. 이를 사용해 ID의 접두사나 접미사를 추가하거나 특정 형식으로 포맷할 수 있다.

import React from 'react';
import { useId } from 'react-aria';

function MyComponent() {
  const id = useId(); // 고유한 ID를 생성

  return (
    <div>
      <label htmlFor={id}>이름</label>
      <input id={id} type="text" />
    </div>
  );
}

📌 선택적으로 문자열을 매개변수로 받아 커스텀 ID를 지정할 수 있다.

import React from 'react';
import { useId } from 'react-aria';

function MyComponent() {
  const id = useId('custom-prefix'); // "custom-prefix-1"과 같이 custom-prefix를 접두사로 가지는 고유한 ID를 생성

  return (
    <div>
      <label htmlFor={id}>이름</label>
      <input id={id} type="text" />
    </div>
  );
}

🎇 useImperativeHandle

부모 컴포넌트에서 자식 컴포넌트의 메소드나 속성을 직접적으로 접근할 수 있게 해준다. 이를 통해, 부모 컴포넌트는 자식 컴포넌트의 내부 구현과 상관없이 필요한 기능에 대해 접근할 수 있게 된다.

useImperativeHandle을 사용하면 자식 컴포넌트에서 외부에 노출되는 API를 정의할 수 있다. 예를 들어, 자식 컴포넌트에서 다른 컴포넌트에서 호출할 수 있는 함수나, 자식 컴포넌트의 ref를 부모 컴포넌트에서 직접 사용할 수 있도록 설정할 수 있다.

useImperativeHandle은 두 개의 매개변수를 받는다. 첫 번째 매개변수는 ref 객체, 두 번째 매개변수는 부모 컴포넌트에서 접근 가능한 메소드나 속성을 반환하는 콜백 함수이다.

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

const Input = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
      //focus 메서드를 외부로 노출
    }
  }));

  return <input type="text" ref={inputRef} />;
});

export default function App() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
    //Input 컴포넌트의 focus 메서드를 호출하여 input 요소에 포커스를 줌
  };

  return (
    <div>
      <Input ref={inputRef} />
      <button onClick={handleClick}>Focus</button>
    </div>
  );
}

이렇게 useImperativeHandle 훅을 사용하면, 자식 컴포넌트에서 선언된 메서드나 프로퍼티를 부모 컴포넌트에서 직접 호출할 수 있기 때문에, 컴포넌트 간의 상호작용을 더욱 간편하게 구현할 수 있다.

📝 오늘의 일기

수료도 했으니 본격적으로 취준 활동을 해야된다😵 이력서 작성에 포폴에 어느 세월에 다 만든담... 아직 리액트가 많이 부족한 느낌이라 리액트 공부 위주로 하면서 js, next js 등등 이것저것 깔짝여볼 생각이다. 프로젝트 때 사용해보지 못한 Vite도 공부해야지!