basic/React.js (42) 썸네일형 리스트형 [React.js] react-router-dom npm i react-router-dom -s 패키지 설치 import { Route, Switch, BrowserRouter } from "react-router-dom"; // pages import import Home from './Comp/Home' import About from './Comp/About' import DashBoard from './Comp/DashBoard' function App() { return ( ); } export default App; 최상단에 BrowserRouter로 감싸줘야 한다. exact를 안넣어주면 '/', '/about'도 똑같이 Home 컴포넌트가 나올 것이다. switch는 링크와 매칭되는 첫번째 라우트만 보여주고 나머지는 보여주지 않는다 따라서.. [React.js] Enter 이벤트 keyPressHandler = (e) => { // if(e.charCode === 13) { // 요즘은 안씀 // event // } if (e.key === "Enter") { //event } }; onKeyPress={keyPressHandler } form에서 onSubmit이벤트로 처리하면 엔터 이벤트를 따로 만들 필요가 없이 처리된다 [React.js] history 객체 이용하기 props 안에는 history객체가 있고 그 안에는 goBack() 등이 있다. 따라서 props.history.goBack()을 통해 뒤로가기를 구현할 수 있다. 자세한것은 콘솔창에 props.history를 찍어보면 바로 알 수 있을 것이다. props로 받지 않고 아래의 예시와 같이 history객체를 바로 받아올 수도 있다. import React from "react"; function Comp({ history }) { return ( history.push('/menu')}>Menu으로 이동 ); } export default Comp; react-router-dom의 페이지 이동시 알림창을 띄우는 block을 이용해 보자 import React, { useEffect } from 'rea.. [React.js] http-proxy-middleware Cors이슈 npm i http-proxy-middleware -s const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function (app) { app.use( '/api', createProxyMiddleware({ target: 'http://localhost:5000', changeOrigin: true, }) ); }; 모듈을 만들어준다. [React.js] react-icons react-icons.github.io/react-icons/ React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa react-icons.github.io www.npmjs.com/package/react-icons npm install react-icons --sa [React.js] Ref https://ko.reactjs.org/docs/refs-and-the-dom.html Ref와 DOM – React A JavaScript library for building user interfaces ko.reactjs.org [React.js] reactstrap & bootstrap & sweetalert2 npm i reactstrap -s https://reactstrap.github.io/components/alerts/ reactstrap - Alerts Alerts This is a primary alert — check it out! This is a secondary alert — check it out! This is a success alert — check it out! This is a danger alert — check it out! This is a warning alert — check it out! This is a info alert — check it out! reactstrap.github.io npm i bootstrap i -s https://getbootstrap.co.. [React.js] 리액트에서 jquery npm i jquery --s 패키지 모듈을 설치한다. 아래는 입력값을 화면에 표시해주는 jquery를 활용한 간단한 예제이다 import React, { Component } from 'react'; import $ from 'jquery' export default class jquery extends Component { inputHandler = (e) => { const input_val = $('#input').val() $('#result').text(input_val) } render() { return ( this.inputHandler(e)}>입력값 알아오기 ); } 이전 1 2 3 4 5 6 다음