vector icon

https://icons.expo.fyi/MaterialIcons/email

여기가서 확인해서 import 하고

import { MaterialIcons } from '@expo/vector-icons';

태그 사용하면 끝

<MaterialIcons
	name={iconName}
	size={20}
	color={(() => {
		switch (true) {
			case isFocued:
				return PRIMARY.DEFAULT;
			case !!value:
				return BLACK;
			default:
				return GRAY.DEFAULT;
		}
	})()}
/>

next

ref라는애가 있다 리액트에서 특별히 관리하는 props중 하나 또 다른 특별관리 props key 가 있다.

const passwordRef = useRef('test');

값이 리렌더링 되지는 않는다.

실제 값을 넘겨줄 때는 forwordRef 라는 애를 써서 넘겨줘야 한다.

const Input = forwardref(({props변수들...}, ref))

위와 같이 사용하여 만들어주면 ref를 주고받을 수 있다.

next button을 눌렀을 땐 onSubmitEditing 이 호출 됨

앵커같은 느낌, element를 가져와서 조작할 수 있는거 같음.

Button 만들기

import { Pressable, StyleSheet, Text } from 'react-native';
import PropTypes from 'prop-types';
import { PRIMARY, WHITE } from '../colors';

const Button = ({ title, onPress, disabled }) => {
	return (
		<Pressable
			onPress={onPress}
			style={({ pressed }) => [
				styles.container,
				pressed && { backgroundColor: PRIMARY.DARK },
				disabled && { backgroundColor: PRIMARY.LIGHT },
			]}
			disabled={disabled}
		>
			<Text style={styles.title}>{title}</Text>
		</Pressable>
	);
};

Button.propTypes = {
	title: PropTypes.string.isRequired,
	onPress: PropTypes.func.isRequired,
	disabled: PropTypes.bool,
};

const styles = StyleSheet.create({
	container: {
		backgroundColor: PRIMARY.DEFAULT,
		borderRadius: 8,
		justifyContent: 'center',
		alignItems: 'center',
		paddingVertical: 20,
	},
	title: {
		color: WHITE,
		fontSize: 16,
		fontWeight: '700',
	},
});

export default Button;

useEffect

useEffect(() => {}); // 렌더링할 때마다 함수가 호출이 됨.
useEffect(() => {}, []); // 초기에 실행
useEffect(() => {}, [email]); // email 변경되었을 때 실행