✏️ 미션 조건
명함으로 3명을 랜덤하게 추첨하는 코드를 작성하세요.
1. 데이터 초기화
명함 리스트는 데이터 베이스에 저장되어 있습니다.
우리는 아직 api 를 호출하는 방법을 배우지 않았기 때문에, api 호출 할 필요는 없습니다.
다만 api 호출을 한다고 가정하고, 전달 드리는 명함 리스트를 알맞은 위치에서 초기화 해주세요.
데이터는 아래 링크에서 확인할 수 있습니다.
2. 추첨하기 버튼과 명함 컴포넌트 구현
추첨하기 버튼을 누르면, 1에서 초기화 한 명함 리스트 중 하나의 명함을 고릅니다. 추첨된 명함 정보를 명함 컴포넌트에 전달하는 방식으로 구현합니다.
3. 상세 조건
추첨하기 버튼을 눌렀을 때, 동일한 사람이 또 다시 추첨되면 안되기 때문에 당첨자는 응답 받은 배열에서 제거합니다.
4. 상세 조건
당첨자는 나중에 확인하기 위해, 별도의 데이터로 저장하고 있어야 합니다.
명함 컴포넌트의 디자인은 없어도 괜찮습니다.
명함 리스트가 초기화 되기 전까지, 명함 컴포넌트는 렌더링 되지 않습니다.
추첨하기 버튼을 두(n)번째 눌렀을 때, 이전에 처음(n-1) 그렸던 명함은 사라지고 두번 째 명함 정보만 렌더링 되면 됩니다.
5. 추첨 완료 기능 구현
추첨하기 버튼을 4번 째 누르면, “이미 3명의 추첨을 완료했습니다. 당첨자는 AAA, BBB, CCC 입니다.” 라는 window.alert() 을 띄운다.
📝 미션 풀이
1. 함수형 컴포넌트를 사용하여 당첨자를 랜덤으로 추첨하는 기능을 구현
function App() {
const [cards, setCards] = useState([]);
const [pickedCards, setPickedCards] = useState([]);
function draw() {
// 조건 추가
if (pickedCards.length > 2) {
const names = pickedCards.reduce((acc, cur) => {
return (acc = acc.concat(`${cur.name}, `));
}, "");
return alert(`당첨자는 ${names} 입니다.`);
}
// 추첨하기 버튼을 누르면 랜덤하게 하나의 명함을 고른다.
const randomIdx = Math.floor(Math.random() * cards.length);
const randomItem = cards[randomIdx];
// 중복 제거
setCards(cards.filter((c) => c.phoneNumber !== randomItem.phoneNumber));
// 당첨자(3명이기 때문에 배열이야함) 관리
setPickedCards([...pickedCards, randomItem]);
}
useEffect(() => {
setCards(datas);
}, []);
return (
<div>
{cards.length > 0 && <button onClick={draw}>추첨하기</button>}
{pickedCards.length > 0 && (
<BusinessCarad info={pickedCards[pickedCards.length - 1]} />
)}
</div>
);
}컴포넌트 내부에서 사용되는 useState 훅을 이용하여, cards와 pickedCards라는 두 개의 상태 값을 선언합니다.
cards는 추첨 대상이 될 명함 데이터의 배열이며, pickedCards는 추첨된 명함 데이터를 저장하는 배열입니다.
draw 함수는 추첨하기 버튼을 클릭했을 때 호출되는 함수로, pickedCards 배열의 길이가 3 이상인 경우에는 이미 추첨이 완료되었으므로 경고창을 띄우고 함수를 종료합니다.
그렇지 않은 경우, cards 배열에서 랜덤하게 하나의 명함을 선택한 뒤, setCards 함수를 사용하여 중복된 명함을 제거한 새로운 cards 배열을 설정합니다.
이후, setPickedCards 함수를 사용하여 새로운 randomItem을 pickedCards 배열에 추가합니다.
useEffect 훅은 컴포넌트가 마운트될 때, datas 배열을 cards 상태 값으로 설정합니다. datas는 명함 데이터가 담긴 배열입니다.
컴포넌트는 추첨하기 버튼을 누르면 draw 함수가 실행되며, 추첨된 명함은 pickedCards 배열에 추가됩니다.
마지막으로, BusinessCarad 컴포넌트를 사용하여 마지막으로 추첨된 명함을 화면에 렌더링합니다.
2. BusinessCarad라는 이름의 React 함수형 컴포넌트를 정의
export default function BusinessCarad(props) {
const { company, team, name, phoneNumber, email } = props.info;
return (
<div>
<div>회사: {company}</div>
<div>팀: {team}</div>
<div>이름: {name}</div>
<div>전화번호: {phoneNumber}</div>
<div>e-mail: {email}</div>
</div>
);
}props 매개변수를 받아와, 해당 매개변수로부터 company, team, name, phoneNumber, email 등의 값을 추출합니다.
이후, 추출된 값들을 사용하여 명함 정보를 화면에 렌더링합니다.
예를 들어, {company}와 같은 형식으로 중괄호({}) 안에 변수 이름을 넣으면, 해당 변수의 값이 렌더링됩니다.
따라서, 위 코드에서는 다음과 같은 명함 정보가 화면에 렌더링됩니다.
