LearnFit
YouTube, Build a Memory Game with React #6 - Comparing Card Choices
#6 리액트로 메모리 게임 만들기 - 카드 비교 로직 구현
#전체
#개발자
#프론트엔드
#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
01:16카드가 두 번 선택 되었다면 다시 선택하기 위해 두 카드 선택 여부를 나타내는 state를 초기화해야합니다. 이를 resetTurn으로 구현했습니다.(turn은 1 증가)
01:5433번 줄에는 choiceOne, choiceTwo를 비교할 수 없습니다. 왜냐하면 setChoiceOne, setChoiceTwo는 비동기적으로 실행되기 때문입니다.
즉 useEffect를 쓸 때가 온 것이죠(특정 값의 변화를 트리거로 설정할 수 있고 트리거 만족 시 원하는 로직 수행 가능)
03:01useEffect 사용
03:49useEffect의 트리거로 choiceOne의 변화, choiceTwo의 변화를 설정합니다(즉, 카드가 선택될 때마다)
04:26카드가 선택될 때마다 실행할 로직을 짭니다.
이때 이 로직의 첫 조건문은 두 카드가 모두 선택되었을 경우입니다
05:28두 번째 조건은 같은 카드가 선택되었을 경우입니다.
이때 console.log로 those cards match를 출력하며 두 선택 카드를 리셋합니다.
06:22두 개의 카드가 모두 선택 되었지만 두 카드가 같지 않을 경우에도 console.log 출력과 카드 리셋 로직을 수행합니다.
06:46카드를 클릭해보며 구현한 로직이 동작하는지 확인합니다.
✔ 학습 완료
이 학습노트가 포함된 러닝패스예요.
서원석님의 다른 노트는 어때요?
서원석
의 학습노트
리액트로 이미지 미리보기 구현(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초 만에 가입하기