프론트엔드 개발/라이브러리

styled components 사용 방법

소개 css를 컴포넌트 처럼 선언하여 사용할 수 있다. 리액트 컴포넌트 내부에서 작성하여 매우 빠르게 스타일을 적용시킬 수 있다. Local 하게 사용하는 방법과 Global 하게 사용하는 방법 두가지가 있다. 설치 # npm i styled-components 사용법 1. Local 하게 사용하는 방식 아래와 같이 CSS 스타일을 컴포넌트 처럼 사용할 수 있다. // 컴포넌트.js import styled from "styled-components" const Header = styled.header``; const List = styled.ul` display: flex; &:hover { background-color: blue; } `; const 컴포넌트 = () => { return ... }..

React 모듈 - react-route-dom (라우터 기능)

개요 react-router-dom 은 새로고침 없이 URL 주소에 따라 다른 화면을 렌더링해주는 패키지이다. Quick Start : https://reactrouter.com/web/guides/quick-start 설치 npm i react-router-dom 사용법 import {HashRouter, Route} from "react-router-dom"; Router 내부에 여러 Route들을 포함하는 구조이다. (Hash or Browser) Router는 History API를 이용하여 새로고침 없이 주소 변경이 가능하게 해준다. Route는 path 속성에 url를 지정하고, 그 경로에 접근시 렌더링할 구문 또는 컴포넌트를 지정할 수 있다. path="경로" component={경로접근시 ..

리액트 라이브러리 gh-pages 깃 페이지 배포하기

터미널에서 레포지토리 이동 npm i gh-pages 수행 package.json에 아래 내용추가 ※ deploy를 수행하면 predeploy가 자동으로 수행되는 방식임. "scripts": { "start": "react-scripts start", "build": "react-scripts build", "deploy" : "gh-pages -d build", "predeploy" : "npm run build" }, ... "homepage" : "https://깃아이디.github.io/깃레포지토지명/" npm run deploy 수행 > npm run build > react-scripts build Creating an optimized production build... Compiled su..