전화 연결 링크 (Callable Telephone Link)

소개

이 랩에서는 tel: 프로토콜을 사용하여 React 에서 전화 연결을 생성하는 방법을 배웁니다. 이 링크를 사용하면 사용자가 한 번의 클릭으로 장치에서 전화 번호로 직접 전화를 걸 수 있습니다. 이 랩이 끝나면 이 기능을 자체 React 애플리케이션에 구현하여 사용성과 접근성을 향상시킬 수 있습니다.

전화 연결 링크 (Callable Telephone Link)

index.html 및 script.js는 이미 VM 에 제공되었습니다. 일반적으로 script.js 및 style.css에만 코드를 추가하면 됩니다.

전화 번호로 전화를 거는 링크를 만들려면 Callto 컴포넌트를 사용하십시오. 이 컴포넌트는 적절한 href 속성을 가진 <a> 요소를 생성합니다. 링크를 렌더링하려면 phone prop 을 사용하여 전화 번호를 지정하고, children prop 을 사용하여 링크 텍스트를 지정합니다.

const Callto = ({ phone, children }) => {
  return <a href={`tel:${phone}`}>{children}</a>;
};

Callto 컴포넌트를 사용하려면 ReactDOM.render() 메서드를 호출하고 phone 및 children prop 이 설정된 Callto 요소를 전달합니다.

ReactDOM.render(
  <Callto phone="+302101234567">Call me!</Callto>,
  document.getElementById("root")
);

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 전화 연결 링크 (Callable Telephone Link) 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.