명함 list는 이미 저장이 되어 있는 상태이다.
- api 호출을 한다고 가정하고, 명함 리스트를 알맞은 위치에서 초기화
component가 처음으로 mount 되었을 때 api를 호출해서 정보를 가져와야 함
=> useEffect() 사용
component가 mount된 직후에 1번만 실행될 코드이기 때문에 빈 배열을 넣어줌.
=> componentDidMount와 똑같이 동작
const [cards, setCards] = useState([])
setCards(datas)useState를 가져와서 상태관리를 해주고, setCards(datas)로 초기화
- 추첨하기 버튼과 명함 컴포넌트 구현, 추첨하기 버튼을 누르면, 랜덤하게 하나의 명함을 고른다.
추첨하기 button을 만들어주고 클릭하면 draw 함수를 실행한다.
draw 함수에는 랜덤하게 값을 가져오도록 설정
2-1. 중복된 값 제거
setCards(cards.filter(c => c.phoneNumber !== randomItem.phoneNumber))filter로 phoneNumber가 같지 않은 것만 가져오도록 설정
2-2. 당첨자는 나중에 확인하기 위해, 별도의 데이터로 저장하고 있어야 한다.
새로운 배열을 만들어주어야 하기 때문에 useState() 사용
현재 pickedCards 배열에 randomItem을 더해주도록 설정
cards가 있어야 추첨할 수 있게 하기 위함.
2-3. 명함 component 구현
- 추첨하기 버튼을 4번 째 누르면, "이미 3명의 추첨을 완료했습니다. 당첨자는 AAA, BBB, CCC 입니다." 라는 window.alert() 을 띄운다.
결과
