React7일차-Link와 NavLink

오늘은 <Link/>,<NavLink/>이거 두개를 알아보겠습니다.

우선 두개다 다른곳으로 연결해주는 것입니다. 그런데 왜 html에서 잘쓰느 <a>이걸 안쓰냐 할수있습니다.

그이유는 우리는 페이지가 한개로 보여주는 컴포넌트만 다르게 바꺼주면됩니다.

<a>링크는 누를때마다 로딩이되고 데이터를 다시받아옵니다.

하지만 <Link/>,<NavLink/>는 로딩이 필요 없습니다. 그만큼 속도가 빨라지겠죠 ㅎㅎ 

우선 <Link/>부터 시작해보겠습니다.

기존폴더에서 vscode열어 주시고

src/page폴더에 Links만들고

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

export default function Links() {
  return (
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
      <li>
        <Link to="/profile">Profile</Link>
      </li>
      <li>
        <Link to="/profile/1">Profile/1</Link>
      </li>
      <li>
        <Link to="/about?name=mark">About?name</Link>
      </li>
    </ul>
  );
}

넣어주세요

src/App.js로 가서 

import  모여있는곳에 import Links from "./page/Links"; 추가

<BroweserRouter>밑에<Links /> 추가

이제 저장하고 npm start하면 이렇게 제대로 나오는것을 볼수있습니다

클릭하면 따로 로딩없이 이동합니다.

<Link to="/">Home</Link> 자 이걸 알아봅시다.

우리가 html에서 쓰던거는 <a href-">이거였습니다. 여기서 a가 Link로 바뀌고 href 가 to로 바뀌었습니다.

즉 to에 있는 경로로 링크를 걸겠다 라는 의미입니다.그래서 클릭하면 경로 즉 주소가 바뀌고 창도 바뀌게 됩니다.

Link를 쓰기위해 import { Link } from "react-router-dom"; 이렇게 가져오고있습니다.

 

이제 <NavLink/>를 알아봅겠습니다.

이건 또 왜쓰냐 active를 위해 사용합니다. 즉 우리가 해당페이지를 키고 있으면 링크중에 해당하는 버튼에 다른처리를 하기위해 쓰고있습니다.

src/page폴더에 NavLinks만들고
import { NavLink } from "react-router-dom";
import { useLocation } from "react-router-dom";

export default function NavLinks() {
  const { search } = useLocation();
  console.log(search);
  return (
    <ul>
      <li>
        <NavLink
          style={({ isActive }) => ({ color: isActive ? "green" : "black" })}
          end
          to="/"
        >
          Home
        </NavLink>
      </li>
      <li>
        <NavLink
          style={({ isActive }) => ({
            color: isActive && search === "" ? "green" : "black",
          })}
          end
          to="/about"
        >
          About
        </NavLink>
      </li>
      <li>
        <NavLink
          style={({ isActive }) => ({ color: isActive ? "green" : "black" })}
          end
          to="/profile"
        >
          Profile
        </NavLink>
      </li>
      <li>
        <NavLink
          style={({ isActive }) => ({ color: isActive ? "green" : "black" })}
          end
          to="/profile/1"
        >
          Profile/1
        </NavLink>
      </li>
      <li>
        <NavLink
          style={({ isActive }) => ({
            color: isActive && search ? "green" : "black",
          })}
          end
          to="/about?name=mark"
        >
          About?name
        </NavLink>
      </li>
    </ul>
  );
}

를 안에 작성

src/App.js
import Links from "./page/NavLinks";
<Links />밑에<NavLinks />추가

이제 설명 시작하겠다.

end 이거 부터 설명하겠다. 

우선 end를 다지우고 npm start 하고 Profile/1 을 클릭해보자

이렇게 주소는 Profile/1인데 Profile도 녹색으로 바뀌었다. 이건 명백한 오류다 

이걸 고치기 위해 end즉 완전히 똑같은거 포함이 아니라 같은것만 active시켜주는게 end이다.

이제 다시 end를 넣어주자

 style={({ isActive }) => ({ color: isActive ? "green" : "black" })}이거를 한번 분해해서 확인 하자

style이거는 css를 정의하겠다는 의미이다. 따로 파일을 만들지 않고 간단한건 이렇게 <>안에서 해결하기도 한다.

({ isActive }) => ({ color: isActive ? "green" : "black" })

isActive가 true이면 ({ color: isActive ? "green" : "black" }이걸 실행한다는 의미이다.

isActive는 to랑 경로가 일치하면 true로 된다.

({ color: isActive ? "green" : "black" }

isActive 가 true이면color를 green 아니면 black으로 설정한다는 의미이다.

즉 조건?true일때 실행할거:flase일때실행할거 이렇게 된다.

한번에 해석하면 

css를 isActive가 참이면 색깔을 설정해주겠다 거기서또 isActive가 true이면 초록색 아니면 검은색으로 해주겠다.라는 의미이다 그래서 경로가 일치하면  글씨 색깔이 녹색이 되는거다.

 style={({ isActive }) => ({
            color: isActive && search ? "green" : "black",
          })}

 style={({ isActive }) => ({
            color: isActive && search === "" ? "green" : "black",
          })}

이거 두개를 설명하겠다 우선 위에 두개를

 style={({ isActive }) => ({ color: isActive ? "green" : "black" })}

이걸로 바꾸고 실행해서 어떤오류가 나오는지 보자

주소는 http://localhost:3000/about?name=mark 이런데 About도 활성화된다.

분명  end라서 경로가 확실히일치하는거만 나올텐데 라고 생각할수있다.

하지만 ?뒤에는 경로로 인식하지 않는것같다. 경로보다 전달되는 데이터라고 보면 될거같다.

이걸 어떻게 고쳐주냐 바로 아까 isActive를 true이냐false인지를따졌는데 이조건을 다른것으로 바꺼주면 된다.

style={({ isActive }) => ({
            color: isActive && search ? "green" : "black",
          })}

즉 바로전 게시글에서 useLocation() 을 이용해서 ?뒤에 전달되는 데이터를 뽑아낸적이 있다

즉 여기서 searc는 ?name=mark 이거이다

하지만 주소가 http://localhost:3000/about이거이면 search는 "" 이거이다 즉 빈공간이다. 없다는 뜻이다.

이걸이용 해서 조건을 걸어주겠다.

isActive && search이조건을 보면isActive가 true 그리고 search가 있으면 green 둘중 하나라도 안되면 black으로 하겠다는 뜻이다.

&&이거는 조건 모두를 다만족해야 된다는 and연산자이다.

Search는 왜 true이냐고 하면 0 false null undefine 빈칸 이런값 빼고는 다 true 이다. 즉 -1도 true가 된다.

color: isActive && search === "" ? "green" : "black",

즉 여기서는 경로도 같고 search값이 없어야지 green을 넣어주겠다는 의미가 된다.

그래서http://localhost:3000/about 이거일때는 search값이 없기때문에 녹색으로 나오고

만약http://localhost:3000/about?name=mark 이거이면 search값이 "" 빈칸 즉 false이기때문에 검은색이 나온다.

이렇게 활용해서 해당 주소와 일치할때만 녹색이 나오게 설정해줬다.

다른 코드를 짤때도 이렇게 조건을 응용해서 짜는 능력이 중요하다.

 

오늘은 여기까지 하겠다. 모두들 화이팅이다 ㅎㅎ 쉬지 않고 열심히 움직이자