path veriable , query string , navigate REACT

path veriable : 변수에 경로를 사용

아이디로 정의를 처음에 해서

아래 Diary 컴포넌트에서도 비구조화할당을 id로 함.

query string : url과 함께 데이터 전달 웹페이지에 데이터를 전달하는 가장 간단한 방법 

? 뒤에 커리는 페이지에 영향을 끼치지 않음 

비구조화 할당 첫번째 배열 인자는 꺼내서 사용 가능.

 

  const [searchParams, setSearchParmas] = useSearchParams();

  const id = searchParams.get('id');
  console.log('id : ', id);

 

뒤에 set함수로  변경 기능도 사용할 수 있음.

<button onClick={() => setSearchParmas({ abc: 'efg' })}>
        파람 바꿔버리기
      </button>

 

navigate 는 함수형으로 페이지 이동 기능을 시킬 수 있다.

함수형이면 기능적인 페이지 이동도 가능하다 . 

단순 라우팅으로 이동이 아닌 

함수를 활용해 강제로 이동 시킬수 있음.

const navigate = useNavigate();

<button onClick={() => navigate('/home')}>홈으로 가기</button>
      <button onClick={() => navigate(-1)}>뒤로가기</button>

-1은 이전 페이지로 이동 시킴