러닝패스

리액트로 메모리 게임 구현하기

멤버십
시리즈
⚡ 1시간이면 이런걸 할 수 있어요!
Memory 게임을 구현에 필요한 로직을 useState, useEffect로 풀어내며 hook 사용의 감을 잡아요.
컴포넌트 간의 state, props, 로직 전달을 훈련해요.
학습 시간을 줄였어요!
1시간
핵심 콘텐츠만 선별했어요!
12개 콘텐츠
이 분들은 꼭 보세요.
React 입문자, 초보자
미리 알고 있어야 해요.
HTML, CSS, JS, React
이 러닝패스가 어떠신가요?
(내 보관함에서 다시 볼 수 있어요)
useState와 useEffect 훅을 활용해서 간단한 메모리 게임을 구현하는 프로젝트입니다. 해당 프로젝트의 로직 구현을 위해서는 적절한 값에 대해 state로 관리할 지 판단할줄 알아야하며 state 갱신 시 useEffect를 사용할 줄 아는 판단력도 필요합니다. 이 과정과 동시에 원하는대로 화면 상에서 구현하기 위해 컴포넌트 간 필요한 상태, 로직, props를 잘 전달할 줄 알아야하는데요, 쭉 프로젝트를 따라가며 이 모든 과정을 훈련해볼까요?
NOTE
1. 메모리 게임을 구현하기 위한 리액트 프로젝트 셋팅 및 데모를 확인합니다.
Video
Build a Memory Game with React #1 - Intro & Setup
출처: https://youtu.be/ZCKohZwGZMw
서원석 님의 학습노트
NOTE
2. useState로 cards와 turns의 상태를 관리합니다. 그리고 카드 데이터를 초기화하며 카드 섞기에 해당하는 함수를 구현합니다.
Video
Build a Memory Game with React #2 - Shuffling Cards
출처: https://youtu.be/XcHNBMG1GQI
서원석 님의 학습노트
서원석님의 멤버십 전용 콘텐츠에요.
지금 가입하고 큐레이터의 꿀팁을 확인하세요!
멤버십 가입하기
이미 멤버십 회원이라면 로그인하세요.
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기