컴포넌트 정리

컴포넌트 :  유저 인터페이스

 

클래스형 컴포넌트
-class 키워드 필요
- component 상속 필요
- render() 반드시 필요
-state,lifecycle이용 가능

함수형 컴포넌트 (**)
-hook사용 (클래스형에서 사용할 수 았는 것을 사용 못하는데 hook을 이용해서 사용 가능

 

 

 

 

1. 나만의 컴포넌트 만들기

>> 새로운 파일 생성 (component 디렉토리에 Greeting 생성함)

 

import React from 'react';

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

function Greeting(){

    return (

        <View>

        <Text>안녕하세요 함수 컴포넌트 </Text>

        </View>

    );

}

export default Greeting;

//다른 파일에서 이 컴포넌트를 불러올 수 있게 해주는 코드

 

 

>> 이용할 다른 파일에서

 

import Greeting from './components/Greeting';

 

…

 

<Greeting />

 

 

**function Greeting() { }

**const Greeting = () => ( )

둘다 동일한 함수 표현

 

 

 

 

 

 

1. Props

컴포넌트의 속성

컴포넌트는 props라는 객체인자를 받을 수 있음

(상위 컴포가 하위 컴포넌트에 내려주는 데이터라고 생각)

 

https://eunbin00.tistory.com/30  --> 자세히

 

 

>>내가 만든 컴포넌트에서..

import React from 'react';

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

function Greeting(props){ //prop라는 파라미터 설정

    return (

        <View>

        <Text>안녕하세요 {props.name}!</Text>

//표현식 : 연산 결과, 함수 호출, 특정변수 또는 상수 { } 이용해 감싸줌

        </View>

    );

}

export default Greeting;

//다른 파일에서 이 컴포넌트를 불러올 수 있게 해주는 코드

 

>>사용할 파일에서

…

<Greeting name ="Props" />

 

 

>>defaultProps

Props를 지정하지 않았을때 기본값 설정

Greeting.defaultProps = {

    name : '리액트 네이티브',

};

 

 

 

1. Jsx 문법

 

(1) 태그를 열면 반드시 닫아주기

<Text> </Text>

 

<Greeting />  : 스스로 닫는 태그

 

(2) 반환할 땐 꼭 하나의 태그로 감싸기

 

 return (

        <View>

        <Text>안녕하세요 {Props.name}!</Text>

        </View>

    );

 

<>  </> : 빈태그로 감싸줘도 됨

 

 

(3) jsx 안에서 자바스크립트 표현식을 보여줄 땐 중괄호 감싸기

 <Text>안녕하세요 {props.name}!</Text>

 

Const name = 'JSX';

Return {

<SafeAreaView>

<Greeting name = {name} />...

 

 

 

 

1. Stylesheet로 컴포넌트에 스타일 입히기

별도의 css파일 생성하지 않고 자바스크립트 파일 안에서 stylesheet 사용

 

const styles = StyleSheet.create({

  sectionContainer: {

    marginTop: 32,

    paddingHorizontal: 24,

  },

  sectionTitle: {

    fontSize: 24,

    fontWeight: '600',

  },

  sectionDescription: {

    marginTop: 8,

    fontSize: 18,

    fontWeight: '400',

  },

  highlight: {

    fontWeight: '700',

  },

});

 

 

Css와의 주요 차이점

• 셀렉터 존재x
• 모든 스타일 속성은 camelCase로 작성해야함
• Display 속성은 기본적으로 flex .다른 값은 none밖에 없음
• flextDirection 속성의 기본값은 웹에서는 row이지만  리액트네이티브에서는 column
• 단위 dp
• backgroundColor사용
• Borderwidth,borderstyle...등 따로따로 설정

 

 

 

1. Props 객체 구조 분해 할당

• Props를 조회하는 코드를 더 짧게 구현하는 방법

 

 

(1)

 

function print(params){

    console.log(params.name);

    console.log(params.description);

}

 

==> 를 구조 분해 할당을 사용하면

function print([name,description]){

    console.log(name);

    console.log(description);

}

 

(2) const people =['a','b','c'];

Const a =people[0];

Const b =people[1];

Const c =people[2];

 

==>구조분해 할당 사용하면

 

const people =['a','b','c'];

Const [a,b,c,]=people;

 

 

 

 

1. Usestate hook으로 상태 관리하기

• 동적인 화면 구현
• useState 함수 사용
• Hook :  use로 시작하는 다양한 함수들

 

(1)사용법

 

import React, {useState} from 'react';

 

….

 

const [visible, setVisible] =useState(true);

 

//visible : 상태값  //구조분해 할당 사용

 

 

Ex)

 

import React, { useState } from "react";

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

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

const Component = () => {

  const [count, setCount] = useState(0);

  const [count, setCount] = useState(0); // number

  const [isOn, setIsOn] = useState(false); // boolean

  const [name, setName] = useState(""); // string

  return (

    <View>

      <Text>You clicked {count} times</Text>

      <Button title="Click me" onPress={() => setCount(count + 1)} />

      <Text>-------</Text>

      <Switch

        value={isOn}

        onValueChange={(v) => {

          console.log("v", v);

          setIsOn(v);

        }}

      />

      <Text>-------</Text>

      <TextInput

        value={name}

        onChangeText={(v) => {

          console.log("v", v);

          setName(v);

        }}

      />

    </View>

  );

};

export default Component;

 

 

(2)hook의 규칙

1. 컴포넌트의 최상위 레벨에서만 사용 (조건문,반복문,중첨함수에서 호출 불가)
2. 커스텀 hook : 직접 hook만들 수 있음
3. 커스텀 hook 또는 함수 컴포넌트에서만 사용 가능/ 스클래스에서 사용 불가

 

 

const onPress = () =>{

  setVisible(!visible);

};

//onpress 라는 함수 선언해 이 함수에서 setvisible 함수를 호출해 기존 visible 값을 반전

…

Return(

<Button title ="토클" onPress = {onPress} />

  ///

 

1. 조건부 렌더링 구현

• 특정 조건에 따라 다른 결과물을 보여주는 것 의미
• 예 )  visible 값이 true 일때만 box 컴포넌트 보여주기

 

(1) 삼항연산자 이용

 

{visible ? <Box rounded={true} size="large" color='blue'/> : null}

 

(2) &&연산자 이용

 

{visible && <Box rounded={true} size ="large" color="blue"/>}

 

 

 

 

 

 

 

 

 

1. 사진 첨부

 

 <Image source={require("./경로 ")} style = {styles.local_iimage}/>

        <Image source ={{url : "http:주소"}}

        style={styles.local_image}

        />

 

…..

 

const styles = StyleSheet.create({

  container:{

    local_image:{

      width : 100,

      height:100,

    }

1. 그 외의 컴포넌트들

 

<TextInput placeholder="입력"/>

        <Button title ="버튼 이름"

        onPress={() =>{

          console.log("clilcked");

        }}

        />

        <Switch value={true} />

        <Switch value={false} />

        <ScrollView>

        <Image source={require("./경로 ")} style = {styles.local_iimage}/>

       

        <Image source={require("./경로 ")} style = {styles.local_iimage}/>

       

        </ScrollView>  

 

 

1. View: 화면에 보여지는 컨테이너 역할을 하는 컴포넌트로, 다른 컴포넌트들을 감싸고 정렬할 수 있습니다.
2. Text: 텍스트를 표시하는 컴포넌트로, 문자열을 화면에 표시할 때 사용됩니다.
3. Image: 이미지를 표시하는 컴포넌트로, 로컬 이미지 파일이나 웹 이미지 URL을 통해 이미지를 표시할 수 있습니다.
4. TextInput: 사용자로부터 텍스트를 입력받을 수 있는 입력 컴포넌트로, 키보드와 상호작용하여 텍스트를 입력할 수 있습니다.
5. Button: 사용자의 터치 입력을 받아 처리하는 버튼 컴포넌트입니다. 기본적으로 시스템 기본 스타일을 따르며, onPress 이벤트를 통해 클릭 동작을 처리할 수 있습니다.
6. TouchableOpacity: 터치 입력에 대응하여 투명도를 변경하는 터치 가능한 컴포넌트입니다. 버튼처럼 동작하며, 스타일을 직접 설정할 수 있습니다.
7. ScrollView: 스크롤 가능한 컨테이너로, 화면을 벗어나는 컨텐츠를 스크롤하여 볼 수 있도록 합니다.
8. FlatList: 대량의 데이터를 효율적으로 렌더링하는 리스트 컴포넌트로, 스크롤 가능하며 동적으로 항목을 렌더링합니다.
9. StyleSheet: 스타일 시트를 생성하고 관리하는 객체로, 컴포넌트에 스타일을 적용할 때 사용됩니다.
10. Navigator: 화면 간의 전환과 내비게이션을 관리하는 컴포넌트입니다. React Navigation 라이브러리를 통해 사용할 수 있습니다.

▪ 기본 박스
<View>

▪ 스크롤이 가능한 박스
<ScrollView>

▪ 텍스트 라인
<Text>

▪ 텍스트 입력 폼
<TextInput>
    value={state} : 값 인자
    onChangeText={fnc} : 값 변경 이벤트 (명시해야 반응함)
    multiline={boolean} : 자동줄바꿈
    maxLength={number} : 최대 글자 수
    editable={boolean} : disabled
    
▪ 버튼
<Button>
    onPress={fnc} : 클릭 이벤트

▪ 컴포넌트 로딩
<ActivityIndicator>
    size={string}
    color={string}
    animation={boolean} : flage 값
    
▪ 이미지
<Image>
    source={component} : 이미지 url/path
    reszieMode={string} : cover, contain(이미지 비율 유지)
    onLoadEnd={fnc} : 이미지 불러온 후 호출

▪ 모달
<Modal>
    visible={state} : open 상태 값
    animationType={string} : slide, fade 등등 애니메이션
    onShow={fnc} : 모달 불러온 후 호출