[React Natvie] 컴포넌트와 스타일링 (Component, Styling)

Input

<TextInput
  style={styles.input}
  placeholder='할 일을 입력하세요.'
  value={text}
  onChangeText={setText}
  onSubmitEditing={() => addTodo()}
/>

React와 차이점

• input 태그 → TextInput 태그
• onChange 속성 → onChangeText 속성
• onSubmit 속성 → onSubmitEditing
• event 객체를 사용하지 않는다.

  // React
  <input onChange((e) => setText(e.target.value)) />

  // React Native
  <TextInput onChangeText={setText} />

Alert

Alert · React Native

const deleteTodo = () => {
  Alert.alert('Todo 삭제', '정말 삭제하시겠습니까?', [
    {
      text: '취소',
      onPress: () => {
        console.log('취소');
      },
      style: 'cancel',
    },
    {
      text: '삭제',
      onPress: () => {
        console.log(`${text} 삭제`);
        setTodos((prev) => prev.filter((todo) => todo.id !== id));
      },
      style: 'default',
    },
  ]);
};

Button

button 태그에 커스텀 스타일을 적용하기 위해서는 Pressable 또는 TouchableOpacity 컴포넌트를 사용한다.

export default function Button(props) {
  const { onPress, title = 'Save' } = props;
  return (
    <Pressable style={styles.button} onPress={onPress}>
      <Text style={styles.text}>{title}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
    elevation: 3,
    backgroundColor: 'black',
  },
  text: {
    fontSize: 16,
    lineHeight: 21,
    fontWeight: 'bold',
    letterSpacing: 0.25,
    color: 'white',
  },
});

StyleSheet 스타일링하기

import { StyleSheet } from 'react-native';

export default function App() {
  return (
		<>
      <Text style={styles.text}>title</Text>
    </>
  );
}

const styles = StyleSheet.create({
  text: {
    fontSize: 16,
    lineHeight: 21,
    fontWeight: 'bold',
    letterSpacing: 0.25,
    color: 'white',
  },
});

References

• Alert · React Native