[FN] 메인페이지 컴포넌트 개발 일지

졸업 프로젝트랑 전공 팀플, 과제하느라 못하던 개인 프로젝트를 시작하면서 잊어버리지 않고

완벽히 숙지하기 위해 티스토리에 정리하면서 개발을 진행하려고 한다.

취업 준비하는 내모습

 

원래는 안드로이드 스튜디오로 개발하려했으나 IOS, Android 둘다 구현해보려고 React Native로 개발환경을 바꿈

 

1. Dimensions

사용자마다 사용하는 휴대폰의 화면 크기가 다른점을 고려하여 Dimensions를 사용함

const { width, height } = Dimensions.get('window');

Dimensions.get('window') 를 통해 사용자 기기의 화면 너비와 높이를 가져옴

height: height * 0.5

height * 0.5로 높이를 설정하여 화면 높이의 50%에 해당하는 크기 지정

 

2. Image Slide

React Native에는 이미지 슬라이드를 구현하는 많은 방법들이 존재하지만 일단 ScrollView를 사용하여 구현해보려고한다

const images = [
  require('이미지 경로'),
  require('이미지 경로'),
  require('이미지 경로'),
  require('이미지 경로'),
];

 

테스트 사진으로는 내가 가려고하는 공연 포스터(?)를 컴퓨터에 저장해둔것이 있어 일단은 그 이미지를 통해 슬라이드를 구현해보려고한다.. 프로젝트 폴더에 옮긴 이미지 경로를 지정해주고

const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      const nextIndex = (currentIndex + 1) % images.length;
      scrollViewRef.current?.scrollTo({
        x: nextIndex * width,
        animated: true,
      });
      setCurrentIndex(nextIndex);
    }, 5000);

    return () => clearInterval(interval);
  }, [currentIndex]);

- 처음 이미지 인덱스값은 0으로 초기화 시킨 상태에서 setInterval은 5000ms(5초)마다 화면 전환이 이루어지도록.

- currentIndex + 1로 현재 인덱스의 다음 인덱스를 구하도록.

- % images.length로 나머지값을 구해서 마지막 인덱스에서 첫번째 인덱스로 무한 슬라이드가 가능하도록 구현하였다.

예) 나는 이미지를 총 4장 등록했으므로 images.length = 4 이고 첫번째 사진의 인덱스값은 0, 마지막 사진의 인덱스값은 3이므로 nextIndex = (3 + 1) % 4 = 0이 되면서 첫번째 이미지로 돌아감

scrollViewRef.current?.scrollTo({
        x: nextIndex * width,
        animated: true,
      });

- scrollViewRef.current가 존재할 경우에만 scrollTo 메서드를 호출

- scrollTo 는 ScrollView를 특정 위치로 스크롤하는 기능

- x 는 가로 방향으로 스크롤할 위치를 의미 

- nextIndex * width는 다음 이미지가 시작하는 위치

- animated: true 는 스크롤할때 부드러운 애니메이션 효과가 적용되도록함 만약 false 로 설정하면 애니메이션없이 바로 스크롤

 

구현된 이미지 슬라이드

이미지 출처 : 인터파크 티켓

 

3. Bottom Slide

const bottomAnim = new Animated.Value(0); 

let lastScrollY = 0;

- 하단 메뉴바가 스크롤에 따라서 나타났다가 사라지도록 구현

- lastScrollY 는 마지막 스크롤 위치를 저장하는 변수

export const handleScroll = (event: any) => {
  const currentScrollY = event.nativeEvent.contentOffset.y;

스크롤 이벤트가 발생하면 handleScroll이 호출된다. currentScrollY로 현재 Y축 스크롤 위치를 가져온다.

if (currentScrollY > lastScrollY + 10) {
  Animated.timing(bottomAnim, {
    toValue: 100, 
    duration: 200, 
    useNativeDriver: true, 
  }).start();
}

- 화면을 아래로 스크롤( currentScrollY > lastScrollY + 10 )할때 toValue:100px 아래로 이동시키면서 화면에서 숨김

- 스크롤이 내려가면 currentSrollY값 증가

- Animated.timing은 React Native의 Animated API 중에 하나로 주로 부드럽게 움직이거나, 투명도 변화, 위치 이동 등의 효과를 구현할 때 사용된다고 하네요~

- useNativeDriver: 애니메이션을 네이티브 드라이버로 실행할지 여부. true로 설정하면 애니메이션이 네이티브 스레드에서 실행되어 성능이 향상

- start(callback): 애니메이션을 시작하며, 애니메이션이 끝난 후 호출할 콜백 함수

else if (currentScrollY < lastScrollY - 10) {
    Animated.timing(bottomAnim, {
      toValue: 0,
      duration: 200,
      useNativeDriver: true,
    }).start();
  }

  lastScrollY = currentScrollY;
};

- 화면을 위로 스크롤( currentScrollY < lastScrollY - 10 )할때 toValue: 0 다시 원래 위치로 이동시킴

- lastScrollY에 현재 스크롤 위치 저장하여 다음 스크롤 이벤트도 비교

const HomeBottomMenu = () => {
  return (
    <Animated.View
      style={[
        styles.bottomContainer,
        { transform: [{ translateY: bottomAnim }] },
      ]}
    >

{ transform: [{ translateY: bottomAnim }] } = transform을 사용하여, Y축으로 애니메이션 이동을 적용

 

구현된 하단 메뉴바

 

들어갈 메뉴들은 아직 고민중.. 일단 이 글에는 이렇게 두가지만 정리하겠슴 😀

 

2025년은 이제 학생 신분이 끝나고 새로운 시작을 하게 되는 점에서 의미도 있지만,

콜드플레이, 오아시스가 내한을 하는 2025년이다...

티켓팅은 성공했으니 얼른 콘서트 당일이 오기를...