[React] mock데이터 & 이중 for문

bin·2023년 3월 3일
0

아래는 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문을 썼습니다.

profile
프론트엔드부터 공부하고 있습니다

0개의 댓글