[KUIT] 7주차 워크북 보충

이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다.

---

1. Link와 useNavigate

a 태그와 마찬가지로 Link 컴포넌트도 지정한 경로로 바로 이동을 시켜준다.

• a 태그와 Link 차이
  • a : 외부 프로젝트로 이동하는 경우
  • Link : 프로젝트 내에서 페이지 전환하는 경우

가. Link

• 클릭 시 바로 이동하는 로직 구현 시에 사용
• ex) 상품 리스트에서 상세 페이지 이동 시
• Link를 사용한 경우에는 렌더링 된 컴포넌트의 state가 유지되어 SPA로 동작할 수 있음
• to라는 속성을 통해 이동할 경로를 지정한다는 점은 a 태그와 비슷하지만 실제로 해당 링크로 이동하는 대신 <Route>에 지정된 컴포넌트를 렌더링
• v6부터는 Link로 props를 전달하지 못함

나. useNavigate

• 페이지 전환 시 추가로 처리해야 하는 로직이 있을 경우 useNavigate 사용
• ex) 로그인 버튼 클릭 시
  • 회원가입 되어 있는 사용자 -> Main 페이지로 이동
  • 회원가입이 되어 있지 않은 사용자 -> SignUp 페이지로 이동

출처: https://velog.io/@seokkitdo/React-Link-useNavigate

출처: https://heycoding.tistory.com/72

 

<button onClick={() => { navigate(-1); }} >
이전 페이지로 이동하기
</button>

 

navigate 함수의 인자로 -1과 같은 숫자를 넣어서 이전 페이지로 이동시킬 수도 있다.

(음수는 이전 페이지, 양수를 넣으면 다음 페이지)

 

출처: https://velog.io/@reasonz/2022.07.13-리액트-라우터-useNavigate

 

주의

가끔 예전에 작성된 코드를 보면 useHistory를 발견할 수 있다.

useHistory Hook은 react-router 5버전까지 사용할 수 있다. 최근에 나온 6버전에서는 useNavigate로 변경되었다.

출처: https://phsun102.tistory.com/91

---

2. useNavigate로 props 전달을 할 수 있다?

useNavigate를 사용하여 다른 컴포넌트로 props를 전달할 수 있다.

navigate 함수는 첫 번째 매개변수로 이동할 경로를, 두 번째 매개변수로 상태 객체를 받는다.

이 상태 객체는 이동할 컴포넌트에서 useLocation 훅을 사용하여 접근할 수 있다.

예를 들어, 다음과 같이 useNavigate를 사용하여 ComponentB로 상태를 전달할 수 있다.

import { useNavigate } from 'react-router-dom';

function ComponentA(props) {
  const navigate = useNavigate();

  function handleClick() {
    // Navigate to the '/componentB' route with state
    navigate('/componentB', { state: { id: 1, name: 'Example' } });
  }

  return (
    <button onClick={handleClick}>Go to Component B</button>
  );
}

 

 

그리고 ComponentB에서는 다음과 같이 useLocation을 사용하여 전달된 상태에 접근할 수 있다.

import { useLocation } from 'react-router-dom';

function ComponentB() {
  const location = useLocation();

  return (
    <div>
      ID: {location.state.id}, Name: {location.state.name}
    </div>
  );
}

이렇게 하면 Component A에서 Component B로 상태를 전달할 수 있다.

---

3. 절대경로, 상대경로

절대경로

어떠한 Web Page 혹은 File이 가지고 있는 고유한 경로 또는 고유한 위치 (주소의 개념)

https://www.google.com

C:/users/document/untitled.jpg 등은 모두 절대 경로

절대 경로를 알고 있으면 해당 위치로 바로 이동하거나 해당 위치에 존재하는 File을 바로 실행 가능

상대경로

현재 위치한 곳을 '기준'으로 한 목적지의 위치

/ : 가장 최상의 Directory (root) ./ : 현재 Directory ../ : 상위 Directory

 

출처 : https://velog.io/@ppssww1202/절대경로-상대경로

 

 

Link에서의 활용

import { Link } from 'react-router-dom';
// 현재 URL의 경로 "/about"

// 절대 경로, 클릭시 "/apple"로 변경
<Link to="/apple">apple</Link>

// 상대 경로, 클릭시 "/about/apple"로 변경
<Link to="banana">banana</banana>

// 상대 경로, 클릭시 "/about/mango"로 변경
<Link to="./mango">mango</Link>

출처: https://velog.io/@kim98111/Routing

---

4. CSS-in-JS 라이브러리들

css-in-js의 동작 방식은 크게 runtime, zero-runtime 으로 나눠진다.

 

 

가. runtime

javascript runtime에서 필요한 CSS를 동적으로 만들어 적용한다.

예시: 대표적으로 잘 알려진 styled-component, emotion 이 있다.

css-loader가 필요 없다.

• css파일을 생성하지 않기에 webpack에서 css-loader가 필요 없다.

런타임 오버헤드가 발생할 수 있다.

• 런타임에서 동적으로 스타일을 생성하기에 스타일이 수시로 변경된다면...
• ex) 스크롤, 드래그 앤 드랍 관련 복잡한 에니메이션

https://velog.io/@bepyan/CSS-in-JS-라이브러리에-대한-고찰

나. zero-runtime

런타임에 css를 생성하지않으면서 페이지를 더 빨리 로드할 수 있다.

JS 번들에서 styles코드를 모두 실행되어야 페이지가 로드된다.

빌드 타임에 css를 생성해야기에 webpack 설정을 해야 한다.

• React CRA을 사용한다면 eject해서 webpack 설정해야 하는데 굉장히 번거롭다.
• runtime에서 css polyfill를 사용할 수 없어 브라우저 버전 이슈가 있을 수 있다.

대표적인 라이브러리: linaria, vanilla-extract

 

출처: https://velog.io/@bepyan/CSS-in-JS-라이브러리에-대한-고찰