Toy Project - 1. 오늘 뭐묵? (점심메뉴 랜덤게임)

프로젝트 설명

오늘 뭐묵?
메뉴를 선택 및 추가하여 후보메뉴를 정한 뒤 랜덤으로 메뉴를 선택해주는 간단한 게임(?)

늘 12시 30분 점심시간이 되면 모두들 한마디씩 하는말 오늘 뭐먹어요? 메뉴 정하다가 점심시간 5~10분 그냥 흘러가버린다. (나에겐 점심시간 1분 1초도 소중해)
그래서 약간의 틈새 시간을 이용해서 만든 결정장애들을 위한 메뉴 골라주는 앱

이 프로젝트는 create-react-app 으로 만들었고, 디자인은 Neumorphism UI로 만들었다.

주요 기능

1. 메뉴 선택

1-1 메뉴 리스트 데이터 만들기

먼저 config.js에 자주가는 점심메뉴를 초기값 배열로 만들어서 메뉴마다 각 고유 id key 와 선택 상태를 관리하기 위한 checked key를 가지고 있는 object를 만들기 위해 createMenuData 함수를 사용하였다.

1-2 메뉴 리스트 렌더링 및 선택 이벤트

메뉴 데이터를 업데이트 및 관리하기 위해 useState hook을 사용하고, 각 메뉴이름과 선택상태를 props로 받아서 렌더링 하기 위해 MenuItem 컴포넌트를 만들었다.

MenuItem 컴포넌트에 onClick 이벤트에 클릭 한 해당 데이터를 props 함수 매개변수로 넣어 부모 컴포넌트에서 menus 데이터를 업데이트하였다.

1-3 선택한 메뉴 렌더링하기

MenuItem 컴포넌트에서 클릭 이벤트로 선택한 메뉴들의 checked 값을 변경하여 상태 데이터 menus가 업데이트 되어있고, 반복문으로 checked가 true인 메뉴 아이템만 렌더링을 하였다.

2. 새 메뉴 추가하기

2-1 새 메뉴 상태값

새 메뉴 추가할 input 상태값을 추가하여 onChange 이벤트 핸들러로 input 어트리뷰트 value값을 업데이트 하였다.

2-2 새 메뉴 배열 추가

메뉴추가 버튼에 클릭 이벤트 핸들러를 적용하였다.
먼저 추가하기 전에 input 상태값을 관리하는 newMenu 문자열 길이가 0일 때 함수 스코프를 빠져나가고, 기존 menus 리스트에 추가할 메뉴가 존재하는지 확인했다.

menus 배열 데이터 state를 함수적 갱신으로 추가할 때 id값이 중복되면 안되고, 값을 1씩 올려야하기 때문에 이전 state 배열에서 마지막 요소 id에 1을 더하여 데이터를 추가한다.

3. 랜덤으로 메뉴 고르기

3-1 JSX 구조 잡기

선택한 메뉴들의 값을 관리하기 위해 useState hook을 만들어서 먼저 조건부 렌더링을 했다.
selectedMenus 배열 길이가 없을 때 메뉴 선택 화면을 렌더링하고, 메뉴를 선택한 후에는 선택한 메뉴들과 메뉴 고르기 버튼을 렌더링한다.

3-2 메뉴 랜덤으로 한개 고르기

먼저 선택한 메뉴(selectedMenus) 아이템에 각 스타일 속성 display를 적용하기 위해서는 엘리먼트 객체가 필요했다.
DOM에 접근할 수 있는 useRef hook을 메뉴아이템 부모에게 생성하여 .current 프로퍼티로 전달된 엘리먼트의 자식 엘리먼트들을 배열로 반환하여 shuffleArray 함수로 배열 요소를 무작위로 섞어서 변수에 저장하였다.

애니메이션 requestAnimationFrame 메소드를 이용하여 매개변수로 들어오는 duration시간(밀리초 단위)만큼 render 함수를 계속 실행하였고, 애니메이션이 작동되는 동안 선택한 메뉴 배열 총 길이에서 index 숫자 하나를 랜덤으로 구해서 무작위로 섞어서 저장한 배열 변수에서 index값 요소를 finished 함수 매개변수로 보냈다. requestAnimationFrame 참고사이트

메뉴 고르기 버튼에 onSuffle 함수를 적용하여 애니메이션 지속시간 duration과 애니메이션이 작동하면서 메뉴 아이템 엘리먼트들의 스타일 속성을 render 콜백 함수에서 적용하고
애니메이션이 종료되었을 때 최종 메뉴 아이템 요소를 finished 콜백 함수 매개변수로 받아 result 상태(state)에 저장하였다.