분류 전체보기 (207) 썸네일형 리스트형 React 이벤트 처리하기 보호되어 있는 글입니다. 웹팩이란 무엇인가 보호되어 있는 글입니다. 노드 패키지 매니저란 무엇인가 보호되어 있는 글입니다. VirtualDOM - 게임 엔진 원리를 도입한 개발자들 보호되어 있는 글입니다. 불필요한 http request를 잡아랏! (feat. Component Life Cycle) ✔ 현재 상황 Blog 컴포넌트가 mount 되면 componentDidMount에서 http request를 보낸다. -> 받아온 data를 state에 넣어준다. -> state에서 data를 가져와 map 메소드를 이용해 Post 컴포넌트들을 만들어준다. Blog.js import React, { Component, Fragment } from "react"; import Post from "../Post/Post"; import FullPost from "../../containers/FullPost/FullPost"; import axios from "axios"; import "./Blog.css"; class Blog extends Component { state = { error: fals.. react-router-dom (8) 부가기능 NavLink NavLink - Link와 비슷 - 현재 경로와 Link에서 사용하는 경로가 일치하는 경우 특정 스타일 혹은 CSS 클래스를 적용할 수 있는 컴포넌트 NavLink에서 링크가 활성화 되었을 때, 스타일을 적용할 때는 activeStyle 값을 CSS 클래스를 적용할 때는 activeClassName 값을 props로 넣어 주면 된다. Profiles에서 사용하고 있는 컴포넌트에서 Link 대신 NavLink를 사용 현재 선택되어 있는 경우 검정색 배경에 흰색 글씨 적용 Profiles.js import React from "react"; import { NavLink, Route } from "react-router-dom"; import Profile from "./Profile"; const Pro.. react-router-dom (7) 부가기능 Switch Switch - 컴포넌트 - 여러 Route를 감싸서 그중 일치하는 단 하나의 라우트만 렌더링 시켜준다. - 모든 규칙과 일치하지 않을 때 보여 줄 Not Found 페이지도 구현 가능!!!!! App.js import React from "react"; import { Route, Link, Switch } from "react-router-dom"; import Home from "./component/Home"; import About from "./component/About"; import Profiles from "./component/Profiles"; import HistorySample from "./component/HistroySample"; import "./App.css"; con.. react-router-dom (6) 부가기능 withRouter withRouter - HoC(Higer-order Component) - 라우트로 사용된 컴포넌트가 아니어도 match, location, history 객체에 접근 가능 1. WithRouterSample.js import React from "react"; import { withRouter } from "react-router-dom"; const WithRouterSample = ({ location, match, history }) => { return ( location match history.push("/")}>Go Home ); }; export default withRouter(WithRouterSample); export할 때, withRouter 함수로 감싸주기. (JSON.str.. 이전 1 2 3 4 5 6 7 ··· 26 다음
