React Native "텍스트 문자열은 <Text> 컴포넌트 내에서 렌더링되어야 합니다" 오류 해결 방법

React Native로 앱을 개발하다 보면 "Text strings must be rendered within a <Text> component"(텍스트 문자열은 <Text> 컴포넌트 내에서 렌더링되어야 합니다)라는 오류를 만나게 되는 경우가 있습니다.

이 오류는 주로 JSX 코드 작성 시 사소한 실수에서 비롯됩니다. 아래는 실제로 이 오류를 발생시키는 코드 예제입니다.

오류가 발생하는 코드 예제

import React from "react";
import { Image , Text, View, StyleSheet } from "react-native";
export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Image
                    style={styles.stretch}
                    source={{
                        uri:
                        'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png ',
                    }}
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        paddingTop: 50,
        paddingLeft: 50,
    },
    stretch: {
        width: 200,
        height: 200,
        resizeMode: 'stretch',
    },
});

이 코드를 실행하면 화면에 다음과 같은 오류 메시지가 표시됩니다.

React Native 텍스트 문자열은 Text 컴포넌트 내에서 렌더링되어야 합니다 오류 해결 방법

오류의 주요 원인

이 오류는 주로 다음 두 가지 이유로 발생합니다. 코딩할 때 이러한 실수를 피하도록 주의해야 합니다.

1. 잘못된 들여쓰기

첫 번째 원인은 잘못된 들여쓰기입니다. 각 컴포넌트를 올바르게 들여쓰기하는 것이 매우 중요합니다. 특히 자식 요소들은 반드시 부모 컴포넌트 내부에서 올바른 들여쓰기 수준을 유지해야 합니다. 들여쓰기가 어긋나면 JSX 파서가 태그의 계층 구조를 제대로 인식하지 못해 오류가 발생할 수 있습니다.

2. 컴포넌트 끝에 남아 있는 불필요한 공백

두 번째 원인은 각 컴포넌트 끝에 남겨진 공백입니다. 코드 끝부분의 공백을 제거한 후 다시 컴파일하면 정상적으로 동작합니다. 특히 다른 소스에서 코드를 복사하여 붙여넣을 때 이러한 문제가 자주 발생하므로 각별히 주의해야 합니다. 복사한 코드에는 눈에 보이지 않는 공백이나 줄바꿈 문자가 포함되어 있는 경우가 많습니다.

수정된 코드

이제 위 문제점들을 수정한 코드를 살펴보고 출력 결과를 확인해 보겠습니다.

import React from "react";
import { Image , Text, View, StyleSheet } from "react-native";
export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Image style={styles.stretch} source={{uri:
                    'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'
                }} />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        paddingTop: 50,
        paddingLeft: 50,
    },
    stretch: {
        width: 200,
        height: 200,
        resizeMode: 'stretch',
    }
});

실행 결과

수정 후에는 더 이상 오류가 발생하지 않고 이미지가 정상적으로 화면에 표시됩니다.