link2 [Next.js] Link 컴포넌트에 속성 설정 방법(className, target, rel 등) # Next.js의 Link 태그에 속성 설정 방법 Next.js 에서 태그는 새로고침없이 페이지를 이동하는 client-side navigation을 위해 사용된다. 만약 컴포넌트에 className, target, rel 등의 속성을 주고 싶다면, 컴포넌트에 직접 주는게 아니라, 태그 하위에 태그를 삽입하여 속성을 설정 주면 된다. import Link from 'next/link' export default function LinkAttr() { return ( // Link 태그 내부에 a태그를 삽입하고, a태그에 속성을 설정한다. 링크 ) } * 참고 : rel 속성으로 noopener noreferrer 를 설정해줘야 보안상 유리하다. 참고로 공식문서의 원문을 첨부한다. If you need .. 2022. 8. 21. [Next.js] Link 라우팅 : 현재경로 active CSS 스타일링 React 에서는 네비게이션 라우팅 구현시, NavLink 를 사용하면, 해당 네비 메뉴가 선택됐을 때 자동으로 className에 active가 생겨서 선택된 네비 메뉴에만 스타일을 주기가 편했다. 하지만 Next.js 에서 Link 를 사용하면, 이 기능이 제공되지 않는다. 따라서 네비 메뉴가 선택되면, 직접 className에 active 값을 추가해줘야 한다. # Next.js에서 Link 선택 시, Active 효과 부여 방법 => 현재 경로가 선택된 메뉴와 동일할 때만 class에 active를 설정해주고 스타일링한다. 1. 컴포넌트 JS 코드 1) useRouter() 를 통해 현재 경로를 취득한다. 2) 현재 경로가 선택된 네비 메뉴와 동일할 때만 className에 active를 설정한다.. 2022. 8. 14. 이전 1 다음
