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