[React Native] 컴포넌트, Props, defaultProps

예전에 짧게 공부했던 React Native를 다시 머리 속에서 꺼내기 위해..! 다시 공부해보자

그래서 여긴 자세하게 적는 것 보단 짧게 짧게 메모 형식으로 적을 것이다. 다음에 혹시나 필요할 때 볼 수 있게 ㅎㅎ

 

 

컴포넌트를 선언하는 방법

컴포넌트를 선언하는 방법은 2가지

 

1. 함수 컴포넌트 선언하기

2. 클래스로 컴포넌트 선언하기

 

 

함수 컴포넌트 선언하기

 

Greeting.js 파일을 만들고 이렇게 코드를 작성함.

 

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

function Greeting() {
    return (
        <View>
            <Text>안녕하세요 함수 컴포넌트!</Text>
        </View>
    )
}

export default Greeting;

 

이전에도 항상 궁금했던 건데 export default가 왜 붙는지 궁금했음

export default는 다른 파일에서 이 컴포넌트를 불러올 수 있게 해주는 코드라고 함.

 

그리고 App.js 파일 코드를 이렇게 적으면 끝

 

import React from 'react';
import {SafeAreaView, SafeAreaViewComponent} from "react-native";
import Greeting from './components/Greeting';

const App = () => {
  return (
      <SafeAreaView>
        <Greeting />
      </SafeAreaView>
  )
}

export default App;

 

시뮬레이터를 통해서 결과를 확인하면 '안녕하세요 함수 컴포넌트!' 라고 출력 된 걸 확인 할 수 있음.

 

App 컴포넌트를 선언할 땐 화살표 함수 문법을 사용했음.

 

const App = () => {
}

 

 

하지만 Greeting 컴포넌트에서는 function 키워드를 사용해서 컴포넌트를 선언했음.

 

function Greeting() {
}

 

 

화살표 함수 문법을 썼을 때의 장점

복잡한 로직 없이 바로 반환하는 코드라면 중괄호 코드 블록과 return 키워드를 생략할 수 있다.

 

function 키워드를 썼을 때의 장점

..? 모르겠다..

 

나는 function 사용하는게 훨씬 더 편한 것 같다. 괄호는 너무 복잡함.

 

 

Props

porperties를 줄인 말로 컴포넌트의 속성을 의미한다.

props를 사용하면 컴포넌트를 사용할 때 임의의 값을 넣어줄 수 있다. 

 

Greeting 컴포넌트에 name이라는 props를 추가해줌. 

 

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

function Greeting(props) {
    return (
        <View>
            <Text>안녕하세요 {props.name}!</Text>
        </View>
    )
}

export default Greeting;

 

그리고 뒤에 {props.name}으로 변경해줌!!

 

Greeting 함수만 바꾸면 되는게 아님.. App도 바꿔주겠음..!

 

import React from 'react';
import {SafeAreaView, SafeAreaViewComponent} from "react-native";
import Greeting from './components/Greeting';

const App = () => {
  return (
      <SafeAreaView>
        <Greeting name="다은님" />
      </SafeAreaView>
  )
}

export default App;

 

그럼 결과가 이렇게 '안녕하세요 다은님!' 하고 변경 된걸 볼 수 있다..!

 

 

 

defaultProps

Props를 지정하지 않았을 때 기본 값을 설정해주기 위해 사용하는 것!

 

App.js에 <Greeting /> 뒤에 name을 지워주고 <Greeting />으로만 변경한 후 

 

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

function Greeting(props) {
    return (
        <View>
            <Text>안녕하세요 {props.name}!</Text>
        </View>
    )
}

Greeting.defaultProps = {
    name : '로그인 해주세요!',
};

export default Greeting;

 

Greeting.js 파일의 코드를 변경해준다. 

 

 

코드를 적으면서 생각해본 것.. 이런 기능은 앱을 실행 했을 때 로그인 하지 않은 채로 앱에 들어갔을때 사용하면 좋을 것 같다고 생각함. 원래 로그인 하지 않고 마이페이지에 들어가면 '로그인을 해주세요!' 이런게 뜨잖아여.. 그런 기능을 구현할 때 사용하면 좋을 것 같다..!!