[React Exam 32] map()을 이용한 지자체 홈페이지 나열하기

반복문을 연습해 보도록 하겠습니다.

데이터 파일과 로고 이미지  파일입니다. 압축을 해제하고 src폴더에 넣으세요

데이터와 로고 이미지는 행정안전부의 내고장알리미 서비스르 이용하여 취합했습니다.

https://www.laiis.go.kr/lips/mlo/lcl/representationList.do

내고장알리미

https://www.laiis.go.kr/lips/mlo/lcl/cultureTourismList.do

내고장알리미

sido.zip

1.36MB

 

 

LocalGovernment.js 파일을 만듭니다.

import './App.css' const LocalGovernment = ({name, list})=>{     // https://www.laiis.go.kr/lips/mlo/lcl/representationList.do     return (         <>             {                 list.map((g)=>{                     const clickHandler = (e)=>{                         window.location.href = g.link;                     }                     const src = `./sido/images/img_logo_${g.code}.png`;                     return (                         <div className='gov' onClick={clickHandler} style={{width:"100px",borderRadius:"25px"}} key={g.code}>                             <img src={src} alt={g.code} width={50} height={50}/><br/>                             {g.name}                         </div>                     )                 })             }         </>     ); } export default LocalGovernment;

 

App.css 파일을 만듭니다.

.gov {     padding: 5px;     margin: 3px;     text-align: center;     float: left;     cursor: pointer;     border: 1px solid gray;     background-color:#E8E8E8; }

 

App.js 파일을 만듭니다.

import LocalGovernment from "./LocalGovernment"; import GOV from "./sido/data/sidoLists"; import './App.css' import { useEffect } from "react"; const App = ()=>{     // favicon 설정 : public 폴더에 favicon.ico 을 원하는 favicon 파일로 변경하면 됩니다.     // 윈도우 타이틀 변경하기     useEffect(()=>{         const titleElement = document.querySelector("title");         titleElement.innerText = `자치단체별 홈페이지 가기`     },[]);     return (         <>             {                 GOV.map((g)=>{                     const clickHandler = (e)=>{                         window.location.href = g.link;                     }                     const src = `./sido/images/img_logo_${g.code}.png`;                     let style = {textAlign:"left", border : "none", backgroundColor:"white", width:"600px"};                     return (                         <div key={g.code}>                             <div className="gov" onClick={clickHandler} style={style}>                                 <img src={src} alt={g.code}  width={50} height={50} style={{float : "left"}}/>                                 <h1>{g.name}</h1>                             </div>                             <br style={{clear:"both"}}/>                             <LocalGovernment name={g.name} list={g.list}/>                             <br  style={{clear:"both"}}/>                             <br/>                         </div>                     )                 })             }         </>     ); } export default App;

 

index.js  파일을 만듭니다.

import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App';   const root = ReactDOM.createRoot(document.querySelector("#app")); root.render(     <React.StrictMode>         <App/>     </React.StrictMode> );

 

결과 화면 입니다.