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

만들면서 배우는 리액트: 컴포넌트 설계와 리팩토링 대시보드

(4.8)
11개의 수강평 ∙  174명의 수강생

44,000원

지식공유자: 장기효(캡틴판교)
총 33개 수업 (3시간 20분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

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

실무에서 가장 많이 사용되고 있는 리액트 프레임워크, 쉽고 빠르고 재밌게 배워보세요! 할 일 관리 앱을 만들면서 리액트의 동작 원리, 컴포넌트 설계, 리팩토링 방법을 배워봅니다.

✍️
이런 걸
배워요!
리액트
JavaScript
React
Vite
NPM
Node.js
Netlify

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
리액트 입문자
프론트엔드 개발자
취업준비생
📚
선수 지식,
필요할까요?
자바스크립트
리액트 기초

안녕하세요
장기효(캡틴판교) 입니다.
장기효(캡틴판교)의 썸네일

인프런에서 8년째 지식을 공유하고 있습니다.

📗 Do it! Vue.js 입문, 쉽게 시작하는 타입스크립트, 나는 네이버 프런트엔드 개발자입니다. 책 3권 집필
📖 Cracking Vue.js, 타입스크립트 핸드북, 웹팩 핸드북. 온라인 무료 가이드북 3권 집필
👨‍💻 캡틴판교의 프론트엔드 개발 유튜브 채널 운영 - 취준생, 주니어 개발자들의 고민을 들을 수 있는 곳
🥤 캡틴판교의 카카오톡 오픈 채팅방 운영 - 프런트엔드 개발 최신 정보와 업계 동료들의 생각을 들을 수 있는 곳

커리큘럼 총 33 개 ˙ 3시간 20분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. 프로젝트 생성과 리액트 기초
프로젝트 생성 안내 미리보기 04:41
프로젝트 생성 04:40
프로젝트 구조 안내 01:54
프로젝트의 NPM 설정 파일 및 관련 파일 안내 05:32
프로젝트 진입점과 컴포넌트 안내 06:35
컴포넌트와 jsx 소개 03:35
섹션 2. 컴포넌트 하나로 만드는 할 일 관리 앱
헤더와 인풋 영역 마크업 및 코드 작성 팁 03:32
인풋 값을 상태로 제어하기 10:23
할 일 저장 기능 구현 07:12
로컬 스토리지 데이터 조회 함수 구현 06:26
할 일 목록을 화면에 표시하기 05:21
할 일 목록 삭제 기능 구현 및 문제점 분석 09:40
할 일 목록 문제점 수정 및 기능 구현 10:23
할 일 추가 기능 개선 10:02
중간 정리 03:10
섹션 3. 리팩토링으로 배우는 컴포넌트 설계와 상태 관리
컴포넌트의 역할과 컴포넌트 트리 04:38
헤더 컴포넌트 생성 및 표시 08:59
인풋 컴포넌트 생성 및 표시 07:33
리스트 컴포넌트 생성 및 표시 09:21
현재 구조의 문제점 분석 04:29
상태를 올려서 프롭스로 내리기 06:22
PropType 관련 안내 및 린트 오류 해결 06:10
할 일 목록 컴포넌트 오동작 해결 및 정리 06:37
인풋 컴포넌트 리팩토링 09:39
리팩토링 정리 02:17
최종 코드 정리 및 브랜치 안내 02:13
섹션 4. 애플리케이션 배포 및 마무리
깃 리포지토리 생성 및 소스 코드 업로드 04:41
사이트 배포와 마무리 08:13
강의 게시일 : 2024년 03월 04일 (마지막 업데이트일 : 2024년 03월 07일)
수강평 총 11개
수강생분들이 직접 작성하신 수강평입니다.
4.8
11개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
지은 thumbnail
5
리액트의 기본 동작 원리를 이해하기에 좋았습니다. 어떻게 돌아가는지 그리고 컴포넌트를 어떻게 분리하면 좋을지에 대해서 간결하게 알 수 있었습니다. 강의를 다 듣고 난 뒤에는 코드가 왜 그렇게 짜여지는지. 컴포넌트 간에 데이터는 어떻게 주고 받는지 사고하는 과정이 머릿 속에 선명하게 돌아가고 그려집니다. 쉬운 구현으로 기초가 되는 뿌리부터 단단하게 잡고 가기에 좋은 강의라 생각합니다. 개념은 배웠는데 동작 원리와 컴포넌트가 어떻게 분리되는지에 대한 사고 과정에서 어려움을 겪고 계신 초급자분들이 보면 좋을 거 같아요! 처음에 이 강의를 봤으면 여기저기서 헤매지 않았을 텐데라는 생각이 들었습니다. 잘 배웠습니다! 감사합니다.🙇🏻‍♀️
2024-03-27
yjh thumbnail
4
안녕하세요. 캠틴판교님 리액트 강의 잘 들었습니다. 1. 강의 완강한 입장에서 추천 대상 - 리액트를 해보긴 했는데, 컴포넌트 분리에 대해 기초적인 고민 - 리액트에 있는 package 같은 파일들의 의미를 모른다. 2. 좋았던 점 - 일단 강의 준비를 너무 잘해주셔서 듣기 편했습니다. - 강의 자료에 대한 링크들이 첨부되어 있어서 도움이 됐습니다. - 자칫 그냥 넘어갈 만한, 익스텐션 셋팅 같은 부분도 초반 강의에 들어 있어서 모르던 사람에게는 꿀팁이 될 거 같습니다. - 적당한 강의 시간에 알찬 내용들 (하루만에 완강했습니다) 3. 아쉬운 점 - 강의 자체에 아쉽다기 보단...저는 조금 중급 강의를 원했던 것 같습니다. 제 기준에서는 쉬운 내용이 너무 많아서 아쉬웠습니다. 전체 : 준비가 잘된 강의라고 느꼈습니다. 이제 막 리액트 시작하는 초보였을 때 제가 이 강의를 들었으면 너무 좋았을 것 같습니다. 추후에 중급 강의가 나오면 꼭 수강하고 싶은 마음이 있습니다. [저만 4점이라서 추가적으로 코멘트 달자면] 1. 캡팡님의 강의력 Good 2. 리액트 배웠는데, 뭐가 뭔진 모르고 따라만 쳤다면 무조건 들어주세요 제발 3. 어떻게 보면 강의 난이도를 혼자 높게 생각하고 수강한 저의 실수일 수도 있습니다
2024-03-18
지식공유자 장기효(캡틴판교)
안녕하세요 yjh님, 진솔한 수강평 남겨주셔서 감사해요 :) 저도 사실 요 강의 설계할 때 적절한 난이도 찾기가 좀 어려웠었는데 말씀하신 것처럼 중급 레벨의 강의는 아닌 것 같아요. 강의 소개 페이지에 안내된 것처럼 초급, 그리고 초급에 가까운 초중급으로 봐주시는게 좋을 것 같습니다. 강의에서 다루는 내용이 리액트 공식 문서에는 Intermediate(중급)으로 나와 있어서 딱 무슨 레벨이다라고 정의하긴 어려운 것 같아요 :) https://react.dev/learn/managing-state 그래도 말씀해 주신 것처럼 저도 이제서야 첫 리액트 강의를 낸거니까요. 이후에 좀 더 난이도 높은 강의들을 준비해 볼게요. 기대 많이해 주세요 감사합니다 :)
2024-03-18
yjh
[저만 4점이라서 추가적으로 코멘트 달자면] 1. 캡팡님의 강의력 Good 2. 리액트 배웠는데, 뭐가 뭔진 모르고 따라만 쳤다면 무조건 들어주세요 제발 3. 어떻게 보면 강의 난이도를 혼자 높게 생각하고 수강한 저의 실수일 수도 있습니다
2024-03-20
나는초보 thumbnail
5
몇년전 장기효님의 Vue강의때문에 회사 생활에 큰 도움 되었습니다. React도 그동안 공부하고 싶었는데, 장기효님 강의 올라온거 보고 주말에 바로 수강신청했습니다. 참고로 장기효님의 강의는 지루하지않게 전체 구성과 스토리를 잘 풀어주시는것 같아서, 공부한다는 느낌보다 유투브보듯이 잼있게 강의를 듣는 기분입니다. 목소리도 좋은것도 한몫 하는것 같네요, React도 이번 강의외 추가 과정을 많이 열어주셨으면하는 바람입니다.
2024-03-24
딘두 thumbnail
4
이번에 회사에서 React로 개발을 진행하게 되어서 예전 기억을 되살려보고자 수강하게되었습니다. Vue3를 사용하다가 React를 보니까 jsx 라는 벽이 있는거 같네요 ㅠ 강의 준비를 잘 해주셔서 너무너무 좋았는데 앞서 다른 분 수강평처럼 저한테는 redux라던가.. 조금 더 난이도 있는 강의였으면 어땠을까 하는 아쉬움이 한켠 남아있네요 아무래도 실무에 바로 투입되어야 하는 입장에서 봤을때는 중급이라고 하기엔 아쉽지만 아예 리액트에 대한 개념이 없는 상태라면 너무너무 좋은 강의가 될 것 같습니다.! 좋은 강의 앞으로도 기대하겠습니다 ^^
2024-03-27
Graham thumbnail
5
이미 다 알고 있었긴 했지만, vue 강의에서도 너무 잘 설명하셔서 복습차원에서 믿고 수강했습니다. 중고급강좌도 기다리겠습니다. 감사합니다!
2024-04-17
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!