Typescript useRef 여러개 사용하기

 

반복문에 마다 ref 를 주고 싶을 때 어떻게 작업을 해야 할까?

( 오류코드 )

import { useRef } from 'react'
import classes from './TopNavigator.module.css'

const TopNavigator = () => {
	const menuRef = useRef(null)
	return (
		<>
			<div className={classes.mega}>
				<ul className={classes.megaLgContainer}>
					{[0, 0, 0].map((_, index) => (
						<li
							className={classes.megaLgItem}
							key={index}
							ref={e => (menuRef.current[index] = e)}
						>
							<a href="">대메뉴{index + 1}</a>
							<ul className={classes.megaMdContainer}>
								<li className={classes.megaMdItem}>
									<a href="">중메뉴1</a>
									<ul className={classes.megaSmContainer}>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴1</a>
										</li>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴2</a>
										</li>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴3</a>
										</li>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴4</a>
										</li>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴5</a>
										</li>
									</ul>
								</li>
								<li className={classes.megaMdItem}>
									<a href="">중메뉴2</a>
									<ul className={classes.megaSmContainer}>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴1</a>
										</li>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴2</a>
										</li>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴3</a>
										</li>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴4</a>
										</li>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴5</a>
										</li>
									</ul>
								</li>
								<li className={classes.megaMdItem}>
									<a href="">중메뉴3</a>
									<ul className={classes.megaSmContainer}>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴1</a>
										</li>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴2</a>
										</li>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴3</a>
										</li>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴4</a>
										</li>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴5</a>
										</li>
									</ul>
								</li>
								<li className={classes.megaMdItem}>
									<a href="">중메뉴4</a>
									<ul className={classes.megaSmContainer}>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴1</a>
										</li>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴2</a>
										</li>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴3</a>
										</li>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴4</a>
										</li>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴5</a>
										</li>
									</ul>
								</li>
								<li className={classes.megaMdItem}>
									<a href="">중메뉴5</a>
									<ul className={classes.megaSmContainer}>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴1</a>
										</li>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴2</a>
										</li>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴3</a>
										</li>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴4</a>
										</li>
										<li className={classes.megaSmItem}>
											<a href="">소메뉴5</a>
										</li>
									</ul>
								</li>
							</ul>
						</li>
					))}
				</ul>
			</div>
		</>
	)
}

export default TopNavigator

먼저 가장 기초적인 방법으로 useRef 를 작성했다.
하지만 해당방법으로 작성하면 menuRef.current 에서 null 인것 같다는 에러가 발생한다.

해결방법1

const menuRef = useRef<any>([])

해당 방법으로 구현하면 에러없이 반복되는 useRef 를 모두 가져온다.
하지만 Typescript 에서 any 를 사용하면 쓰는 이유가 없다는 의견이 많으니 다른 방법은 없을까?

해결방법2

const menuRef = useRef<null[] | HTMLLIElement[]>([])

위와 같은 방법으로도 구현가능하다.

'HTMLLIElement | null' 형식은 'HTMLLIElement' 형식에 할당할 수 없습니다.
  'null' 형식은 'HTMLLIElement' 형식에 할당할 수 없습니다.ts(2322)

null[] 값을 빼먹으면 위와 같은 오류가 야기되니 주의하자.