[React] 컴포넌트의 external 속성

📌 컴포넌트 external 속성

: 부모 컴포넌트가 자식 컴포넌트에 전달하는 속성(props)

• 주로 링크 컴포넌트에 `isExternal` 속성 부여
  
  • 외부 링크와 내부 링크를 구분하기 위해 사용
    
    • 외부 링크
      isExternal 속성이 true로 설정된 경우 ➡︎ 외부 링크
      👉 target="_blank" 속성을 설정하여 링크가 새 탭에서 열리도록 할 수 있다.
      
      
    • 내부 링크
      isExternal 속성이 설정되지 않은 경우 ➡︎ 내부 링크
      👉 target="_self" 속성을 설정하여 현재 탭에서 열리도록 할 수 있다.

 

 

 

✅ 사용

 

1. 상위 컴포넌트에서 해당 컴포넌트에 isExternal 속성 설정

  <AppLink
    href="https://..."
    isExternal
  >
    Zustand
  </AppLink>{' '}

 

 

 

2. 설정 지정

• noopener
  : 새 탭에서 열린 페이지가 원래 페이지의 window.opener 속성에 접근하지 못하게 함
  ➡︎ 보안 취약점을 방지
• noreferrer
  : 새 탭에서 열린 페이지가 원래 페이지의 URL 정보를 참조하지 못하게 함 
  ➡︎ 개인정보 보호

  const externalProps = {};
  // 조건에 따라 동적으로 속성을 추가하는 데 사용

  if (isExternal) {
  // isExternal 속성이 true인 경우에만 링크를 외부에서 열 수 있음
  
    externalProps.target = '_blank'; // 링크를 새 탭에서 열도록 지정
    externalProps.rel = 'noreferrer noopener'; // 새 탭에서 링크를 열 때의 보안과 성능 문제를 방지
  }

 

 

 

 

예제) 링크 컴포넌트

// Home.jsx
function HomePage() {
  return (
    <section id="page">
      <div className="learn">
        <p>
          <AppLink
            href="https://zustand.docs.pmnd.rs/getting-started/introduction"
            isExternal 
          >
            Zustand
          </AppLink>
        </p>
      </div>
    </section>
  );
}

// AppLink.jsx
function AppLink({
  href,
  children,
  isExternal = false,
  className,
  ...restProps
}) {

  const externalProps = {};

  if (isExternal) {
    externalProps.target = '_blank';
    externalProps.rel = 'noreferrer noopener'; 
  }

  return (
    <a
      href={href}
      className={clsx('text-indigo-500 hover:text-accent', className)}
      {...externalProps}
      {...restProps}
      >
      {children}
    </a>
  );
}

export default memo(AppLink);