React
-
React - Styled ComponentsReact/Style 2021. 6. 6. 20:18
Styled Components 모듈 설치 npm i styled-components // StyledButton.jsx import styled from 'styled-components'; const StyledButton = styled.button` background: transparent; border-radius: 3px; border: 2px solid palevioletred; color: palevioletred; margin: 0 1em; padding: 0.25em 1em; font-size: 20px; `; export default StyledButton; Styled Components 기능 확장 props 전달 Component에 props를 전달하여 스타일을 다르게 표현 s..
-
React - CSS ModulesReact/Style 2021. 6. 5. 23:21
https://create-react-app.dev/docs/adding-a-css-modules-stylesheet Adding a CSS Modules Stylesheet | Create React App Note: this feature is available with react-scripts@2.0.0 and higher. create-react-app.dev CSS Module CSS 클래스가 중첩되는 것을 방지 CSS 파일의 확장자를 .module.css 로 생성 CSS Module 적용 // App.js import logo from './logo.svg'; import styles from './App.module.css'; import Button from './components/But..
-
React - Style LoadersReact/Style 2021. 6. 5. 22:25
create-react-app 으로 프로젝트 생성 후 npm run eject 실행 config/webpack.config.js 확인 - import './App.css'; 에 해당하는 설정 // CSS (webpack.config.js) // "postcss" loader applies autoprefixer to our CSS. // "css" loader resolves paths in CSS and adds assets as dependencies. // "style" loader turns CSS into JS modules that inject tags. // In production, we use MiniCSSExtractPlugin to extract that CSS // to a file..
-
React - JS로 라우팅 이동하기React/Router 2021. 6. 5. 20:15
Router의 Props history 객체 사용 go, push, replace 등등.. // App.js function App() { return ( ); } // Login.jsx import LoginButton from '../components/LoginButton'; export default function Login(props) { return ( Login 페이지 입니다. ); } // LoginButton.jsx export default function LoginButton(props) { const login = () => { setTimeout(() => { // 페이지 이동 props.history.push('/'); }, 1000); }; return 로그인하기; } 하지만..
-
React- Router Link ComponentReact/Router 2021. 6. 5. 19:33
Link Component React에서 a태그 사용 시 원치 않은 결과를 가져옴 React App에서 페이지 이동 시 react-router-dom 에서 제공하는 Link 컴포넌트 사용 a 태그의 href 대신 Link 컴포넌트에서는 to props 사용 // App.js import Links from './components/Links'; function App() { return ( ); } // Links.jsx import { Link } from 'react-router-dom'; export default function Links() { return ( Home Profile Profile/1 About About?name=msko ); } NavLink Component import {..
-
React - Router Switch & NotFound ComponentReact/Router 2021. 6. 5. 19:21
Switch Component 여러 Route 중 순서대로 일치하는 하나만 노출시킴 exact를 뺄 수 있는 로직 구현 가능 가장 마지막에 어떠한 path도 일치하지 않으면 보여주는 Not Found 컴포넌트 설정 범위가 가장 작은 컴포넌트를 위에 배치 // App.js import { BrowserRouter, Route, Switch } from 'react-router-dom'; import Home from './pages/Home'; import About from './pages/About'; import Profile from './pages/Profile'; import NotFound from './pages/NotFound'; function App() { return ( ); }
-
React - Dynamic RoutingReact/Router 2021. 6. 5. 18:51
동적 라우팅 설정 1 Route path에 /:{key} key 값 가져오기 해당 컴포넌트에서 props.match.params.[key] // App.js function App() { return ( ); } // Profile.jsx export default function Profile(props) { const id = props.match.params.id; console.log(id, typeof id); return ( Profile 페이지입니다. {id && id는 {id}입니다.} ); } 동적 라우팅 설정 2 query string npm i query-string /about?name=msko 호출 시, 아래와 같이 처리 // About.jsx import queryString f..