*map에서 ref 사용하기import { useRef, useEffect } from 'react';type Item = { id: number; name: string;};const items: Item[] = [ { id: 1, name: 'First' }, { id: 2, name: 'Second' }, { id: 3, name: 'Third' },];export default function ListComponent() { const itemRefs = useRef([]); useEffect(() => { // 예시: 두 번째 요소에 포커스 주기 itemRefs.current[1]?.scrollIntoView({ behavior: 'smooth' }); }, []); ..
1. 컴포넌트 만들기 import clsx from 'clsx'; import React from 'react'; interface Props extends React.InputHTMLAttributes { theme?: 'primary' | 'secondary' | 'tertiary'; } /* 타입 확장 interface DefaultInputTextProps extends React.InputHTMLAttributes - 기본 html에 있는 타입을 쓰고 있고 내가 그 html태그의 타입을 상속받을 경우 위와 같이 extends 하여 써주어야한다 */ export default forwardRef(function 컴포넌트명( {theme, className, ...restProps }: Props,..
# 컴포넌트에서 높이 구하기 1. 컴포넌트에 ref="링크명" 붙이기 2. this.$refs.링크명 으로 접근 3. 높이구하기 - mounted이후에 접근해야 undefined 오류가 안뜬다. private 함수명() { //이벤트 const 높이 = this.$refs.링크명.$el.clientHeight; } # html 요소에서 높이 구하기 1. 필요한 html 에 ref="링크명" 붙이기 2. this.$refs.링크명 으로 접근 3. 높이구하기 - 지시자 $el 없이 attribute로 바로 접근한다. private 함수명() { //이벤트 const 높이 = this.$refs.링크명.clientHeight; } 👀느낀점 코드를 짜다가 추가하여 어떠한 상황을 만들었을때 어떠한 이유로 안될경우..
