React 활용 - 8 : react-leaflet 로 지도(map) 페이지 만들기

이번에는 지도를 렌더링 하기 위해 react-leaflet 을 설치 후 적용한다. 우선 MapPage 폴더와 MapPage.js를 생성한다. 그 후 해당 페이지로 이동하기 위해 App.js에 react-router-dom을 설치 후 적용한다. 참고: React 활용 - 1 : React-router-dom 페이지 네이게이션 만들기 (tistory.com) React 활용 - 1 : React-router-dom 페이지 네이게이션 만들기 리액트에서 페이지 이동을 하기 위해서는 router를 활용해야한다. rounter를 사용하기 위해서는 npm 으로 react-router-dom 를 먼저 설치해준다 npm i react-router-dom 그 후 이동할 화면을 먼저 생성한다. 처음 cookinghoil.t..

2023.04.24

React - 페이지간 데이터 이동하기 (feat. 모달창 만들기)

리액트를 하면 서로 다른 js 파일끼리 스테이트나 데이터를 주고 받아야 하는 경우가 있다. 이럴 경우에 어떻게 작성하면 될지 알아보고, 리액트에서 모달창을 만들어 보자. 먼저 불러올 화면, 이동할 화면을 만든다. 이전 장에 이어서 test3.js 파일을 만들었고 아래와 같다. import React, { useState, useEffect,useCallback } from 'react'; function Test3({setModal,testdata}) { console.log(testdata) return ( {testdata.map((item,index,a)=>{ console.log(a) return ({index}{item.NICKNAME}) })} close ); } export default T..

2021.05.12