react 부모<->자식 데이터 변경 함수 호출

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를 통해서 접근 가능 합니다.