[TIL]21.06.08

👨‍💻 오늘 공부한 것

1. 리액트에서..
   import {BrowserRouter as Router} from 'react-router-dom' 으로 BrowserRouter 대신 Router로 쓸 수 있다는 걸 배웠다.

2. useHistory

다음과 같이 history가 path를 push받고 기억해 뒤로가기 기능을 쉽게 구현할 수 있다.

import { useHistory, BrowserRouter, Switch, Route, Link } from 'react-router-dom';

const App = () => {
	let history = useHistory('/');
  	
  	const handleHistory = () =>{
        if(e.target.className === 'far fa-comment-dots'){
      		history.push('/');
    	}else if(e.target.className === 'far fa-question-circle'){
      		history.push('/about');
    	}else if(e.target.className === 'far fa-user'){
      		history.push('/mypage');
    }
    }
  	
  <BrowserRouter>
    <Link onClick={handleHistory} to="/"><i className="far fa-comment-dots"></i></Link>
    <Link onClick={handleHistory} to="/about"><i className="far fa-question-circle"></i></Link>
    <Link onClick={handleHistory} to="/mypage"><i className="far fa-user"></i></Link>
    <Switch>
      <Route exact path="/"><Home /></Route>
      <Route path="/about"><About /></Route>
      <Route path="/mypage"><MyPage /></Route>
    </Switch>
              
  </BrowserRouter>
  
}

3. useParams
   http://localhost:3000/about/:id
   about이란 path뒤에 id값에 따라 렌더링을 다르게 하고싶을 때 useParams를 사용하면 편리하게 조건부렌더링이 가능해진다.

const {picture, username, id, content} = tweet;

만약 하위컴포넌트에서 tweet이란 이름으로 객체형태의 props을 받아온다면 이런식으로 사용 가능하다. picture, username, id, content이 것들을 변수이름처럼, 변수처럼 사용가능하다. 이렇게 하지 않으면, {tweet.id} 이런식으로 사용해야 할 것이다.

---

오늘 나름 열심히 했던 것 같다. 삽질을 수도없이 한걸보면... ㅎㅎ
하지만 나보다 잘하는 사람들이 나보다 더 컴퓨터앞에 오래 앉아있는 걸 보고 반성하게됐다. 아무리못해도 그들보다는 더 많이 해야할 것이다.