[React Native] Props 란? 예제

Props, State는 데이터를 다룰 때 사용되는 개념이다.

​

리액트는 단방향 데이터 플로우(one-way data flow)

props를 받은 자식 컴포넌트는 값을 변경할 수 없고, 상위 컴포넌트로 값을 전달할 수 없다.

하위 컴포넌트에서의 변화로 인해 상위 컴포넌트가 변화해야 하는 경우 상위 컴포넌트에 state를 변경하는 함수를 정의하면 된다.

​

Props는 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용된다.

 

반응형

Props

• props는 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 사용 -> (자식 입장에서) 읽기 전용
• 자식 컴포넌트에서는 props를 받기만하고, 받아온 prpos를 직접 수정할 수 없다.
• defaultProps: props에 값을 입력해주지 않았을 때, 기본값을 설정해 놓는 기능이다.

클래스형 컴포넌트 Props

// MyName.js
import React, { Component } from 'react';
import { Text, View,} from 'react-native';
class MyName extends Component {
    static defaultProps = {
      name: 'Lee'
    };
    render() {
      return (
        <View>
          <Text>안녕하세요! 제 이름은 {this.props.name}입니다.</Text>
        </View>
      );
    }}
  export default MyName

// App.js
import React, { Component } from 'react';
import MyName from './MyName';
class App extends Component{
  render(){
    return( <MyName name="jun"/>);
  }}
export default App;

함수형 컴포넌트 Props

// MyName.js
import React from 'react';
import { Text, View,} from 'react-native';
const MyName = ({ name }) => {
    return (
        <View>
            <Text>안녕하세요! 제 이름은 {name} 
                   입니다.</Text>
        </View>
    )};
MyName.defaultProps = {
  name: 'Lee'
};
export default MyName;

// App.js
import React, { Component } from 'react';
import MyName from './MyName';
class App extends Component {
  render() {
    return <MyName name="jun" />;
  }}
export default App;

 

코드 설명

부모 컴포넌트인 App.js에서 자식 컴포넌트인 MyName.js의 name에 jun이라는 값을 준다.

만약, 부모 컴포넌트에서 자식 컴포넌트의 name에 값을 주지 않았다면 defaultProps의 name에 설정되어 있는 Lee가 적용되어 실행 화면에 "안녕하세요! 제 이름은 Lee입니다."라고 나온다.

하지만, 부모 컴포넌트에서 자식 컴포넌트인 MyName의 name값에 Jun이라는 값을 넣어줬기 때문에 실행 화면에는 "안녕하세요! 제 이름은 Jun입니다."라고 나온다.

​

클래스형 컴포넌트와 함수형 컴포넌트의 코드를 비교해보면 확실히 함수형 컴포넌트가 불필요한 코드가 줄어 간결하다. 또한 함수형 컴포넌트가 초기 마운트 속도가 더 빠르다.

실행화면

반응형