[RN] react-native Random Array - 랜덤배열 만들기

반응형

🐰: 기획팀에서 익명 게시판에서 컴포넌트가 마운트 될 때 마다

유저 프로필 이미지가 랜덤으로 노출되는 기능을 요청주셨다.

 

    //랜덤 이미지
    const [randomImage, setRandomImage] = useState('');

    useEffect(() => {
      const myImages = [
        {image: require('../../assets/images/baseballLife/random-image1.png')},
        {image: require('../../assets/images/baseballLife/random-image2.png')},
        {image: require('../../assets/images/baseballLife/random-image3.png')},
        {image: require('../../assets/images/baseballLife/random-image4.png')},
        {image: require('../../assets/images/baseballLife/random-image5.png')},
        {image: require('../../assets/images/baseballLife/random-image6.png')},
      ];
      const randomImageIndex = Math.floor(Math.random() * myImages.length);
      setRandomImage(myImages[randomImageIndex].image);
    }, []);
 
 
 
    
    //이미지가 출력되는 곳
   <Photo
     w={60}
     h={60}
     radius={60}
     source={randomImage}
   />

 

 

코드해석

 const [randomImage, setRandomImage] = useState('');

randomImage라는 상태와 이 상태를 업데이트하는 setRandomImage 함수를 useState('')를 사용하여 초기화한다. 이 상태는 랜덤 이미지의 경로를 저장한다.

 

useEffect(() => {
      const myImages = [
        {image: require('이미지경로/random-image1.png')},
        {image: require('이미지경로/random-image2.png')},
        {image: require('이미지경로/random-image3.png')},
        {image: require('이미지경로random-image4.png')},
        {image: require('이미지경로/random-image5.png')},
        {image: require('이미지경로/random-image6.png')},
      ];
      const randomImageIndex = Math.floor(Math.random() * myImages.length);
      setRandomImage(myImages[randomImageIndex].image);
    }, []);

- useEffect 훅을 사용하여 컴포넌트가 처음 렌더링될 때 한 번 실행되도록 설정합니다. 빈 배열 []이 전달되었으므로, 이 useEffect는 컴포넌트가 처음 렌더링될 때만 실행된다.

- myImages라는 배열은 6개의 이미지 객체를 포함하고 있습니다. 각 이미지 객체에는 image라는 키가 있으며, 해당 이미지의 경로가 값으로 지정되어 있습니다.

- Math.random() 함수를 사용하여 배열 myImages에서 랜덤하게 이미지를 선택한다. Math.random()은 0부터 1 사이의 난수를 생성하므로, 배열의 길이를 곱하고 Math.floor() 함수를 사용하여 소수점을 버림으로써 배열 인덱스를 얻을 수 있다.

- 선택된 랜덤 이미지의 경로를 setRandomImage 함수를 호출하여 randomImage 상태에 설정합니다. 이렇게 함으로써, 컴포넌트가 렌더링될 때 선택된 랜덤 이미지를 화면에 표시할 수 있습니다.

 

   //이미지 출력되는 곳
   <Photo
     w={60}
     h={60}
     radius={60}
     source={randomImage}
   />

마지막으로 이미지가 출력되는 Photo라이브러리의 source에 연결을 시켜주면 컴포넌트가 마운트 될때마다 6개의 이미지가 랜덤으로 출력된다 !