리액트에서 jsx map 관련 질문

Question

import mainButton1 from 'images/main/main_bt_1.png' import mainButton2 from 'images/main/main_bt_2.png' import mainButton3 from 'images/main/main_bt_3.png' import mainButton4 from 'images/main/main_bt_4.png' import mainButton5 from 'images/main/main_bt_5.png' const FlexBox = styled.div` display: flex; margin-top: 42px; ` const ContentBox = styled.div` flex: 1; ` const MainButton = styled.div<{ props: Number }>` width: 230px; height: 230px; background-image: url(${mainButton1}); background-size: 100% 100%; ` const MapNumber = [1, 2, 3, 4, 5] function MainContent() { return ( {MapNumber.map(index => ( ))} ) } export default MainContent한개의 컴포넌트 소스인데 이미지파일을 mainButton1,2,3,4,5 이런식으로 import 해두었습니다.위 소스 처럼 반복문으로 컴포넌트 이미지를 props 번호로 렌더링 하고 싶은데 방법이 있을까요?아니면 이미지 마다 div 을 만들어주는 방식이 맞을까요?

[object Object] · Answer

if 문으로 분기해서 처리하거나 아니면 상단에 객체를 만들고 사용해도 되겠네요.const img = { img1: mainButton1, img2: mainButton2, ... }; // ...

리액트에서 jsx map 관련 질문

1개의 답변

Q&A 목록