react 사용자 화면 데이터 구성(부모<->자식, 배열, 함수 전달)

react에서는 부모<->자식관의 데이터 전달을 부모 페이지에서 import 한 객체에 attribute로 정의해서 전달 할 수 있습니다. 전달 하는 방식은 아래와 같습니다.

<Top searchApi={searchApi}/>
<Tab tabViewCss1={tabViewCss1} tabViewCss2={tabViewCss2} tabClick={tabClick}/>
<Main dataList={dataList} divViewCss1={divViewCss1} setGeometricData={setGeometricData} tabClick={tabClick}/>
<Map divViewCss2={divViewCss2} mapLat={mapLat} mapLng={mapLng}/>
<Bottom tempVal="KOOREMO"/>

전달 되는 데이터는 배열, 문자열, 함수 등 다양하게 전달 가능 합니다.

전달한 정보는 자식 화면에서 아래와 같이 전달 받 을 수 있습니다.

 

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;

props로 전달 받은 객체를 props.tempVal 로 전달 받은 key를 이용해서 사용 할 수 있습니다.

props는 변경이 불가능한 객체 입니다.(전달 받은 정보를 수정하는 방식은 함수형에서 hook을 사용해야 합니다.)

https://ko.reactjs.org/docs/components-and-props.html

Components와 Props – React

const Main =({dataList, divViewCss1, setGeometricData, tabClick})=>{

혹은 위의 내용과 같이 전달 받는 key를 맞춰서 정보를 전달하는 '비구조화할당' 방식을 사용 할 수 있습니다.

비구조화 할당 방식은 key가 맞다면 배열, 문자열, 함수 모두 전달 가능 합니다.

 

주고 받는 정보를 수정 하는건 다음에 작성할 hook에서 정리 하도록 하겠습니다.