[React-Native] React Native 에서 컴포넌트란

💡 컴포넌트란?

재사용할 수 있는 조립 블록으로, 화면에 나타나는 UI 요소이다. 그러나 단순히 UI 역할만 하는 것이 아닌 부모로부터 받은 속성이나 자신의 상태에 따라 표현이 달라지고 다양한 기능을 수행합니다.

💡 JSX

JSX 는 마치 HTML 을 작성한 것 같은 코드이다. 이러한 JSX 는 객체 생성과 함수 호출을 위한 문법적 편의를 제공하기 위해 만들어진 확장 기능으로 리액트 프로젝트에서 사용된다.

export default function App() {
  return (
    <View>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

여러 개의 요소를 표현할 경우 하나의 부모로 감싸야 한다. 위의 경우 Text 와 StatusBar 태그를 View 태그로 감싸고 있다. View 는 UI 를 구성하는 가장 기본적인 요소로 웹 프로그래밍에서 <div> 와 비슷한 역할을 하는 컴포넌트이다. View 컴포넌트처럼 여러 개의 컴포넌트를 반환하고 싶은 경우 Fragment 컴포넌트를 사용한다. Fragment 태그는 <Fragment> 로도 사용하고 단축 문법으로 <> 로도 사용한다.

export default function App() {
  return (
    <>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </>
  );
}

💡 if 문

JSX 내에서 if 문을 사용하려면 즉시 실행 함수 형태로 작성해야 한다.

export default function App() {
  const name = "hihi";
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        {(() => {
          if (name === "Hanbit") return "My name is Hanbit";
          else if (name === "Jeongmin") return "My name is Jeongmin";
          else return "My name is React Native";
        })()}
      </Text>
      <StatusBar style="auto" />
    </View>
  );
}

💡 삼항 연산자

if 조건문 보다 삼항 연산자를 사용할 수 있도록 하기.

export default function App() {
  const name = "Jeongmin";
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        My name is {name === "Jeongmin" ? "Jeongmin Park" : "React Native"}
      </Text>
      <StatusBar style="auto" />
    </View>
  );
}

앱 실행 화면

💡 AND / OR 연산자

JSX 에서 false 는 렌더링되지 않기 때문에 AND 연산자 앞의 조건이 참일 때 뒤의 내용이 나타나고 거짓인 경우 나타나지 않는다. OR 연산자는 AND 연산자와 반대로 앞의 조건이 거짓일 경우 내용이 나타나고 참일 경우 나타나지 않는다.

// AND 연산
export default function App() {
  const name = "Jeong";
  return (
    <View style={styles.container}>
      {name === "Jeongmin" && (
        <Text style={styles.text}>My name is Jeongmin</Text>
      )}
      {name !== "Jeongmin" && (
        <Text style={styles.text}>My name is not Jeongmin</Text>
      )}
      <StatusBar style="auto" />
    </View>
  );
}

// OR 연산
export default function App() {
  const name = "Jeongmin";
  return (
    <View style={styles.container}>
      {name !== "Jeongmin" || (
        <Text style={styles.text}>My name is Jeongmin</Text>
      )}
      {name === "Jeongmin" || (
        <Text style={styles.text}>My name is not Jeongmin</Text>
      )}
      <StatusBar style="auto" />
    </View>
  );
}

JSX 에서는 null 은 허용하지만 undefined 는 허용하지 않는다. (오류 발생)

💡 스타일링

JSX 에서는 HTML 과 달리 style 에 문자열로 입력하는 것이 아닌 객체 형태로 입력해야 한다. 그리고 background-color 처럼 -(하이픈) 으로 연결된 이름은 카멜 표기법으로 backgroundColor 처럼 작성해야 한다.

export default function App() {
  const name = "Jeongmin";
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      {name !== "Jeongmin" || (
        <Text style={styles.text}>My name is Jeongmin</Text>
      )}
      {name === "Jeongmin" || (
        <Text style={styles.text}>My name is not Jeongmin</Text>
      )}
      <StatusBar style="auto" />
    </View>
  );
}

💡 Button 컴포넌트

Button 컴포넌트의 onPress 및 title 과 같은 속성을 사용해보았다.

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

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

export default App;

앱 실행 화면

💡 Custom 컴포넌트

Button 컴포넌트는 IOS 와 안드로이드에서 다른 모습으로 렌더링 되기 때문에 그 점을 보완하기 위해서 TouchableOpacity 컴포넌트와 Text 컴포넌트를 이용해서 MyButton 커스텀 컴포넌트를 만들었다.

// src/components/MyButton.js
import React from "react";
import { TouchableOpacity, Text } from "react-native";

