아래는 movk 데이터입니다.
const OPTION_LIST = [
{
id: 1,
group: 'CJ그룹',
list: [{ id: 2, value: 'https://www.cj.net/', title: 'CJ주식회사' }],
},
{
id: 3,
group: '식품 & 식품서비스',
list: [
{ id: 4, value: 'https://www.cj.co.kr/kr/index', title: 'CJ제일제당' },
{
id: 5,
value: 'https://www.cjfoodville.co.kr/main.asp',
title: 'CJ푸드빌',
},
{
id: 6,
value: 'https://www.cjfreshway.com/index.jsp',
title: 'CJ프레시웨이',
},
],
},
{
id: 7,
group: '생명공학',
list: [
{
id: 8,
value: 'https://www.cj.co.kr/kr/about/business/bio',
title: 'CJ제일제당 BIO사업부문',
},
],
},
{
id: 9,
group: '물류&신유통',
list: [
{
id: 10,
value: 'https://www.cjlogistics.com/ko/main',
title: 'CJ대한통운',
},
{
id: 11,
value: 'http://www.cjenc.co.kr/kr/Default.asp',
title: 'CJ대한통운 건설부문',
},
{
id: 12,
value: 'https://www.oliveyoung.co.kr/store/company/brandStory.do',
title: 'CJ올리브영',
},
{
id: 13,
value: 'https://www.cjolivenetworks.co.kr/',
title: 'CJ올리브네트웍스',
},
{
id: 14,
value: 'https://company.cjonstyle.com/index.asp',
title: 'CJ ENM 커머스부문',
},
],
},
{
id: 15,
group: '엔터테이먼트 & 미디어',
list: [
{
id: 16,
value: 'https://www.cjenm.com/ko/',
title: 'CJ ENM 엔터테인먼트 부문',
},
{ id: 17, value: 'http://corp.cgv.co.kr/', title: 'CJ CGV' },
],
},
];
export default OPTION_LIST;
<Select onChange={handleChange} value={siteUrl}>
{OPTION_LIST.map(info => (
<optgroup label={info.group} key={info.group}>
{info.list.map(el => (
<option value={el.value} key={el.id}>
{el.title}
</option>
))}
</optgroup>
))}
</Select>
위는 이중 for문입니다. list에서 값을 꺼내기 위해 이중 for문을 썼습니다.