📌 문제 상황: SVG의 동적 수정 필요

일반적인 React Native 프로젝트에서는 SVG 파일을 import하여 컴포넌트로 사용

import Logo from '../../assets/logo.svg';

export default function App() {
    return <Logo width={100} height={100} />;
}

요구사항: SVG(지도)에서 눌린 부분의 색이 변하게 만들어 주세요

• SVG는 빌드 시점에서 리액트 컴포넌트화되므로 런타임에 SVG 내부값을 변경하는 방식이 제한적

👉 따라서, SVG 데이터를 동적으로 수정하려면 XML 문자열을 직접 불러와 렌더링해야 함

📌 SVG XML을 문자열로 불러와 렌더링하는 방식

import { SvgXml } from 'react-native-svg';
import svgString from '../../assets/images/1.js'; 
// SVG 문자열이 export 되어있어야 합니다.

export default function App() {
    return (
        <View style={styles.container}>
            <SvgXml xml={svgString} width="400" height="400" />
        </View>
    );
}

react-native-svg의 SvgXml 컴포넌트로 스트링 형식으로 임포트 된 Svg를 렌더

• SVG 내부 데이터를 문자열로 조작 가능 (ex. 색상, 크기 변경)

• SVG 컴포넌트 대신 xml을 직접 렌더링 → 동적 수정 가능