React
-
GlobalStylesReact 2019. 11. 11. 07:32
Global 스타일 설정 Global 스타일 설정을 하는 이유 해당 사이트의 폰트를 설정하거나 SC(Style Component)를 설치하기위함 yarn add styled-reset SC을 이용해서 css를 초기화해서 0의 상태에서 시작 코드 먼저 글로벌하게쓰일 파일 하나를 생성 GlobalStyles.js import { createGlobalStyle } from "styled-components"; import reset from "styled-reset"; const globalStyles = createGlobalStyle` ${reset}; a{ text-decoration:none; color:inherit; } *{ box-sizing: border-box; } body{ font-fam..
-
리액트 withRouter를 활용한 현재 페이지 인식React 2019. 11. 11. 07:30
withRouter withRouter 로 컴포넌트를 감싸면 컴포넌트에 props안에 history,location등등의 오브젝트들이잇어서 이놈들을 이용해서 앞페이지 뒷페이지 왔다갔다 할수있음 현재 어떤 페이지에 있는지 체크할수있게됨 언제나 current = true임 import React from "react"; import { Link, withRouter } from "react-router-dom"; import styled from "styled-components"; // withRouter덕분에 어떤 컴포넌트와도 연결할 수 있게됨 const Header = styled.header` color: white; position: fixed; top: 0; left: 0; width: 100%;..
-
리액트 withRouter를 활용한 현재 페이지 인식React 2019. 11. 9. 20:43
withRouter withRouter 로 컴포넌트를 감싸면 컴포넌트에 props안에 history,location등등의 오브젝트들이잇어서 이놈들을 이용해서 앞페이지 뒷페이지 왔다갔다 할수있음 현재 어떤 페이지에 있는지 체크할수있게됨 언제나 current = true임 import React from "react"; import { Link, withRouter } from "react-router-dom"; import styled from "styled-components"; // withRouter덕분에 어떤 컴포넌트와도 연결할 수 있게됨 const Header = styled.header` color: white; position: fixed; top: 0; left: 0; width: 100%;..
-
React에서 CSS 작업React 2019. 11. 9. 15:42
짚고 넘어가기.. 리액트를 사용하는 가장 핵심은 어플리케이션 캡슐화다. 한 컴포넌트에 html, javascript, css등을 다 가지는.. 리액트에서 CSS 작업 방법 create-react-app 덕분에 Header.module.css 이런식의 css파일 이름 설정이 가능 전역으로 className을 사용하는게 아닌, 로컬로 사용하게끔 설정해준것임 (한 파일에 한css라고 생각) Header.css => Header.module.css import "./Header"; => import styles from "./Header.module.css"; css Import 형식에서 js Import 형식으로 전환 임의로 클래스이름이 정해짐 jsx에서 사용예시: import React from "react..
-
리액트 라우터 2부React 2019. 11. 9. 15:38
BrowserRouter HashRouter와는 다른 방식인 BrowserRouter이다. (URL에 # 표시가안됨) BrowserRouter는 컴포넌트를 동시에 가질수있다. import { BrowserRouter as Router, Route } from "react-router-dom"; exact를 사용하지 않을시 /tv와 /tv/popular 경로가 서로 매칭되어 둘이 같은 화면에 보여짐 /tv/popular 경로로 가면 tv와 popular이 동시에 나타남 import React from "react"; import { BrowserRouter as Router, Route } from "react-router-dom"; import Home from "Routes/Home"; import T..
-
리액트 라우터 1부React 2019. 11. 9. 15:35
리액트 라우터? React App에게 어떤 경로에서 시작하고 어떤경로로 어떻게 이동해야한다는걸 알려주기위해 사용(Ex. home에서 시작..) react-router-dom yarn add react-router-dom 코드 HashRouter를 사용 (url에 #이 표시된다는 단점이있다.) App.js Fragments는 내가 원하는 만큼 컴포넌트를 리턴할 수 있게 해줌 라우터는 원래 하나밖에 리턴이안됨! import React from "react"; import Router from "Components/Router"; function App() { return ( // Fragments ); } export default App; Router.js HashRouter은 react-router-do..
-
리액트 프로젝트 설정React 2019. 11. 9. 15:18
프로젝트 설정 create-react-app 설치 yarn global add create-react-app, create-react-app => 계속해서 업데이트를 해줘야한다는 단점이있어서 나온게 npx! npx yarn로 install yarn global add npx npx create-react-app npm으로 install npm i npx -g npx create-react-app npx는 npm 처럼 create-react-app같은 모듈을 사용할 수 있게 하는 작은 모듈이다. npx는 최신 버전의 create-react-app을 다운 받아서 실행하고, 끝나면 컴퓨터에서 삭제해줌 한마디로 사용하지 않는 오래된 버전의 것들을 내 컴퓨터에 저장하지 않게 해줌 Ex) npm i npx -g ,..