React-Native에서 데이터 전달하기 (props / state)

props

: properties의 줄임말로, 부모 컴포넌트로 부터 전달된 속성값 혹은 상속 받은 속성 값을 의미

: 부모 컴포넌트가 자식 컴포넌트의 props를 설정하면 자식 컴포넌트에서 props를 사용할 수 있지만

  변경하는 것은 불가능

 > 부모 컴포넌트에서만 변경 가능

=> 읽기 전용

 

 

 

state

: 컴포넌트 내부에서 생성되어 값을 변경할 수 있고, 이를 이용해 컴포넌트 상태를 관리할 수 있음

: 상태 state란 컴포넌트에서 변화할 수 있는 값을 나타내며,

  상태가 변하면 컴포넌트는 re-rendering 됨

=> 컴포넌트 자신이 가지고 있는 값

 

 

 

useState

: 리액트 Hooks중 useState는 함수형 컴포넌트에서 상태를 관리할 수 있도록 해줌

: useState는 상태를 관리하는 변수와 그 변수를 변경할 수 있는 setter 함수를 배열로 반환

: useState 함수에서 반환한 setter 함수를 이용하여 상태 변수를 변경

: useState 함수를 호출할 때 파라미터에 생성되는 상태의 초기값을 지정해야함

 > 초기값을 전달하지 않으면 undefined로 설정되어 에러 발생 위험

const [state, setState] = useState(initialState);

 

 

 

 

 

출처: https://devmoony.tistory.com/67

constructor

: 어떠한 컴포넌트가 렌더링될 때 가장 먼저 실행되어 초기화를 수행

: 초기값을 설정해야하는 컴포넌트에 작성하여 contructor 내부에 코드를 작성

 

 

 

 

 

 

 

 

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  const name = 'Gummy';
  return (
    <View style={styles.container}>
      <Text style={styles.text}>My name is {name}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
  }
});

JSX에서의 변수 전달

: 함수 내에서 선언하거나 함수의 파라미터인 props를 통해 변수를 함수내에서 사용 가능

 

 

 

 

 

 

부모 컴포넌트에서 자식 컴포넌트를 사용하면서 속성으로 props를 전달하기

import React from "react"; // 리액트 호출
import { TouchableOpacity, Text } from "react-native"; // 리액트 네이티브에서 제공하는 컴포넌트 추가

const MyButton = props => {
    console.log(props);
    return (
        <TouchableOpacity
            style={{ 
            backgroundColor: '#3498db',
            padding: 16,
            margin: 10,
            borderRadius: 8,
            }}
            onPress={() => alert('Click!!!')}
        >
            <Text style={{ color: 'white', fontSize: 24}}>{props.title}</Text>
        </TouchableOpacity>
    );
};

export default MyButton;

- src/components/MyButton.js

 

 

import React from 'react';
import { Text, View } from 'react-native';
import MyButton from './components/MyButton';

const App = () => {
  return (
    <View
     style={{
       flex:1,
       backgroundColor: '#fff',
       alignItems: 'center',
       justifyContent: 'center',
     }}
    >
      <Text style={{ fontSize:30, marginBottom:10 }}>Props</Text>
      <MyButton title="Button" />
    </View>
  );
}

export default App;

- src/App.js

 

 

 

 

 

 

컴포넌트의 태그 사이에 값을 입력해서 props를 전달하기

:  태그 사이의 값은 자식 컴포넌트의 props에 children으로 전달됨

: 이때 props에 children이 있따면 title 보다 우선시 되도록 작성

 

const MyButton = props => {
    console.log(props);
    return (
        <TouchableOpacity
            style={{ 
            backgroundColor: '#3498db',
            padding: 16,
            margin: 10,
            borderRadius: 8,
            }}
            onPress={() => alert('Click!!!')}
        >
            <Text style={{ color: 'white', fontSize: 24}}>{props.children || props.title}</Text>
        </TouchableOpacity>
    );
};

export default MyButton;

- src/components/MyButton.js

 

 

const App = () => {
  return (
    <View
     style={{
       flex:1,
       backgroundColor: '#fff',
       alignItems: 'center',
       justifyContent: 'center',
     }}
    >
      <Text style={{ fontSize:30, marginBottom:10 }}>Props</Text>
      <MyButton title="Button" />
      <MyButton title="Button">Children Props</MyButton>
    </View>
  );
}

export default App;

- src/App.js

 

 

 

 

 

기본 props 설정

- src/components/MyButton.js에 다음 코드 추가

MyButton.defaultProps = {
    title: "Btn"
};

 

- src/App.js

<MyButton title="Button" />
<MyButton title="Button">Children Props</MyButton>
<MyButton />

 

 

 

 

 

 

Refference

[React Native] props와 state / 이벤트 처리

[React 리액트] props와 state 개념 및 기본 예제