[react native] 객체 구조 분해 할당이란?

 

 

 

컴포넌트에서 Props를 조회하는 코드를 더 짧게 구현하는 방법이다.

구조 분해 할당이라는 자바스크립트 문법을 사용하는 방법으로, '비구조화 할당' 이라고 부르기도 한다.

이 문법은 객체 안에 있는 값을 더욱 짧은 코드를 사용해 밖으로 추출할 수 있게 해준다.

 

 

 

객체를 참조해서 콘솔로 찍어보면 아래와 같이 사용된다.

function print(params) {
    console.log(params.name);
    console.log(params.descr);
}

 

 

 

 

 

구조 분해 할당을 사용한다면 아래와 같이 사용할 수 있다.

function print({name, descr}) {
    console.log(name);
    console.log(descr);
}

 

 

 

 

 

 

 

이렇게 사용하면 매번 객체를 참조하지 않고 코드를 간결하게 사용할 수 있다.

 

 

 

 

 

 

아래는 리액트 네이티브로 작성한 '구조 분해 할당' 예시 코드이다.

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';

function Name({name, age}) {
  return (
    <View style={[styles.setLocation]}>
      <Text style={styles.setText}>안녕하세요.</Text>
      <Text style={styles.setText}>저는 {name}입니다.</Text>
      <Text style={styles.setText}>{age}살 입니다.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  setLocation: {
    justifyContent: 'center',
    flex: 1,
    fontSize: 60,
  },
  setText: {
    textAlign: 'center',
    fontSize: 40,
  },
});

Name.defaultProps = {
  name: '홍길동',
  age: '20',
};

export default Name;