리액트 useState, useEffect로 구현하는 프로젝트 모음

멤버십

시리즈

⚡ 6개의 콘텐츠로 2시간이면 이런걸 할 수 있어요!

•

Scroll progress indicator를 구현해요.

•

Pokemon application를 구현해요.

•

이미지 미리보기가 가능한 이미지 파일 업로더를 구현해요.

•

Memory 게임을 구현해요.

이 분들은 꼭 보세요.

React 입문자, 초보자

미리 알고 있어야 해요.

HTML, CSS, JS, React

아무리 이론에 빠삭해도 실제로 써보지 않으면 자신의 것으로 만들기가 어렵습니다. 프로그래밍에서도 마찬가지이구요. 그런 의미에서 다양한 프로젝트를 구현해보며 useState, useEffect에 익숙해져볼까요? *해당 러닝패스는 useState, useEffect의 개념을 쌓은 사람 혹은 프로젝트를 통해 감을 찾고 싶은 사람에게 유용합니다. 구현하는 것: Scroll progress indicator, Pokemon application, 이미지 미리보기가 가능한 이미지 파일 업로더, Memory 게임

큐레이터의 노트 소개

1. 웹 사이트를 스크롤 할 때 남은 스크롤 비율을 보여주는 Scroll progress indicator입니다. useState, useEffect만으로 이 기능이 구현이 되는데요, useEffect로 스크롤 event에 대한 handler를 등록하고 이 handler에서 state를 갱신하는 방식입니다. 구체적인 구현 방법을 들으시니 어떻게 구현해야될지 감이 오지 않으시나요? 어서 가서 보고 오시죠!

서원석 님의 학습노트

학습노트 제목: [React - 요약] 스크롤 진행률을 알려주는 indicator 구현하기

Video

How To Create A Scroll Indicator Progress Bar In React Hooks

출처: https://youtu.be/X1PI52QLanE

#전체 #개발자 #프론트엔드 #arslan #coding #react #reactjs #html #css #progress bar #javascript #reactjs progress bar #scroll indicator progress bar #react scroll indicator progress bar

큐레이터의 노트 소개

2. Pokemon API로부터 포켓몬 정보를 받아와서 화면에 보여주는 application입니다. 이번엔 useEffect를 data fetching 용도로 사용합니다. 거기에 cancelToken(axios), 이전 페이지, 다음 페이지 기능을 덧붙여 구현하는만큼, 이름만 볼 땐 친근감이 들지만 내용은 실용적으로 꽉 차있답니다. 포켓몬 친구들의 이름을 확인하러 가볼까요?

서원석 님의 학습노트