React (15) 썸네일형 리스트형 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 (5) 부가기능 history history - 객체 - 라우트로 사용된 컴포넌트에 match, location과 함께 전달되는 props 중 하나 - 컴포넌트 내에 구현하는 메서드에서 라우터 API 호출할 때 사용 eg. 특정 버튼을 눌렀을 때 뒤로가기, 로그인 후 화면 전환, 다른 페이지로의 이탈 막기 등등 1. HistorySample.js import React, { Component } from "react"; class HistorySample extends Component { handleGoBack = () => { this.props.history.goBack(); }; handleGoHome = () => { this.props.history.push("/"); }; componentDidMount() { //페이지.. react-router-dom (4) 서브 라우트 서브라우트란? 라우트 내부에 또 라우트를 정의하는 것. (라우트로 사용되고 있는 컴포넌트 내부에 라우트 컴포넌트를 또 사용하는 것) 앞 강의에서 App 컴포넌트에서 프로필 링크 2개가 있었음 -> 프로필 링크를 보여주는 Profiles라는 라우트 컴포넌트를 따로 만들고, 그 안에 Profile 컴포넌트를 서브 라우트로 사용하도록 1. Profiles.js 만들기 import React from "react"; import { Link, Route } from "react-router-dom"; import Profile from "./Profile"; const Profiles = () => { return ( User List yumcoding MyFav Choose an User} /> ); }; e.. react-router-dom (3) URL 파라미터와 쿼리 페이지 주소를 정의할 때, 가끔 유동적인 값을 전달해야 할 때도 있다. 파라미터와 쿼리 두가지로 나눌 수 있다. 파라미터 예시 :/profiles/yumcoding 쿼리 예시 :/about?icecream=true 유동적인 값을 사용해야 하는 상황에서 파라미터를 사용해야 할지 쿼리를 사용해야 할지 모르겠을 때? 정해진 규칙은 없다! 다만 일반적으로! 파라미터 -> 특정 아이디 혹은 이름을 사용해서 조회할 때 쿼리 -> 키워드 검색, 페이지에 필요한 옵션 전달할 때 URL 파라미터 /propfile/yumcoding, profile/webearbears와 같은 형식으로 뒷부분에 유동적인 username 값을 넣어줄 때, 해당 값을 props로 받아 와서 페이지에 띄우는 방법 우선, Profile 컴포넌트를.. react-router-dom (2) Route 하나에 여러 개의 path 설정 Route 하나에 여러 개의 path를 설정하는 것은 최신 버전의 리액트 라우터 v5부터 적용된 기능. 이전 버전에서 여러개의 path에 같은 컴포넌트를 보여주고 싶다면? const App = () => { return( ); } 이렇게 Route 컴포넌트를 두 번 사용하는 대신, path props에 배열을 주면 여러 경로에서 같은 컴포넌트를 보여줄 수 있다. const App = () => { return( ); } 출처 김민준, 리액트를 다루는 기술 개정판, 2019, 333-334 페이지 react-router-dom (1) 1. 라이브러리 설치 npm add react-router-dom 2. 프로젝트에 라우터 적용 index.js 파일에서 react-router-dom에 내장되어 있는 BrowserRouter라는 컴포넌트를 사용 BrowserRouter - 컴포넌트 - HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해준다. import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter } from "react-router-dom"; import "./index.css"; import App from "./App"; im.. useEffect에서 async/await 사용하고 싶다면? 컴포넌트가 화면에 보이는 시점에 API 요청하고 싶다면 useEffect를 사용 (컴포넌트가 처음 렌더링 되는 시점에 API 요청) 여기서 주의할 점 useEffect에 등록하는 함수에 async를 붙이면 안된다!!!! 왜냐하면, useEffect에서 반환해야 하는 값은 뒷정리 함수이기 때문 useEffect 내부에서 async/await를 사용하고 싶다면 함수 내부에 async 키워드가 붙은 또 다른 함수를 만들어서 사용해야 한다! const NewsList = () => { const [articles, setArticles] = useState(null); const [loading, setLoading] = useState(false); useEffect(() => { //async를 사용하는 함.. 이전 1 2 다음
