뒤로 가기
홈으로 이동
LearnFit
공유하기
YouTube, Build a Memory Game with React #8 - Flipping Cards
서원석님의 학습노트

#8 리액트로 메모리 게임 만들기 - 카드 앞면 UI 구현

#전체
#개발자
#프론트엔드
#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:44어떤 카드가 matched인지는 알지만 이를 UI로 표현하고 있지는 않습니다. 이제 이를 하기 위해 SingleCard 컴포넌트에 flipped props를 넘깁니다(이 flipped 여부로 UI 변경하려고)
01:19카드는 언제 앞면이 되어야할까요?(flipped가 true) 그것은 card의 matched가 true이거나(짝맞추기 성공한 카드) 현재 고른 카드일 경우입니다.(choiceOne, choiceTwo)
02:53App에서 SingleCard에 각 시나리오에 맞게 flipped를 넘겨주었으므로 이제 받은 SingleCard에서 어떻게 화면에 표시될지 선택해야겠네요.
07:18두 카드를 골랐을 때 매칭되지 않으면 눈깜짝할 사이에 다시 뒷면이 되어버립니다. 이는 useEffect에서 짠 로직이 딜레이없이 바로 choiceOne, choiceTwo를 초기화해버리는 resetTurn을 호출해버려서 그렇습니다. 이 resetTurn 호출을 지연시킬필요가 있습니다.
07:56setTimeout을 활용해서 호출 지연
✔ 학습 완료

이 학습노트가 포함된 러닝패스예요.

서원석님의 다른 노트는 어때요?

서원석의 프로필 이미지
서원석
의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
25
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

네거티브 마진 negative margins | 코딩가나다 | 빔캠프

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
6
04:38
B에 negative margin을 적용하기
05:00
마크업 상에서 아래 쪽에 위치하면 위로 올라갑니다. *negative margin과 상관없는 이야기
👍
6
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기