리액트 내에서 const질문입니다.

리액트 컴포넌트에서 상수변수로 사용시 최하단에 상수변수를 작성하였는데 Study() 함수내부의 for문에서 BOX_LIST를 어떻게 읽을수 있나요? 모듈번들링을 통해서 그 파일을 읽을수있는건가요..?

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

export default function Study() {
const boxListRef = useRef({});
function onClick() {
let maxRight = 0;
let maxId = "";
for (const box of BOX_LIST) {
const ref = boxListRef.current[box.id];
if (ref) {
const rect = ref.getBoundingClientRect();
if (maxRight < rect.right) {
maxRight = rect.right;
maxId = box.id;
}
}
}
alert(`오른쪽 끝 요소는 ${maxId}`);
}
return (
<div>
<div
style={{
display: "flex",
flexWrap: "wrap",
width: "100vw",
height: "100%",
}}
>
{BOX_LIST.map(item => (
<div
key={item.id}
ref={ref => (boxListRef.current[item.id] = ref)}
style={{
flex: "0 0 auto",
width: item.width,
height: 100,
backgroundColor: "yellow",
border: "solid 1px red",
}}
>{`box_${item.id}`}</div>
))}
</div>
<button onClick={onClick}>오른쪽 끝 요소는?</button>
</div>
);
}

const BOX_LIST = [
{ id: 1, width: 70 },
{ id: 2, width: 100 },
{ id: 3, width: 80 },
{ id: 4, width: 100 },
{ id: 5, width: 90 },
{ id: 6, width: 60 },
{ id: 1, width: 120 },
];

인프런 커뮤니티 질문&답변