자바블로그

react에서 주고 받는 데이터를 변경 하기 위해서는 state를 사용해야 합니다.

class형의 경우 setState 등을 이용해서 갱신이 가능 합니다. 저는 함수형으로 작업하기 때문에 hook을 이용해서

state에 저장 및 접근 하는 방식으로 작업을 진행 했습니다.

부모<->자식 간 공유가 필요한 정보들을 app.js에서 정의 해줍니다.

const [dataList, setDataList] = useState([]);  
const [tabViewCss1, setTabViewCss1] = useState("active");
const [tabViewCss2, setTabViewCss2] = useState("");
const [divViewCss1, setDivViewCss1] = useState("d-block");
const [divViewCss2, setDivViewCss2] = useState("d-none");
const [{ mapLat, mapLng }, setGeometricData] = useState({
      mapLat: 37.486708581137,
      mapLng: 127.037893303934,
});

위의 내용을 간단하게 설명하면 

1) dataList는 목록 출력에 사용할 배열을 담는 객체로 비어있는 배열로 초기화 했습니다. useState([])

   해당 정보를 변경 하려는 경우 setDataList함수를 호출 해서 값을 변경 할 수 있습니다. setDataList(배열정보)

2) tabViewCss1~divViewCss2 탭 화면 구성을 위한 class정보를 담은 정보로 문자열 입니다.

   setTabViewCss1~setDivViewCss2 로 정보를 초기화 할 수 있습니다. setTabViewCss1('active')

3) mapLat, mapLng는 지도상의 위치(경도,위도) 정보로 배열 형식으로 선언 하였기 때문에 초기화 할때도

    useState({mapLat..., mapLng...})형식으로 초기화를 진행 했습니다.

    값을 변경 할때도 setGeometricData({mapLat:값, mapLng:값}) 와 같이 해당하는 값을 정의 해줘야 합니다.

useState를 이용해서 정의된 값은 변경시 해당 정보를 사용하는 모든 곳에서 영향을 받게 됩니다.

부모->자식 으로 전달된 함수의 경우 

<li className={"nav-item nav-link "+props.tabViewCss1} onClick={(e) => props.tabClick(1, e)}>
목록
</li>
<li className={"nav-item nav-link "+props.tabViewCss2} onClick={(e) => props.tabClick(2, e)}>
지도
</li>

와 같이 props를 통해서 접근 가능 합니다.

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

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

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

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

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

spring boot 에서 내장 database(h2)를 사용할때 application.properties 에 

spring.datasource.url=jdbc:h2:mem:test
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=

와 같이 작성을 해주면 어플리케이션이 시작 할때 자동으로 관련 database를 생성 해주게 됩니다.

(특정 버전 이전에는 위의 설정이 없어도 자동으로 생성 해주었는데 현재는 설정이 있어야 생성 된다고 합니다.)

https://howtodoinjava.com/spring-boot2/h2-database-example/

위와 같이 사용하는 경우 크게 신경쓰지 않고 작업이 가능 합니다. 문제가 생기는건 해당 DB에 접근 하기 위한 datasource를 다중으로 구성하는 경우 입니다.

이 경우 

https://www.baeldung.com/spring-data-jpa-multiple-databases

내용을 참고 해서 서비스를 시작 하면 

위의 사진가 같이 mem:test database를 찾지 못해서 접속이 되지 않는 문제가 발생됩니다.

관련 내용을 찾아 보다 아래와 같은 글을 발견 했습니다.

https://stackoverflow.com/questions/55349373/database-not-found-and-ifexists-true-so-we-cant-auto-create-it

위의 다중 datasource와는 상관 없는데 url을 jdbc:h2:~/test 으로 변경 하는 경우

정상적으로 database에 접속 할 수 있게 됩니다.

위의 url로 설정하는 경우 DB파일이 C:\Users\user-name\test.mv.db 경로로 생성 됩니다.

위와 같이 물리적 파일을 생성하는 url의 경우 다중 설정이 정상적으로 생성 되게 됩니다.

위와 같이 url을 물리적 파일 기준으로 작성 하는경우

spring.datasource.url=jdbc:h2:~/test
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=

spring.datasource2.url=jdbc:h2:~/test2
spring.datasource2.driverClassName=org.h2.Driver
spring.datasource2.username=sa
spring.datasource2.password=

spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.H2Dialect
#파일형의 경우 초기 생성 후 database가 유지 되기 때문에 아래 설정은 한번만 실행 시켜야 합니다.
spring.sql.init.mode=always

2개의 database를 사용해도 2개 모두 정상적으로 초기 생성 되게 됩니다.

(문제 현상에 대한 완벽한 이해 없이 우선 발생한 상황에 대해서만 기술한 내용 입니다. 문제에 대한 이해가

완료 되면 해당 문서를 갱신 할 예정 입니다.)