LearnFit
YouTube, Build a Memory Game with React #5 - Making Card Choices
#5 리액트로 메모리 게임 만들기 - 카드 선택 로직 구현
#전체
#개발자
#프론트엔드
#react
#react tutorial
#react for beginners
#tutorial
#memory game
#react game
#react js
#react memory game
#react card game
#react udemy
#react.js
#javascript
#using react
#react course
#react crash course
00:19선택한 두 카드의 비교를 위해 상태관리 변수 두 개를 추가합니다
(초기값이 null인 이유: 아직 선택 못받음을 나타냅니다)
00:43각 카드를 눌렀을 때 클릭 이벤트가 발생해야합니다. 이는 카드 비교를 위한 트리거가 될 것입니다.
이를 위해 onClick 이벤트 핸들러를 SingleCard 컴포넌트의 cover image에 걸어줍니다.
이때 card는 우선 handleClick이라는 함수를 콜백으로 전달하지만 handleClick의 내용 작성은 우선 나중에 합니다.
02:00handleChoice 함수를 App 컴포넌트에서 만들어줍니다. 이 함수를 SingleCard 컴포넌트에 props로 전달하여 handleClick이 호출될 시 호출되도록 할 예정입니다.
이때 handleChoice는 하나의 인자를 요구합니다. 결국 handleChoice를 호출할 곳은 handleClick이라서 인자가 필요한대, 이 인자를 확보하기 위해 SingleCard 컴포넌트에 추가 prop으로 card를 전달해줍니다. 이렇게 되면 카드 뒷면 클릭 시 card에 대한 정보가 console에 출력 되겠네요.
04:07console.log를 통해 눌린 카드의 정보가 잘 출력 되는 것을 확인했습니다.
이는 부모 컴포넌트인 App에서 자식 컴포넌트인 SingleCard에서의 클릭 때 뭘 할 지 정의할 수 있다는 것을 나타내는데요,
App의 cards를 map해서 나오는 card로 SingleCard 컴포넌트가 만들어지고 있다보니 handleChoice의 인자 card를 예측할 수 있습니다. 그래서 이 card를 가지고 handleClick이 뭘할지를 App에서 정의할 수 있는 것이죠.
이번엔 단순히 선택된 카드 정보를 console.log하는게 아니라 우리의 choiceOne, choiceTwo 상태관리 변수로 관리해봅니다.
05:47이제 handleClick함수는 choiceOne 카드에 데이터가 있으면 card를 choiceTwo에 넣고 데이터가 없으면 choiceOne에 넣는 로직을 갖게 되었습니다.
✔ 학습 완료
이 학습노트가 포함된 러닝패스예요.
서원석님의 다른 노트는 어때요?
서원석
의 학습노트
리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)
Video
⏱ 핵심 스탬프25개
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
서원석
의 학습노트
리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현
Video
⏱ 핵심 스탬프8개
00:00
해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다.
공식 문서: https://reactrouter.com/
00:50
react router 버전5에서 redirect를 구현하는 방법입니다.
*예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨
*특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.
👍
4
👋 다양한 인사이트를
읽어보고 계신가요?
나만의 학습 기록을 남기고,
관리하고 싶다면!
다양한 전문가의 멤버십 전용
콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고,
수익을 올리고 싶다면!
3초 회원가입/로그인으로,
런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기