TIL | CSS ( 100vh vs 100% ...), React ( Link vs useNavigate ... )

23.07.20

오늘은 팀프로젝트 css를 하다가 새로 배운 내용 2가지가 있음

1. 100vh vs 100%

css를 하다보면 px, vh, %, rem 등 다양한 단위? 들이 있는데 잘 몰라서 항상 px과 %만 쓰곤 했음

오늘은 페이지 전체 배경색이 특정 색으로 나오게하려고 제일 상위 요소에 background-color를 입히고 그 아래 요소에는 height값을 아래처럼 주었음

heigth: 100%

하지만 내가 원하는 상태로 변하지 않았음
그러다 팀원분의 100vh로 값을 변경해보라는 말씀에 %와 vh의 차이가 궁금해졌다

그리고 엄청난 걸 깨달았다 !!!!

1. %

• parent element에 따른 %

2. vh

• viewport height (전체 화면 기준으로 높이)

=> 즉, height: 100%는 부모 요소에 의존하므로 부모 요소에도 height이 설정되어 있어야 의미가 있지만, height: 100vh는 부모 요소에 의존하지 않고 전체 화면 기준이므로 상관없이 사용 가능함 !!!

참고로

3. vw

• viewport width (전체 화면 기준으로 너비)

---

2. Link vs useNavigate

참고한 자료

react-router 에서 컴포넌트 ? 또는 페이지 이동에는 주로 Link와 useNavigate를 사용함

역할은 비슷하지만 언제 사용하면 더 효율적인지 알아봤다

참고로 둘 다 npm install react-router-dom or yarn add react-router-dom 라이브러리 설치가 필요함

1. Link

• <a> 태그
• 클릭 시 바로 이동하는 로직 구현 시 사용
  ex) 상품 리스트에서 상세 페이지 이동 시

<Link to="/">홈으로 돌아가기</Link>

2. useNavigate (hook)

• <a> 태그를 만들지 않고, 코드로 페이지 이동
• 페이지 이동 시 추가로 처리해야할 로직이 필요할 경우 작성 가능
  ex) 로그인 버튼 클릭 시
  회원가입 되어 있는 사용자 -> Main 페이지로 이동
  회원가입이 되어 있지 않은 사용자 -> SignUp 페이지로 이동

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

const navigate = useNavigate();

onClick={ () => { alert("메인으로 이동합니다.");
                  navigate("/"); }}

3. Navigate

• URL 접근 시 다른 URL로 가도록 만드는 것 : 리다이렉트
• Navigate 컴포넌트는 리다이렉트를 위한 컴포넌트
  ex) 구매페이지로 이동하려고 했는데, 로그인이 되어 있지 않아 로그인 페이지로 강제로 이동시키는 경우

<Navigate to="<이동하려는 페이지>" />;

그렇다 이제 느낌은 알겠다 ... 그러나 왜 아래처럼 되는진 모르겠다 모르겠다는 건 아직 이 개념을 이해하지 못했다는 거겠지 ...

<Link to="https://github.com/huizhenz">
	<button>깃허브</button>
</Link>

위처럼 Link를 사용하면 저 주소로 잘 이동함

<Navigate to="https://github.com/huizhenz">
	<button>깃허브</button>
</Navigate>

근데 이렇게 Navigate 컴포넌트를 사용하면 기존 도메인과 저 도메인이 합쳐져서 이동이 되지 않음 ...

=> 아 근데 지금 쓰다보면서 깨달은 건데 Link는 <a> 태그라 하이퍼링크 역할을 하기 때문에 아예 페이지 이동이 되는데 Navigate는 기본적으로 컴포넌트이면서 react-router-dom 라이브러리이기 때문에 컴포넌트 내에서만 페이지 가능해서 그런건가 ...?

=> 맞다고 한다 !!! Navigate 컴포넌트는 절대 경로를 지원하지 않고 절대 경로를 사용하려면 Link 컴포넌트를 사용하면 된다고 함 ~

2-1. Link 사용시 생기는 밑줄

Link를 text에 걸다보면 Link는 <a> 태그의 역할을 하기 때문에 text에 밑줄이 생김
그래서 밑줄을 없애려고 text-decoration: none을 해보았지만 적용되지 않았다

알고보니 Link는 컴포넌트라 css 셀렉터(= 선택자)로 변경이 되지 않는다고 한다

그래서 결국엔 Link를 text에 걸지않고 button에 걸고 button의 디폴트 스타일들을 없애주는 식으로 함

background-color : transparent
border : none

근데 사실 왜 text에 건 Link는 css가 먹히지 않는데 button에 건 Link는 먹히는지 모르겠다 ...🫠
찾아보고 써봐야겠다 ...