Thumbnail
개발 · 프로그래밍 프론트엔드

리액트 훅(React Hook)으로 만드는 웹앱 대시보드

(4)
5개의 수강평 ∙  54명의 수강생

22,000원

지식공유자: 최광성
총 17개 수업 (1시간 47분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[프론트엔드] 강의입니다.

모던 프론트엔드 프레임워크 중 가장 인기있는 React(리액트), 하지만 배우기가 어렵습니다. 이를 해결하기 위해 훅(Hook)이 나왔습니다. 본 강의는 훅을 이용해 React를 쉽게 배울 수 있도록 도와드립니다.

✍️
이런 걸
배워요!
React 기초
React Hook 사용법

할 일 관리 웹 앱 개발✅로
쉽고 재미있게 배우는 리액트 훅!

이 강의는! 📖

React Hook?

훅(Hook)이란, 함수형 컴포넌트에서도 
클래스형 컴포넌트의 기능을 사용할 수 있도록
 React 16.8 버전부터 도입된 기능입니다.

현재 프론트엔드 프레임워크 중 가장 인기있는 프레임워크, 리액트에서 최근 함수형 개발 방법을 가능하게 만들어주는 훅을 발표했습니다. 훅을 이용하면 재사용 가능한 로직을 쉽게 만들 수 있고, 보다 간편하게 기능을 구현할 수 있습니다.

본 강의에서는 리액트 훅(React Hook)으로 할 일 관리(To-do List) 웹앱을 만들어 봅니다. 아래와 같은 할일관리앱을 훅을 통해 함수형 개발 방식으로 개발할 수 있습니다.


누가 배우면 좋을까요? 📐

리액트(React)
쉽고 재미있게
접근하고 싶으신 분
기초 자바스크립트의
다음 단계

학습하고 싶으신 분
프론트엔드 개발자가
되고 싶은
개발자 취업 준비생
  • 기술은 배웠는데, 어디에 어떻게 쓰이는지 감이 오지 않았던 분들을 위한 강의입니다.
  • 각 단계를 개발 가능한 수준으로 나눠, 단계별로 차근차근 익히고 활용할 수 있어요.
  • 파트별로 기능을 직접 만들어보고, 더 높은 학습 효과를 얻어보세요!

직접 만들어보세요! 📜

리액트 훅(React Hook)으로 위와 같은 할 일 관리 앱을 개발할 수 있습니다. (바로가기)

기본에 충실한 설명으로
초보자도 쉽게
따라할 수 있어요.

실제로 리액트 훅
웹앱 개발 과정에서
어떻게 쓰이는지 배워요.

쉽고 간단한
개발환경 설정을 위한
CodePen을 사용해요.

리액트 개발 전체
경험할 수 있는
예제를 만들어봅니다.


예상 질문 Q&A 💬

Q. 리액트를 알아야 들을 수 있나요?

본 강의는 리액트 기초를 다룹니다. 설명을 나열하는 대신 아주 간단한 웹앱을 직접 개발해보면서 리액트의 기능을 파악할 수 있게 만들었습니다.

Q. 수강 후, 리액트에 대해 얼마나 알 수 있을까요?

모던 자바스크립트 학습 범위는 크게 3가지로 나눌 수 있습니다. 1) 동적 UI, 2) Router를 통한 페이지 이동, 3) 서버와 통신입니다. 본 강의에서는 이 중에서 “동적 UI”를 배울 수 있습니다.

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
자바스크립트 기본기가 있으신 분
쉬운 React 개발 방법을 알고 싶은 분
React Hook 을 배우고 싶은 분
📚
선수 지식,
필요할까요?
자바스크립트
HTML

안녕하세요
최광성 입니다.
최광성의 썸네일
  • 현) 리얼메이커 수석 개발자
  • 전) CCG 수석 개발자
  • 전) VARDOT 소프트웨어 엔지니어, 드루팔 개발자
  • 전) 반도체 에칭 시뮬레이션 책임 개발자
커리큘럼 총 17 개 ˙ 1시간 47분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 리액트 훅(React Hook)으로 만드는 웹앱
강의 소개 미리보기 02:26 개발 환경 미리보기 10:59 Input 요소 추가 미리보기 09:20 상태와 상태관리자 미리보기 05:13
useState 06:30
Input 밸류, State 업데이트 09:36
리스트 맵 함수 사용, 키 값 08:08
Task 리스트 추가 07:47
setTask를 이용한 Input 밸류 초기화 04:22
스타일 변경 05:20
clickHandler 추가 10:35
취소선 기능 추가 02:26
DefaultChecked 설정 02:00
삭제버튼 기능 활성화 04:59
useContext 소개 07:07
useContext 구현 10:30
마치며 ... 00:31
강의 게시일 : 2021년 05월 24일 (마지막 업데이트일 : 2021년 05월 24일)
수강평 총 5개
수강생분들이 직접 작성하신 수강평입니다.
4
5개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
didue thumbnail
3
입문용이라기보단 react를 한번쯤 써보았거나, js기반의 다른 프론트언어를 경험해본 사람들을 대상으로 한 react hook에 대해 공부하고 싶은 사람들을 위한 강의. 강의 1편당 시간이 짧은편 임에도 중요하지않은 내용이 많고 건너뛰는 내용이 많아, 유료강의 임에도 질적인 만족감은 조금 떨어지는 편.
2023-09-25
study1 study1 thumbnail
4
수고 하셨습니다.
2022-05-12
민경희 thumbnail
3
초급이라고 하기엔 건너뛰는 내용이 많고 강의 대상이 조금 애매해 보입니다. 강의 시간 및 진행 속도 대비 시간잡아먹는 부분들이 조금 많아보입니다.. 개인적으로는 가성비가 좋지 않은 강의라고 생각합니다.
2022-01-12
지식공유자 최광성
말씀 감사드립니다. 더 좋은 강의 만들도록 노력하겠습니다.
2022-01-12
3chamchi thumbnail
5
감사합니다
2021-07-30
지식공유자 최광성
감사합니다. :)
2021-07-30
Seolah Kim thumbnail
5
좋은 수업 잘들었습니다. 감사합니다. React 입문용으로 좋습니다. Vue.js의 지식이 있어서 보다 간단하게 강의 이해가 되었고, 2시간여만에 간단한 웹앱을 만들어 볼 수 있어 좋았습니다. useContext의 개념을 알게 된 것이 이번 강의에서 공부한 것들 중 가장 도움이 되었습니다. 강의를 듣고 아쉬웠던 점은 진행이 조금 더 빨랐으면 하는 부분과 유료강의인만큼 수업 내용에 대해 설명이 더 리치했으면 하는 바람입니다. 예를 들면 UseContext에 대한 내용을 다룰 때는 장단점과 함께 사용을 남발하게 되면 생기는 트러블, 주의점 같은 부분입니다.
2021-06-09
지식공유자 최광성
리뷰 남겨주셔서 감사합니다. 남기신 피드백을 참고해서 내용을 보강해보겠습니다. 감사합니다.
2021-06-09