React 활용 - 1 : React-router-dom 페이지 네이게이션 만들기

리액트에서 페이지 이동을 하기 위해서는 router를 활용해야한다. rounter를 사용하기 위해서는 npm 으로 react-router-dom 를 먼저 설치해준다 npm i react-router-dom 그 후 이동할 화면을 먼저 생성한다. 처음 만드는 페이지로, FirstScreen.js를 생성한다. import React from 'react'; function FirstScreen() { return ( first ); } export default FirstScreen; 이제 App.js를 열어 아래와 같이 수정한다. import React from 'react'; import FirstScreen from './Screens/FirstScreen' import { BrowserRouter as..

2022.09.10

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