[React] 배열에서 랜덤 추출 후 출력하기

방학이 어느덧 끝나가네요. 

 

학기중에도 프로젝트 계속 진행해 보려고 합니다!

 

지난 시간에 이어서 버튼을 한 개 추가 해보겠습니다.

 

과자 페이지

 

function Snack(){

  const navigate = useNavigate();

  const [snack,setSnack] = useState("snack")

  return (

   

    <div className = "Open">

      과자

      <div className='Home'><Button variant="outline-warning"size ="lg" onClick={()=>{navigate("/")}}>홈</Button></div>

      <Button variant="outline-warning"size ="lg" onClick={()=>{navigate("/getsnack")}}>과자 뽑기</Button>

      <Outlet></Outlet>

   

     

    </div>

   

  )

}

 

과자 뽑기 버튼을 누르면 과자를 뽑아주는 getsnack페이지로 이동하도록 만들었습니다.

 

과자 뽑기 페이지

 

input과 button 컴포넌트를 사용해서 과자 뽑기 페이지를 만들었습니다. 하지만 홈 버튼이 너무 안보이죠?

 

unction GetSnack(){

  const navigate = useNavigate();

  const [snack,setSnack] = useState("snack")

  return (

   

    <div className = "Open">

      <div className='Home'><Button variant="outline-dark"size ="lg" onClick={()=>{navigate("/")}}>홈</Button></div>

      <input type = "text"></input><button>입력</button>

      <Outlet></Outlet>

   

     

    </div>

   

  )

}

부트스트랩의 outline-dark 스타일을 사용해서 좀 더 잘보이도록 홈버튼을 수정하였습니다.

 

 

이제 현재 가지고 있는 과자를 입력하면 과자를 state형태로 저장했다가 무작위 과자를 선택해서 메세지를 출력해주는

 

프로그램을 만들어보려고 합니다. 여기서는 리액트에서 가장 중요한 state를 다루는 useState를 import하여 사용해야합니

 

다.

 

import { useState } from 'react';

위에 이렇게 한 줄을 추가해줍니다.

 

이제 input창에 정보를 입력하고 입력 버튼을 누르면 state를 변경해서 저장하도록 만들어야 합니다.

 

그러면 먼저 input창에 이벤트를 줘야겠죠?

 

const [snack,setSnack] = useState("")

const[snacks,setSnacks] = useState([]);

   const onChange = e => {

  setSnack(e.target.value);

};

 

먼저 input창에 값을 입력하면 그 값을 snack으로 초기화 되게 하였습니다.

 

<input type = "text"  onChange={onChange}></input>

 

그리고 input태그 안에 이벤트를 선언하면 input값이 snack값으로 변경될 것입니다.

 

const onCreate = e => {

  setSnacks(snacks => [...snacks, snack]);

  setSnack('');

};

 

두 번째로는 snack 값을 snacks라는 객체에 집어 넣을 것입니다. onCreate 이벤트를 만들어서 버튼에 넣어줍시다.

  <button onClick={onCreate}>등록</button>

<div className='Snacklist'>{snacks}</div>

그리고 한 번 출력되는지 확인해 볼까요?

 

과자 등록 및 출력

성공적으로 배열에 저장된 후 출력되네요. 조금 보기좋게 바꿔보겠습니다.

 

css수정 및 배열리스트 출력

버튼들을 display : inline을 통해 input과 같은 라인에 배치하였고, 밑에는 등록된 리스트를 볼 수 있게 출력하는

 

코드를 짰습니다.

<div> {

        snacks.map(function(a,i){

          return (

          <div className="list">

            <h4>{i}. { snacks[i] }</h4>  

          </div> )

        })

      }</div>

이때는 map 컴포넌트를 사용해서 배열의 길이만큼 반복하여 돌며 배열의 리스트들을 출력하였습니다.

 

map 컴포넌트는 일종의 반복문이라고 생각하면 됩니다.

 

다음은 랜덤으로 과자들 중 하나를 뽑는 단계입니다.

 

function RandomnArray(array) {

  const random = Math.floor(Math.random() * array.length);

  return array[random];

}

배열의 길이만큼 반복하여 배열의 요소 중 하나를 랜덤으로 뽑아주는 코드입니다. 배열의 길이만큼의 숫자 중 하나를

 

랜덤으로 추출하여 그 숫자에 해당하는 인덱스를 리턴합니다.

 

글자 색 수정

 

마지막으로 추출된 것을 경고창으로 띄워주면 끝일 것 같네요..!

 

기능 구현 완성

 

짠! 제가 원하는 대로 출력되었습니다.

 

감격스럽네요 ㅠㅠ

 

onClick={()=>{alert("오늘의 과자는 " + RandomnArray(snacks) + "입니다 :D")}}

경고창 코드입니다.

최종 페이지 기능

 

아주 짧은 토이프로젝트를 진행해보았습니다. 리액트는 코딩을하면 즉각 눈에 보이기 때문에 구현하면서 코딩에 재미를 

 

느낄 수 있었습니다. 다음 시간에는 새로운 프로젝트를 진행해보겠습니다.

 

읽어주셔서 감사합니다!