[React.js] JSX란? / 사용법

JSX란?

Javascript + XML ( JavaScriptXml )

태그이름을 자유롭게 지을수 있는 XML

javascript 문법에, XML구문이 있는 것처럼 사용하는, React의 문법

 

JSX 작동 과정

1. 사용자가 JSX 작성

2. ESNext 코드를 Babel 플러그인에게 전달

3. Babel 플러그인이 ESNext 코드를 평범한 React.createElement 함수를 호출하는 javascript로 변환

4. React가 변환된 javascript를 실행

 

JSX 장점

• React.createElement 코드를, 단순하고 간결하게 만들 수 있다

 

---

JSX 사용법

 

(1) React Native JSX

 

- 코어 컴포넌트 -

 

 

<Fragment>

실제는 존재하지 않지만, XML 문법이 요구하는 부모 컴포넌트로 동작하도록 만들어진 컴포넌트

// 2개의 View컴포넌트를 직접 렌더링하기 위해, Fragment로 JSX 구문을 맞춰준다.
return (
  <Fragment>
    <View>
      <Text>text1</Text>
    </View>
    <View>
      <Text>text2</Text>
    </View>
  </Fragment>
)

// <>로 단축가능
return (
  <>
    <View>
      <Text>text1</Text>
    </View>
    <View>
      <Text>text2</Text>
    </View>
  </>
)

 

<View>

사용자가 보는 화면을 만들어준다.

[ 속성 ]

onLayout : 화면이 렌더링이 끝났을때마다, 실행될 함수를 설정한다.

import {View} from 'react-native'
import type {LayoutChangeEvent} from 'react-native'

const onLayout = (event:LayoutChangeEvent) => console.log(event.nativeEvent)

<View onLayout={onLayout}/>

 

 

<Button>

사용자가 누를 수 있는 버튼을 만들어 준다.

[ 속성 ]

onPress : 버튼을 눌렀을때, 실행할 함수를 설정하는 속성

title : 버튼위에 표시되는 문자를 설정하는 속성

color : 버튼위에 표시되는 문자의 색을 설정하는 속성

<Button onPress={콜백 함수} title="home" color="red"/>

 

<TouchableOpacity>, <TouchableHighlight>

컴포넌트 영역에 터치가 일어나면, onPress 이벤트 속성에 설정된 콜백함수를 실행한다.

( 단 한 개의 자식 컴포넌트만 올 수 있음 )

Opacity : 터치시, 컴포넌트 영역을 투명하게 만듬

Highlight : 터치시, 컴포넌트 영역을 밝게 만듬

<TouchableOpacity onPress={() => Alert.alert('Opacity', 'opacity')}>
  <Text>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableHighlight onPress={() => Alert.alert('Highlight', 'Highlight')}>
  <Text>TouchableHighlight</Text>
</TouchableHighlight>

 

<Text>

문자열을 보여준다

[속성]

onPress : 버튼을 눌렀을때,  실행할 함수를 설정하는 속성 ( 버튼과 다르게, 터치시 아무런 효과가 없다 - 기능만 작동 )

numberOfLines : 텍스트 줄을 제한한다

<Text onPress={onPress} numberOfLines={3}>Text</Text>

 

<TextInput>

문자열 입력칸을 보여준다. ( 자식 요소 못가짐 )

[속성]

defaultValue : 초기 값을 설정한다.

placeholder : 어떤 값을 입력받을 것인지 보여주는 흐릿한 문자열을 설정한다.

onChangeText : 텍스트가 입력될때마다, 실행될 함수를 설정한다. ( 인자로 value값이 전달됨 )

editable : true - 입력 가능, false - 입력 불가능

keyboardType : 'default', 'numeric', 'email-address' 같은 키보드 타입을 설정한다.

focus : 해당 입력칸을 포커싱하게 한다. ( 커서 On )

blur : 해당 입력칸의 포커싱을 잃게 한다. ( 커서 Off )

onFocus : 입력칸이 포커싱 되었을때마다, 실행될 함수를 설정한다.

onBlur : 입력칸이 포커싱을 잃을때마다, 실행될 함수를 설정한다.

onEndEditing : 입력이 모두 끝나면, 실행될 함수를 설정한다.

import {Alert, TextInput} from 'react-native'

const onChange = (value:string) => Alert.alert("Current Value", value)

<TextInput placeholder="search" onChangeText={onChange} />

// 버튼이 입력될때마다 현재 입력 값 알림

 

<Image>

이미지를 보여준다. ( 자식 요소 못가짐 )

[속성]

source : 이미지파일의 base64코드를 설정한다

<Image source={'이미지base64코드'}/>

<Image source={{uri: '이미지uri'}}/>

 

<ScrollView>

자식 컴포넌트의 내용을, 스크롤바 형식으로 보여준다.

[ 속성 ]

contentContanerStyle : 자식요소의 스타일을 설정

<ScrollView contentContainerStyle={[styles.view]}>
  <ChildComponent/>
</ScrollView>

 

<FlatList>

자식 컴포넌트의 내용을, 스크롤바 형식으로 보여준다. ( 같은 컴포넌트를 반복해서 렌더링 할때 유용 )

[ 속성 ]

data : 반복될 배열(array) 데이터 설정

renderItem : 배열의 요소마다 적용되어 렌더링할 컴포넌트를 설정 ( item => <컴포넌트 item={item}/> )

keyExtractor : 각 컴포넌트 요소마다 적용될 key 값 설정 (item, idx) => idx

ItemSaperatorComponent : 각 컴포넌트 요소를 감싸주는, 부모 컴포넌트 설정

onContentSizeChange : 콘텐츠의 크기가 변할때마다, 실행할 함수 설정

<FlatList
  data={people}
  renderItem={({item}) => <Person person={item} />}
  keyExtractor={(item, idx) => idx.toString()}
  ItemSeparatorComponent={() => <View style={styles.itemSeparator} />}
  onContentSizeChange={() => console.log("size change")}
/>

 

<ActivityIndicator>

로딩 화면을 보여준다.

[ 속성 ]

size : 로딩 아이콘 사이즈 설정

color : 로딩 아이콘 색상 설정

<ActivityIndicator size="large" color="blue" />