셀렉트박스(Select-box)로 스택-큐(Stack-Queue) 변경 가능한 앱 리액트로 만들기

셀렉트 박스에서 스택과 큐를 선택해서 배열의 모양과 값을 변경하는 미니앱을 만들어 봤다. 

아쉬운점도 있지만, 나름 재밌게 만들었다. 좀 더 실력이 쌓이면 세련되게 코드를 짜보고 싶다는 생각이 남는 경험이었다.

 

 

 

코드 : 

import React, { useState } from "react";
 
const StackQueue = () => {
  const [nodeArr, setNodeArr] = useState([]);
  const [index, setIndex] = useState(0);
  const [valueIndex, setValueIndex] = useState(0);
  const [stackAndQueue, setstackAndQueue] = useState("stack");
  const [floatValue, setFloatValue] = useState(false);
  console.log(stackAndQueue);
 
  const style = {
    arrBox: {
      height: "2rem",
      width: "8rem",
      display: "block",
      background: "green",
      textAlign: "center",
      float: floatValue ? "left" : "",
    },
  };
 
  const valueChoice = (e) => {
    if (e.target.value === "stack") {
      setstackAndQueue("stack");
      setFloatValue(false);
      reverseNodeArr(nodeArr, index);
    }
 
    if (e.target.value === "queue") {
      setstackAndQueue("queue");
      setFloatValue(true);
      sortNodeArr(nodeArr, index);
    }
  };
 
  const nodeAdd = () => {
    nodeArr[valueIndex] = index;
    if (stackAndQueue === "stack") {
      reverseNodeArr(nodeArr, index);
    }
    if (stackAndQueue === "queue") {
      sortNodeArr(nodeArr, index);
    }
    setIndex(index + 1);
    setValueIndex(valueIndex + 1);
  };
 
  const nodeDelete = () => {
    nodeArr.shift();
    setValueIndex(valueIndex - 1);
    setNodeArr(nodeArr);
  };
 
  const reverseNodeArr = (arr, index) => {
    let sortArr = [];
    let tmp = 0;
 
    if (index > 0) {
      sortArr = arr;
      for (let i = 0; i < index + 1; i++) {
        for (let j = 0; j < index - i; j++) {
          if (sortArr[j] < sortArr[j + 1]) {
            tmp = sortArr[j];
            sortArr[j] = sortArr[j + 1];
            sortArr[j + 1] = tmp;
          }
        }
      }
    }
  };
 
  const sortNodeArr = (arr, index) => {
    let sortArr = [];
    let tmp = 0;
 
    if (index > 0) {
      sortArr = arr;
      for (let i = 0; i < index + 1; i++) {
        for (let j = 0; j < index - i; j++) {
          if (sortArr[j] > sortArr[j + 1]) {
            tmp = sortArr[j];
            sortArr[j] = sortArr[j + 1];
            sortArr[j + 1] = tmp;
          }
        }
      }
    }
  };
 
  return (
    <>
      <div>
        자료구조 선택
        <select name="dataStructure" onChange={valueChoice}>
          <option value="stack" defaultValue>
            stack
          </option>
          <option value="queue">queue</option>
        </select>
      </div>
      <div>
        {nodeArr.length === 0 ? (
          <p>현재 노드가 존재하지 않습니다.</p>
        ) : (
          <>
            {nodeArr.map((element) => {
              return (
                <>
                  <div style={style.arrBox}>{element}</div>
                </>
              );
            })}
          </>
        )}
      </div>
      <br />
      <br />
      <div>
        <button onClick={nodeAdd}>노드 추가</button>
        <button onClick={nodeDelete}>노드 제거</button>
      </div>
    </>
  );
};
 
export default StackQueue;

 

 

깃주소 :

https://github.com/akdl911215/Test-Collection/tree/master/storybook/stack-queue

GitHub - akdl911215/Test-Collection: test-collection

 

 

 

 

 

 

베타존 : 네이버쇼핑 스마트스토어