220325 TIL

How to deal with history in React-router-dom v6

Instead of useHistory() function or history props contained in <Route /> component in v5, we use useNavigate() function to move page inside an event.

import { useNavigate } from "react-router";

export default function Login() {
  const navigate = useNavigate();
  function login() {
    setTimeout(() => {
      navigate("/");
    }, 1000);
  }

  return (
    <div>
      <h2>Login 페이지입니다.</h2>
      <button onClick={login}>로그인하기</button>
    </div>
  );
}

Ant Design

install by npm i antd

From ant design package, we can use lots of components or icons which are styled already.

hooks

useMemo() , useRef() , useCallback() hooks are used to keep the state without change in functional components. Since state components have render() function, they does not have to manage unchanging states. However, functional components do not have such function that deals with rendering itself, so these three hooks exist to limit the change of states.

Change parent components from child

1. <A /> 에 함수를 만들고, 그 함수 안에 state를 변경하도록 구현, 그 변경으로 인해 렌더링 되는 어떤 내용을 변경.
2. 만들어진 함수를 props에 담아서, <B />로 전달
3. <B />의 props의 함수를 <C />의 props로 전달
4. <C />의 props의 함수를 <D />의 props로 전달
5. <D />의 props의 함수를 <E />의 props로 전달, <E />에서 클릭하면 props로 받은 함수를 실행