리액트 네이티브(React Native)의 상태(State)란 무엇일까?

리액트 네이티브에서 상태(State)는 컴포넌트가 다루는 데이터가 저장되는 곳입니다. 화면에 표시되는 값이 사용자의 동작에 따라 바뀌어야 할 때, 그 값을 보관하고 관리하는 역할을 합니다.

상태를 설계할 때는 항상 가능한 한 단순하게 유지하는 것이 좋습니다. 또한 상태를 가지는(stateful) 컴포넌트의 수를 최소화해야 합니다. 예를 들어 열 개의 컴포넌트가 동일한 상태 데이터를 필요로 한다면, 각각 상태를 만드는 대신 하나의 컨테이너(container) 컴포넌트가 상태를 보유하고 나머지 컴포넌트들에게 전달하는 구조가 효율적입니다.

예제 1 — 버튼 클릭 시 ON/OFF 전환

사용자가 버튼을 누를 때마다 버튼 제목이 ON과 OFF 사이에서 전환되는 예제입니다.

상태는 아래와 같이 생성자(constructor) 안에서 초기화합니다.

constructor(props) {
    super(props);
    this.state = { isToggle: true };
}

여기서 isToggle은 상태에 담긴 불리언(boolean) 값입니다. 버튼의 제목은 이 값에 따라 결정되는데, 값이 true면 버튼 제목이 'ON'으로, 그렇지 않으면 'OFF'로 표시됩니다.

버튼이 눌리면 onPress 메서드가 호출되고, 내부의 setState가 isToggle 값을 반전시켜 업데이트합니다.

onPress={() => {
    this.setState({ isToggle: !this.state.isToggle });
}}

즉, 사용자가 버튼을 클릭하면 onPress 이벤트가 발생하고, setState가 isToggle 속성의 상태를 변경하여 버튼 제목이 자동으로 갱신됩니다.

App.js 전체 코드

import React, { Component } from "react";
import { Text, View, Button, Alert } from 'react-native';

class App extends Component {

    constructor(props) {
        super(props);
        this.state = { isToggle: true };
    }

    render(props) {
        return (
            <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
                <Button
                    onPress={() => {
                        this.setState({ isToggle: !this.state.isToggle });
                    }}
                    title={
                        this.state.isToggle ? 'ON' : "OFF"
                    }
                    color="green"
                />
            </View>
        );
    }
}
export default App;

실행 결과

버튼을 누를 때마다 제목이 ON ↔ OFF로 토글됩니다.

예제 2 — 텍스트를 클릭하면 내용 변경

다음은 사용자가 텍스트를 터치하면 화면의 문구가 바뀌는 예제입니다.

생성자 안에서 상태를 다음과 같이 초기화합니다.

constructor(props) {
    super(props);
    this.state = { myState: 'Welcome to Tutorialspoint' };
}

이 상태 myState는 Text 컴포넌트 안에서 아래처럼 렌더링됩니다.

<Text onPress={this.changeState} style={{color:'red', fontSize:25}}>{this.state.myState} </Text>

사용자가 텍스트를 터치하거나 누르면 onPress 이벤트가 발생하고, this.changeState 메서드가 호출됩니다. 이 메서드는 setState를 통해 myState 값을 새 문구로 업데이트합니다.

changeState = () => this.setState({myState: 'Hello World'})

App.js 전체 코드

import React, { Component } from "react";
import { Text, View, Button, Alert } from 'react-native';

class App extends Component {

    constructor(props) {
        super(props);
        this.state = { myState: 'Welcome to Tutorialspoint' };
    }
    changeState = () => this.setState({myState: 'Hello World'})
    render(props) {
        return (
            <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
                <View>
                    <Text onPress={this.changeState} style={{color:'red', fontSize:25}}>
                        {this.state.myState}
                    </Text>
                </View>
            </View>
        );
    }
}
export default App;

실행 결과

초기에는 'Welcome to Tutorialspoint'가 빨간색으로 표시되며, 텍스트를 누르는 순간 'Hello World'로 즉시 변경됩니다.

정리

리액트 네이티브의 상태는 컴포넌트 내부에서 변하는 데이터를 관리하는 핵심 개념입니다. 생성자에서 초기화하고, 값을 변경할 때는 반드시 setState를 사용해야 화면이 자동으로 다시 렌더링됩니다. 상태는 단순하게 유지하고, 여러 컴포넌트가 같은 데이터를 필요로 할 때는 하나의 컨테이너 컴포넌트에서 상태를 관리하는 것이 좋은 설계 습관입니다.