[React Native] 웹뷰(WebView)로 위키피디아 창 띄워서 검색기능 제공하기

아래 사진과 같이 작가이름을 클릭할 수 있다는 것을 사용자가 ui로 알아차릴 수 있도록 돋보기 이모티콘을 추가해주고,

작가 이름을 클릭했을 때, 작가 정보에 관련한 위키피디아 검색이 가능할 경우 웹뷰로 창을 띄워 정보를 제공해주는 기능을 추가하고자 했다!

작가이름을 클릭했을 경우(돋보기 포함), 아래와 같은 위키피디아 창이 열리도록 구현하였다.

1. 패키지 설치 및 import문

npm install react-native-webview
import { Modal } from 'react-native';
import { WebView } from 'react-native-webview';

2. 상태관리 변수 추가

const [showWiki, setShowWiki] = useState(false);
const [wikiUrl, setWikiUrl] = useState('');

3. 작가검색 함수

• 작가 이름을 받아서 Wikipedia URL을 만들고, 모달을 여는 함수
• encodeURIComponent(): URL에 안전하게 사용할 수 있도록 특수문자를 변환

(실행 과정!)

ex) searchAuthor("작가이름") 실행

• URL 생성: https://en.wikipedia.org/wiki/작가이름
• setWikiUrl(url) → wikiUrl state에 저장
• setShowWiki(true) → showWiki state를 true로 변경 → 모달이 보임!

3. UI 버튼을 통한 함수실행

onPress시(작가버튼 눌렀을 때)에 => 현재 저자정보 book.author를 searchAuthor함수로 전달

4. Modal 창 구현

코드 부분 설명은 아래와 같으며!

- Modal: React Native의 전체 화면 팝업 컴포넌트

- visible={showWiki}: showWiki가 true면 보이고, false면 안 보임

- WebView: 앱 안에서 웹페이지를 보여주는 컴포넌트

- source={{ uri: wikiUrl }}: wikiUrl에 저장된 주소의 웹페이지를 표시

 

• showWiki가 false → 모달 안 보임 (평소 상태)
• 작가 이름 클릭 → setShowWiki(true) → 모달이 나타남!
• X 버튼 클릭 → setShowWiki(false) → 모달이 사라짐!

이러한 로직으로 모달창이 열리고 닫히는 것으로 설계하였다.

마지막으로 styles ui 구현 부분인데,

modalContainer: {
  flex: 1,                    // 전체 화면 차지
  backgroundColor: '#fff',    // 흰색 배경
},
modalHeader: {
  backgroundColor: '#111',    // 검은색 헤더
  paddingTop: 50,            // 상단 여백 (상태바 공간)
  paddingBottom: 10,
  paddingHorizontal: 20,
  alignItems: 'flex-end',    // X 버튼을 오른쪽 정렬
},
closeButton: {
  width: 40,
  height: 40,
  borderRadius: 20,          // 동그란 버튼 (40/2 = 20)
  backgroundColor: '#333',   // 어두운 회색
  justifyContent: 'center',  // 수직 중앙 정렬
  alignItems: 'center',      // 수평 중앙 정렬
},
closeButtonText: {
  color: '#fff',
  fontSize: 24,
  fontWeight: 'bold',
},
webview: {
  flex: 1,                   // 남은 공간 전부 차지
},

 

저는 윗 부분에 추후 광고 추가예정이 있어 남겨두는 방식으로 수정해보려고 합니다!

참고만 해주세요!

 

이상 구현계획 때에는 되게 어려울 것 같았던 부분을

웹뷰와 모달 팝업을 활용해 간단하게

구현해보았습니다!