- React Native + Expo로 개발된 간단한 메모 어플리케이션 입니다.
- 공식문서를 보고 React Native 공부를 하면서 간단한 어플리케이션을 만들고자 하였습니다.
| FlatForms & Language |
|---|
      |
- 데이터 베이스는 Async Storage를 사용하였고, SWR을 사용하여 캐싱과 데이터 최신화를 하였습니다.
- React Query를 사용하지 않고 SWR을 사용한 이유는 이 프로젝트에서 필요한 기능은 캐싱과 뮤테이션이기 때문에 용량이 더 적은 SWR을 사용하였습니다.
- Context Api를 활용하여 정렬, 테마 상태가 변할 때마다 컴포넌트의 스타일 변화를 주었습니다.
- React Native의 Animated Api를 활용하여 스켈레톤 UI와 카드 애니메이션을 개발했습니다.
- 스켈레톤과 애니메이션은 커스텀 훅을 개발하여 재사용성을 강조하였습니다.
- onPressIn, onPressOut의 색을 변경하는 커스텀 훅
- 초기 색상과 클릭됐을 때의 색상을 인자로 받아서 색을 변경합니다.
export const useBgColor = (initialColor: string, pressColor: string) => {
const [bgColor, setBgColor] = useState(initialColor);
const handlePressIn = () => {
setBgColor(pressColor);
};
const handlePressOut = () => {
setBgColor(initialColor);
};
return {
bgColor,
handlePressIn,
handlePressOut,
};
};
- Modal 컴포넌트를 재사용하기 위한 커스텀 훅
- isOpen 값으로 Modal의 상태를 체크하고, openModal과, closeModal로 모달 상태를 변경할 수 있습니다.
export const useModal = () => {
const [isOpen, setIsOpen] = useState(false);
const openModal = () => setIsOpen(true);
const closeModal = () => setIsOpen(false);
return {
ModalComponent,
isOpen,
openModal,
closeModal,
};
};
- FadeIn 애니메이션을 재사용하기 위한 훅
- 첫 번째 인자로 delay를 받은 후 배열 컴포넌트에서 순차적 애니메이션을 적용할 수 있습니다.
export const useFadeInAnimation = (delay: number) => {
const opacityAni = useRef(new Animated.Value(0)).current;
const translateAni = useRef(new Animated.Value(-30)).current;
useEffect(() => {
const animationTime = setTimeout(() => {
Animated.parallel([
Animated.timing(opacityAni, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}),
Animated.timing(translateAni, {
toValue: 0,
duration: 1000,
useNativeDriver: true,
}),
]).start();
}, delay);
return () => clearTimeout(animationTime);
}, []);
return {
opacityAni,
translateAni,
};
};
- 기존 웹에서는 worff, woff2를 선호하지만 Android에서 지원을 하지 않기 때문에 Expo에서 권장하는 otf를 사용하였습니다.
- Pretendard.otf : 약 1500KB
- Pretendard-subset.otf : 약 400KB
- 1500KB를 400KB로 줄였기 때문에 폰트 로딩 속도와 서버에 대한 부담이 적어지는 효과를 가져왔습니다.
- 비교적 용량이 많은 png와 jpg 파일 대신 svg를 사용하였습니다.
- React Native에서 svg 활용을 가능하게 해주는 react-native-svg를 활용하였습니다.
- 높이와 넓이, 색상 값을 인자로 받기 때문에 서로 다른 색이 필요한 상황에서도 재사용할 수 있습니다.
export default function Arrow({ width, height, fill }: svgType) {
return (
<Svg width={width} height={height} viewBox="0 0 24 24" fill="none">
<Path d="M15 18L9 12L15 6" stroke={fill} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</Svg>
);
}