개인프로젝트/어린이사고다발지역검색

react 폴더 및 파일 나누기

질주하는구 2022. 3. 18. 15:36

bootstrap디자인에 맞춰서 폴더 및 파일을 아래와 같이 나누어서 작업 할 예정 입니다.

/inc/...

/layout/...

2개의 폴더에 각각의 폴더를 생성 합니다. 폴더 및 파일은 자신이 생각하는 이름으로 작업 해주시면 됩니다.

(패키지 및 파일명, 변수명 생각하는데 정말 많은 시간을 사용하는데 많은 페이지가 아니고 작업 해보는것에 의미가 있어 막지었습니다.)

기존에 작업한 내용을 각 파일에 맞게 잘라서 붙여 주시면 됩니다.

다른 분들 글에는 class형으로 사용하는 경우가 있는데 저는 함수형 그중에서 익명함수형으로 소스 작업을 진행 했습니다.

Top.js

const Top =()=>{
    return(
        <div className="row mt-2">
            <div className="card w-100">
                <div className="card-header bg-primary text-white">DATA SEARCH</div>
                <div className="card-body">
                    <div className="row">
                        <div className="col-md-11">
                            <form className="form-inline">
                                <div className="form-group mb-2 mr-1">
                                    <label htmlFor="searchYear">년도</label>
                                    <select className="form-control" name="searchYear" id="searchYear"> 
                                        <option value="">선택</option>                               
                                        <option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
										<option value="4">4</option>
                                    </select>
                                </div>
                                <div className="form-group mb-2 mr-1">
                                    <label htmlFor="searchSiDo">시군</label>
                                    <select className="form-control" name="searchSiDo" id="searchSiDo">
                                        <option value="">선택</option>                               
                                        <option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
										<option value="4">4</option>                           
                                    </select>
                                </div>
                                <div className="form-group mb-2 mr-1">
                                    <label htmlFor="searchGuGun">구군</label>                           
                                    <select className="form-control" name="searchGuGun" id="searchGuGun">
                                        <option value="">선택</option>
                                        <option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
										<option value="4">4</option>
                                    </select>
                                </div>
                                <ReactBootstrap.Button type="button" className="btn btn-primary mb-2">search</ReactBootstrap.Button>
                            </form>
                        </div>
                    </div>                                      						
                </div>
            </div>
        </div>
    )
}
    
export default Top;

tab.js

const Tab =()=>{
    return(
        <div className="row mt-2">
            <ul className="nav nav-tabs w-100">
                <li className={"nav-item nav-link"}>
                목록
                </li>
                <li className={"nav-item nav-link"}>
                지도
                </li>
            </ul>
        </div>
    )
}
    
export default Tab;

main.js

const Main =()=>{  
    return(
		<div className={"row mt-1">
			<div className="card w-100">
				<div className="card-body">NO DATA.</div>
			</div>				
		</div>       
	);
}
    
export default Main;

bottom.js

const Bottom =(props)=>{
    return(
        <footer className="container mt-2">
			<div className="row"><div className="col-12 text-center">©2022 Copyright: {props.tempVal}</div></div>
		</footer>
    )
}
    
export default Bottom;

App.js

import Top from './layout/top'
import Tab from './inc/tab'
import Main from './layout/main'
import Map from './layout/map'
import Bottom from './layout/bottom'

return (
	<div className="container">
	  <Top/>
	  <Tab/>
	  <Main/>
	  <Map/>
	  <Bottom tempVal="KOOREMO"/>
	</div>
);

App.js 는 상단 import 부분과 return 영역의 내용만 작성 했습니다.

최초 생성시 index.html 내용에 보면 <body> 태그 하위에 <div id="root"></div> 영역이 있는데 이 부분을

<body id="root">
    
</body>

body 기준으로 변경 해줍니다. <div> 하나를 허용하는 경우 출력되는 화면이 의도와 다르게 출력 될 수 있어 삭제 

처리 해줬습니다.

(class container 아래에 구성요소를 위치 하는게 화면 구성을 잡기 좋아서 그렇게 했는데 필요 없는경우 그냥 기본 index.html로 작업 진행 하셔도 됩니다.)

 

위의 내용 들중 설명이 필요한 부분은 class->className으로 처리 해야 하는 부분과, Bottom을 호출할때 tempVal이라는 key에 KOOREMO라는 값을 담아 보내 줬고 해당 값을 bottom.js에서 props로 전달 받아 사용 했다는 겁니다.

 

react는 부모가 자식 구성요소에 데이터 및 함수를 전달 할 수 있는데 이 때 props를 사용 하게 됩니다.

또한 데이터는 state에 담아 변경 사항을 관리 합니다. state부분은 다음 데이터를 불러오는 부분에서 설명 하겠습니다.

 

위의 내용까지 작업 하고 나면 확인이 가능 합니다. 해당 프로젝트로 이동 후

yarn start

명령어를 실행 하면 작업한 디자인을 확인 할 수 있습니다.

 

반응형