Links

Links (링크)

테마 색상과 타이포그래피 스타일로 앵커 요소를 쉽게 커스터마이즈할 수 있게 해 주는 Link 컴포넌트에 대해 알아봅니다.

출처: 문서

본문

Link 컴포넌트는 테마 색상과 타이포그래피 스타일을 사용해 앵커 요소를 쉽게 커스터마이즈할 수 있게 해 줍니다.

기본 링크 (Basic links)

Link 컴포넌트는 Typography 컴포넌트를 기반으로 만들어져 있으므로, 그 props를 사용할 수 있어요.

import * as React from 'react';
import Box from '@mui/material/Box';
import Link from '@mui/material/Link';

const preventDefault = (event: React.SyntheticEvent) => event.preventDefault();

export default function Links() {
  return (
    <Box
      sx={{
        typography: 'body1',
        '& > :not(style) ~ :not(style)': {
          ml: 2,
        },
      }}
      onClick={preventDefault}
    >
      <Link href="#">Link</Link>
      <Link href="#" color="inherit">
        {'color="inherit"'}
      </Link>
      <Link href="#" variant="body2">
        {'variant="body2"'}
      </Link>
    </Box>
  );
}

다만 Link 컴포넌트는 Typography 컴포넌트와 몇 가지 다른 기본 props를 가집니다.

color="primary" – 링크가 눈에 띄어야 하기 때문입니다.
variant="inherit" – 링크는 대부분 Typography 컴포넌트의 자식으로 사용되기 때문이죠.

밑줄 (Underline)

underline prop으로 밑줄 동작을 설정할 수 있습니다. 기본값은 always입니다.

import * as React from 'react';
import Box from '@mui/material/Box';
import Link from '@mui/material/Link';

const preventDefault = (event: React.SyntheticEvent) => event.preventDefault();

export default function UnderlineLink() {
  return (
    <Box
      sx={{
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'center',
        typography: 'body1',
        '& > :not(style) ~ :not(style)': {
          ml: 2,
        },
      }}
      onClick={preventDefault}
    >
      <Link href="#" underline="none">
        {'underline="none"'}
      </Link>
      <Link href="#" underline="hover">
        {'underline="hover"'}
      </Link>
      <Link href="#" underline="always">
        {'underline="always"'}
      </Link>
    </Box>
  );
}

서드파티 라우팅 라이브러리 (Third-party routing library)

흔한 사용 사례 중 하나는 서버로 HTTP 왕복을 하지 않고 클라이언트에서만 내비게이션을 수행하는 것입니다. Link 컴포넌트는 이 사용 사례를 처리하기 위해 component prop을 제공합니다. 여기에 더 자세한 가이드가 있습니다.

접근성 (Accessibility)

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/link/)

링크의 콘텐츠를 제공할 때 "click here"나 "go to" 같은 일반적인 설명은 피하세요. 대신 구체적인 설명을 사용해요.
최고의 사용자 경험을 위해, 링크는 페이지의 텍스트에서 두드러져야 합니다. 예를 들어 기본 underline="always" 동작을 유지할 수 있어요.
링크에 의미 있는 href가 없다면, <button> 요소를 사용해 렌더링해야 합니다. 아래 데모는 <button>으로 링크를 올바르게 만드는 방법을 보여줍니다.

import Link from '@mui/material/Link';

export default function ButtonLink() {
  return (
    <Link
      component="button"
      variant="body2"
      onClick={() => {
        console.info("I'm a button.");
      }}
    >
      Button Link
    </Link>
  );
}

키보드 접근성 (Keyboard accessibility)

사용자가 Tab 키를 누르면 상호작용 요소가 일관된 순서로 포커스를 받아야 합니다.
사용자는 Enter 키를 눌러 링크를 열 수 있어야 합니다.

스크린 리더 접근성 (Screen reader accessibility)

링크가 포커스를 받으면, 스크린 리더는 설명적인 링크 이름을 발표해야 합니다. 링크가 새 창이나 새 브라우저 탭에서 열린다면, 스크린 리더 사용자에게 알리기 위해 aria-label을 추가하세요—예를 들어 _"To learn more, visit the About page which opens in a new window."_처럼요.

Link API

Demos

이 React 컴포넌트의 사용 예시와 자세한 내용은 컴포넌트 데모 페이지에서 확인할 수 있어요.

Import

import Link from '@mui/material/Link';
// or
import { Link } from '@mui/material';

Props

Name	Type	Default	Required	Description
children	`node`	-	No
classes	`object`	-	No	Override or extend the styles applied to the component.
color	`'primary' \| 'secondary' \| 'success' \| 'error' \| 'info' \| 'warning' \| 'textPrimary' \| 'textSecondary' \| 'textDisabled' \| string`	`'primary'`	No
component	`element type`	-	No
sx	`Array<func \| object \| bool> \| func \| object`	-	No	The system prop that allows defining system overrides as well as additional CSS styles.
TypographyClasses	`object`	-	No
underline	`'always' \| 'hover' \| 'none'`	`'always'`	No
variant	`'body1' \| 'body2' \| 'button' \| 'caption' \| 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'inherit' \| 'overline' \| 'subtitle1' \| 'subtitle2' \| string`	`'inherit'`	No

참고: ref는 루트 요소 (HTMLAnchorElement).

그 외에 제공된 props는 루트 요소 (Typography).

Inheritance

위에서 명시적으로 다루진 않았지만, Typography 컴포넌트의 props도 Link에서 사용할 수 있어요.

Theme default props

MuiLink을 사용하면 테마에서 이 컴포넌트의 기본 props를 바꿀 수 있어요.

CSS

Rule name

Global class	Rule name	Description
-	button	Styles applied to the root element if `component="button"`.
`.Mui-focusVisible`	-	State class applied to the root element if the link is keyboard focused.
-	root	Styles applied to the root element.
-	underlineAlways	Styles applied to the root element if `underline="always"`.
-	underlineHover	Styles applied to the root element if `underline="hover"`.
-	underlineNone	Styles applied to the root element if `underline="none"`.

Source code

이 페이지에서 원하는 정보를 찾지 못했다면, 더 자세한 내용은 컴포넌트 구현을 살펴보는 것도 좋아요.

/packages/mui-material/src/Link/Link.js