const MyButton = () => {
  return (
    <TouchableOpacity
      style={{
        backgroundColor: "#3498db",
        padding: 16,
        margin: 10,
        borderRadius: 8,
      }}
      onPress={() => alert("Click!!")}
    >
      <Text
        style={{
          fontSize: 24,
          color: "white",
        }}
      >
        My Button
      </Text>
    </TouchableOpacity>
  );
};

export default MyButton;

// src/App.js
import React from "react";
import { Text, Button, 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 }}> My Button Component</Text>
      <MyButton/>
    </View>
  );
};

export default App;

앱 실행 화면

💡 props

props 란, 부모 컴포넌트로부터 전달된 속성값 혹은 상속받은 속성값으로 변경할 수 없다.

// src/components/MyButton.js
import React from "react";
import { TouchableOpacity, Text } from "react-native";

const MyButton = (props) => {
  return (
    <TouchableOpacity
      style={{
        backgroundColor: "#3498db",
        padding: 16,
        margin: 10,
        borderRadius: 8,
      }}
      onPress={() => alert("Click!!")}
    >
      <Text
        style={{
          fontSize: 24,
          color: "white",
        }}
      >
        {/* children 이 있다면 title 보다 더 우선시되도록 하는 것 */}
        {props.children || props.title}
      </Text>
    </TouchableOpacity>
  );
};

MyButton.defaultProps = {
  title: "Default",
};

export default MyButton;

props.children 은 App.js 에서 선언한 MyButton 컴포넌트 사이의 값 "Children Props" 이다.

props.title 은 App.js 에서 선언한 MyButton 컴포넌트 안에 전달한 props 인 title 의 값 "Button" 이다.

// src/App.js
import React from "react";
import { Text, Button, 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" />
      <MyButton title="Button">Children Props</MyButton>
      {/* title 에 전달된 값이 없을 경우 Default 가 title 값으로 들어온다. */}
      <MyButton />
    </View>
  );
};

export default App;

앱 실행 화면

💡 PropTypes

부모 컴포넌트에서 전달받아야 하는 props 의 타입과 필수 여부를 지정할 수 있다.

npm install prop-types

// src/components/MyButton.js

import React from "react";
import { TouchableOpacity, Text } from "react-native";
import PropTypes from "prop-types";

const MyButton = (props) => {
  return (
    <TouchableOpacity
      style={{
        backgroundColor: "#3498db",
        padding: 16,
        margin: 10,
        borderRadius: 8,
      }}
        {/* 부모 컴포넌트에서 전달한 onPress 함수를 이벤트로 받는다. */}
      onPress={() => props.onPress()}
    >
      <Text
        style={{
          fontSize: 24,
          color: "white",
        }}
      >
        {/* children 값이 있다면 title 이 있어도 children 값을 보이도록 하는 것 */}
        {props.children || props.title}
      </Text>
    </TouchableOpacity>
  );
};

MyButton.propTypes = {
  title: PropTypes.string.isRequired,
  onPress: PropTypes.func.isRequired,
};

MyButton.defaultProps = {
  title: "Default",
};

export default MyButton;

부모 컴포넌트 (App.js) 에서 전달한 props 에서 onPress 를 꺼내서 버튼 이벤트로 입력한다.

// src/App.js

import React from "react";
import { Text, Button, 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" onPress={() => alert("props")} />
      <MyButton title="Button" onPress={() => alert("children")}>
        Children Props
      </MyButton>
      {/* title 에 전달된 값이 없을 경우 Default 가 title 값으로 들어온다. */}
      <MyButton onPress={() => alert("default")} />
    </View>
  );
};

export default App;

💡 state

state 란, 컴포넌트에서 생성되고 변경이 가능한 값이며 state 를 이용해서 컴포넌트 상태를 관리한다. Hook 을 이용해서 함수형 컴포넌트에서도 상태 관리가 가능하다.

// src/components/Counter.js

import React, { useState } from "react";
import { View, Text } from "react-native";
import MyButton from "./MyButton";

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <>
      <View style={{ alignItems: "center" }}>
        <Text style={{ fontSize: 30, margin: 10 }}>{count}</Text>
        <MyButton onPress={() => setCount(count + 1)}>증가</MyButton>
        <MyButton onPress={() => setCount(count - 1)}>감소</MyButton>
      </View>
    </>
  );
};
export default Counter;

count 에 대한 상태관리를 위해 useState(0) 를 사용했다.

증가하는 버튼을 클릭하면 setCount 가 +1 이 되고 감소하는 버튼을 클릭하면 setCount 가 -1 이 된다.

// src/App.js

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

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

export default App;

앱 실행 화면

💡 useState 여러 개 사용하기

import React, { useState } from "react";
import { View, Text } from "react-native";
import MyButton from "./MyButton";

