🟦 [React] 삼항 연산자 사용법

태그 안에서 조건식을 넣어서 구별하고 싶을 때 삼항 연산자 사용!

<tr>
    {
        activeTab === 0 ?
        (<th>1</th>) :
        (<th>2</th>)
    }
</tr>

 

이러면 activeTab = 0 일때 th에 1이 표시되고 아닐때 2가 표시 된다.

 

thead th 탭 구별해서 꾸리기

 

Tab.jsx 👇

const tabThKey = Object.keys(tabTh);

return(
생략-
    <thead>
        <tr>
            {activeTab == tabName.length - 1
                ? tabTh[tabThKey[1]].map((th, index) => (
                    <th key={index}>{th}</th>
                ))
                : tabTh[tabThKey[0]].map((th, index)=> (
                    <th key={index}>{th}</th>
                ))
            }
        </tr>
    </thead>
생략-
)

 

tabdata.js 👇

const tabTh = {
    default: [ "경로", "수정 파일", "상세", "URL", "특이 사항", "비고 (주석)", "요청자" ],
    metapay: [ "구분", "화면명", "상세", "URL", "수정 사항", "요청자"]
}

 

 

항상 태그 한 개만 반환하다 보니 또 실수함

=> ( ) 안에는 꼭 한개의 태그로 묶어줘야한다!!!

 

🚫 에러 내용 🚫

Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

<tbody>
    {tabData[tabDataKey[index]].map((data, dataIndex) => (
        <tr key={dataIndex}>
            {
                activeTab == tabName.length - 1 ?
                (
                    <>
                    <td>2번째</td>
                    </>
                ):(
                    <>
                    <td>{data.section}</td>
                    <td>
                        {data.modifyFiles?.map((fileData, index) => (
                            <div key={index}>
                                <strong>[ {fileData.type} ]</strong><br/>
                                {fileData.files.join("<br/>")}
                                <br/><br/>
                            </div>
                        ))}
                    </td>
                    <td><a href={data.image}></a></td>
                    <td>
                        {(typeof data.link === "string" // 문자열인지 구분하여 true면 배열로 반환
                            ? [data.link]
                            : Array.isArray(data.link) // 배열인지 구분하여 true면 그대로 반환
                            ? data.link
                            : Object.values(data.link) // 문자열과 배열이 아니면(객체라고 간주) 값을 배열로 변환
                        ).map((link, index) => (
                            <a key={index} href={link}>{link}</a>
                        ))}
                        {/*
                            Array.isArray( data ) => data가 배열(array)인지 확인
                            Object.values( data ) => data(객체)의 값을 배열로 반환
                            Object.keys( data ) => data(객체)의 key값을 배열로 반환
                            Object.entries( data ) => data(객체)의 키-값 쌍 -> key, value를 배열로 반환
                            Object.fromEntries( data ) => data(배열)를 객체로 변환
                        */}
                    </td>
                    <td>{data.notice}</td>
                    <td>
                        {(typeof data.annotation == "string"
                            ? [data.annotation]
                            : Array.isArray(data.annotation)
                            ? data.annotation
                            : Object.values(data.annotation)
                        ).map((annotation, index) => (
                            <div key={index}>{annotation}</div>
                        ))}
                    </td>
                    <td>{data.requestor}</td>
                    </>
                )
            }
        </tr>
    ))}
</tbody>