🟦 [React] 중첩된 객체와 배열 구조 => 가지고 오고 싶은 값 사용하기

중첩된 객체와 배열 구조 = 객체 안에 배열이 있는 JSON 형태의 데이터

 

라고 부르는 데이터를 작성하게 되었는데 배열의 키 값을 가져오고 싶었다!

 

✅ 구현하고 싶은 동작 => ui, projectA 의 index 값을 가져와서 해당하는 객체들을 뿌려주고 싶은 것!

 

 

const tabDataKey = Object.keys(tabData);

=> 키 값을 가져오니 해당 배열 값을 가져온다.

 

{tabData[tabDataKey[index]].map((data, index) => (
   console.log(tabDataKey[index])
)) }

=> 해당 index에 있는 키 값의 텍스트를 가져온다.

 

const tabData = {
    ui: [
        {
            th: tabTh.default,
            modifyFiles: [
                {
                    type: "html",
                    files: [
                        "src>templates>home.html"
                    ]
                },
                {
                    type: "js",
                    files: [
                        "src>static>js>main.js"
                    ]
                },
                {
                    type: "css",
                    files: [
                        "src>static>css>style.css",
                        "src>static>css>theme.css"
                    ]
                }
            ],
            image: "img/ui_example.png",
            link: [
                "https://example.com/home",
                "https://example.com/dashboard"
            ],
            notice: "UI 구조 변경으로 일부 파일 수정됨",
            annotation: [
                "1. 기본 배너 위치 변경",
                "2. 레이아웃 구조 정리"
            ],
            requestor: "홍길동"
        }
    ],
    projectA: [
        {
            th: tabTh.projectA,
            section: "푸터",
            method: {
                type: "link",
                text: "https://example.com/login",
                image: "img/projectA_footer.png"
            },
            link: "https://example.com/",
            annotation: "고객센터 전화번호 수정 1234-5678 -> 9876-5432",
            requestor: "김철수"
        }
    ]
};

 

 

여기에서 이제 키 값에 있는 객체들을 뿌려주고 싶다!

{
    tabData[tabDataKey[index]].map((data, index) => (
        <td key={index}>{data.notice}</td>
    ))
}

 

이렇게 하면 ui 탭일 때는 ui.notice가 보여진다!