const Counter = () => {
  const [count, setCount] = useState(0);
  const [double, setDouble] = useState(0);

  return (
    <>
      <View style={{ alignItems: "center" }}>
        <Text style={{ fontSize: 30, margin: 10 }}>count : {count+double}</Text>
        <MyButton onPress={() => setCount(count + 1)}>증가</MyButton>
        <MyButton onPress={() => setCount(count - 1)}>감소</MyButton>
        <MyButton onPress={() => setDouble(double + 2)}>2 증가</MyButton>
        <MyButton onPress={() => setDouble(double - 2)}>2 감소</MyButton>
      </View>
    </>
  );
};
export default Counter;

앱 실행 화면

💡 Press Event

사용자가 특정 DOM 을 클릭했을 때 호출되는 onClick 이벤트와 비슷한 이벤트가 press 이벤트이다. TouchableOpacity 컴포넌트에서 설정할 수 있는 Press 이벤트의 종류는 총 4 가지이다.

1. onPressIn : 터치가 시작될 때 호출

2. onPressOut : 터치가 해제될 때 호출

3. onPress : 터치가 해제될 때 onPressOut 이후 호출

4. onLongPress : 터치가 일정 시간 이상 지속되면 호출

// src/components/EventButton.js

import React from "react";
import { TouchableOpacity, Text } from "react-native";

const EventButton = () => {
  const _onPressIn = () => console.log("Press In !!!\n");
  const _onPressOut = () => console.log("Press Out !!!\n");
  const _onPress = () => console.log("Press !!!\n");
  const _onLongPress = () => console.log("Long Press !!!\n");
  return (
    <TouchableOpacity
      style={{
        backgroundColor: "#f1c40f",
        padding: 16,
        margin: 10,
        borderRadius: 8,
      }}
      onPressIn={_onPressIn}
      onLongPress={_onLongPress}
      onPressOut={_onPressOut}
      onPress={_onPress}
      delayLongPress={3000}
    >
      <Text style={{ color: "white", fontSize: 24 }}>Press</Text>
    </TouchableOpacity>
  );
};
export default EventButton;

버튼을 클릭하면

- 짧게 클릭할 경우 : Press In -> Press Out -> Press

- 길게 클릭할 경우 : Press In -> Long Press -> Press Out

delayLongPress={3000} 은 3초 동안 버튼을 누르고 있어야 onLongPress 가 호출된다는 의미이다.

앱 실행 화면

💡 onChange Event

// src/components/EventInput.js

import React, { useState } from "react";
import { View, Text, TextInput } from "react-native";

const EventInput = () => {
  const [text, setText] = useState("");
  const _onChange = (event) => setText(event.nativeEvent.text);
  const _onChangeText = (text) => {
    setText(text);
    console.log("text: ", text);
  };

  return (
    <>
      <View>
        <Text style={{ margin: 10, fontSize: 30 }}>text: {text}</Text>
        <TextInput
          style={{ borderWidth: 1, padding: 10, fontSize: 20 }}
          placeholder="Enter a text...."
          //   onChange={_onChange}
          onChangeText={_onChangeText}
        />
      </View>
    </>
  );
};

export default EventInput;

onChange 는 실시간으로 변화하는 텍스트이고, 실제로 필요한 데이터는 onChangeText 이다. 즉, 컴포넌트의 텍스트가 변경되었을 때 변경된 텍스트의 문자열만 인수로 전달하며 호출하는 것이다.

앱 실행 화면

본 포스팅은 도서 [처음 배우는 리액트 네이티브(한빛미디어, 김범준 지음)] 를 보고 공부하며 기록하였습니다.

'JavaScript > React-Native' 카테고리의 다른 글

[React-Native] 컴포넌트 스타일링 (0)	2021.11.04
[React-Native] React Native 시작하기 (0)	2021.11.02

[React-Native] React Native 에서 컴포넌트란

💡 컴포넌트란?

💡 JSX

💡 if 문

💡 삼항 연산자

💡 AND / OR 연산자

💡 스타일링

💡 Button 컴포넌트

💡 Custom 컴포넌트

💡 props

💡 PropTypes

💡 state

💡 useState 여러 개 사용하기

💡 Press Event

💡 onChange Event

'JavaScript > React-Native' 카테고리의 다른 글

댓글

티스토리툴바

[React-Native] React Native 에서 컴포넌트란

💡 컴포넌트란?

💡 JSX

💡 if 문

💡 삼항 연산자

💡 AND / OR 연산자

💡 스타일링

💡 Button 컴포넌트

💡 Custom 컴포넌트

💡 props

💡 PropTypes

💡 state

💡 useState 여러 개 사용하기

💡 Press Event

💡 onChange Event

'JavaScript > React-Native' 카테고리의 다른 글

관련글

댓글

티스토리툴바