• React Router 라이브러리의 메서드
• Reac Router 의 주요컴포넌트인 <BrowserRouter>, <Routes>, <Route>, <Link> 컴포넌트 외에 이벤트 리스너 방식으로 뒤로가기, 메인으로, 로그인 여부 판단해서 이동 등의 역할을 할 수 있는 메서드

'+' 키워드 (typescript)

• string 을 number 로 바꿔줍니다.
  • +'1' === 1

atom (recoil)

• 리액트 상태관리 라이브러리 recoil 에서 'bubble' 과 같은 역할을 합니다.
• 따라 파일(atoms.tsx)를 만들어 주고 객체 형식으로 키값, 초기값을 주어 선언, 할당합니다.
  • export const minuteState = atom({ key: "minutes", default: 0 });
• useRecoilState() : useState() 와 비슷하지만 초기값으로 atoms.tsx 에 만들어준 변수를 임포트해서 사용합니다.
  • const [minutes, setMinutes] = useRecoilState(minuteState);

Selector (get)

• 리액트 상태관리 라이브러리에서 atom 을 이용해 상태관리 하는 데이터 (정확하지 않습니다, 느낌상)

• get 사용시 read-only

• 예시

  // atoms.tsx
  
  import { atom, selector } from "recoil";
  
  export const minuteState = atom({
    key: "minutes",
    default: 0,
  });
  
  export const hourSelector = selector({
    key: "hours",
    get: ({ get }) => {
      const minutes = get(minuteState);
      return minutes / 60;
    },
  });
  	
  // App.tsx
  
  import React from "react";
  import { useRecoilState, useRecoilValue } from "recoil";
  import { hourSelector, minuteState } from "./atoms";
  
  function App() {
    const [minutes, setMinutes] = useRecoilState(minuteState);
    const hours = useRecoilValue(hourSelector);
    const onMinutesChange = (event: React.FormEvent<HTMLInputElement>) => {
      setMinutes(+event.currentTarget.value); // + : string을 number 로 바꿔줌
    };
  
    return (
      <>
        <input
          value={minutes}
          onChange={onMinutesChange}
          type="number"
          placeholder="Minutes"
        />
        <input value={hours} type="number" placeholder="Hours" />
      </>
    );
  }
  
  export default App;

  ---

  참조

  코드스테이츠 프론트엔드 부트캠프
  노마드코더 React JS 마스터클래스