[TIL] 프리온보딩 10

React-router-dom

import { Routes, Route } from 'react-router-dom'

<Routes>
  <Route path='/' element={} />
  <Route path='todo' element={} />
  <Route path='weather' element={<Weather />} >
    <Route path=':city' element={<Weather />} />
  </Route>
  <Route path='*' element= {<div>404 ERROR</div>} />
</Routes>

• city는 parameter
• path= '*'은 주소를 잘못 들어갔을 때 보여주는 페이지

NavLink

리액트 웹의 현재 URL과 to가 가리키는 링크가 일치할 때! activeStyle과 activeClassName이 활성화된다

<NavLink to="/" activeStyle={style}>홈</NavLink>
<NavLink to="/about" activeClassName="active">About</NavLink>

setInterval, clearInterval

• setInterval()함수의 반환값을 변수에 할당하여 반복 시작
• clearInterval(변수)로 반복 중단

let interval = setInterval(callback, 1000);

const callback= () => {
	console.log('a');
}

clearInterval(interval);

usePrevious

usePrevious는 이전 렌더링에서의 값을 기억해두어야 하는 경우에 사용한다 현재 렌더링과 이전 렌더링의 값을 비교할 필요가 있을 때 사용!

• usage

function App() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);
  return (
    <div>
      <h1>
        Now: {count}, before: {prevCount}
      </h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

• hook

import { useEffect, useRef } from 'react';

function usePrevious(value) {
  const ref = useRef();

  useEffect(() => {
    ref.current = value;
  }, [value]); 

  return ref.current;
}

export default usePrevious;

classnames 라이브러리

• CSS 클래스를 조건부로 설정할 때 유용
• true값의 이름을 className으로 그대로 들어가게 하고 false값의 이름은 들어가지 않게 한다

import cn from 'classnames';

<div className= {cn('check', {checked})}>체크</div>

.check{

 &.checked{
 	color: red;
 }
}