• 로그인
  • 장바구니에 상품이 없습니다.

신청하기
  • 170,000 83,000
  • 365 Days

 

리액트 쉽게 설명하기 장인입니다.

'상태관리를 위해 객체를 부모 컴포넌트의 state로부터 props로 받아와서 리턴해주세요' 같은

변태 개발자용어 쓰면서 리액트 어렵게 설명하는 나쁜 사람들이 많아서 준비한

7살도 이해가능한 React 코스입니다.

쓸데없는 Todo App, tic tac toe 예제보다는

어디가서 자랑할 수 있는 블로그, 쇼핑몰 프로젝트 제작과 함께 처음부터 차근차근 알려드립니다.

 

역시 이번 강의도 혼자 리액트로 코딩할 수 있는 사람을 만드는게 목표기 때문에

- 코드 따라적기만 하고 끝내는 강의가 아니라

- 혼자 코딩할 때 도움이 많이되는 문법의 용도와 원리를 많이 설명해드리며

- 많은 DIY 과제가 여러분을 기다리고 있습니다. 혼자 구현해보라는건 혼자해봅시다.

 

(1인 1계정 사용 부탁드립니다. IP 다보임)

 

 

[배울 내용]

- 최근 업데이트된 리액트 18버전으로 진행 

- 리액트 프로젝트 생성, 관리, 빌드하는 법

- 컴포넌트, props, state를 이용한 모던 웹개발 

- JSX for 반복문, 이벤트 핸들러 등 UI기능구현법

- 라우터로 페이지 나누기

- Redux와 context API로 state 관리하기

- Ajax 등으로 서버 API 통신하는 법

- 자주 사용하는 외부 라이브러리 (Bootstrap, Styled component, SASS)

- 자주 필요한 JavaScript ES6 문법들

- lazy loading 등 간단한 성능개선법

- 서버프로젝트와 리액트 연동

 

 

 

[필요한 사전 지식]

- HTML/CSS 기초 

- JavaScript 기초 (var let const, function, if else, for, [], {} 자료 다루기)

- JavaScript가 처음이라면 JavaScript 기초 강의 선행 추천드립니다. 

 

 

 

[업데이트 사항]

- 리액트 18버전내용 추가

 

 

 

 

 

커리큘럼

Part 1 : 블로그 제작 & 기초 문법
React 배우기 전에 쓰는 이유부터 알아야 무료 00:03:00
리액트 React 설치와 개발환경 셋팅 무료 00:08:00
리액트에서 레이아웃 만들 때 쓰는 JSX 문법 3개 무료 00:11:00
중요한 데이터는 변수말고 state에 담습니다 무료 00:12:00
버튼에 기능개발을 해보자 & 리액트 state변경하는 법 무료 00:13:00
array, object state 변경하는 법 무료 00:11:00
Component : 많은 div들을 한 단어로 줄이고 싶으면 00:10:00
리액트 환경에서 동적인 UI 만드는 법 (모달창만들기) 00:10:00
map : 많은 div들을 반복문으로 줄이고 싶은 충동이 들 때 00:12:00
자식이 부모의 state 가져다쓰고 싶을 때는 props 00:09:00
props를 응용한 상세페이지 만들기 00:12:00
input 1 : 사용자가 입력한 글 다루기 00:11:00
input 다루기 2 : 블로그 글발행 기능 만들기 00:08:00
class를 이용한 옛날 React 문법 00:06:00
만든 리액트 사이트 build & Github Pages로 배포해보기 무료 00:05:00
Part 2 : 쇼핑몰 프로젝트
새로운 프로젝트 생성 & Bootstrap 사용하기 00:08:00
이미지 넣는 법 & public 폴더 이용하기 00:12:00
코드 길어지면 import export 하면 됩니다 00:15:00
저번시간 숙제 해설 (Card 컴포넌트 만들기) 00:12:00
리액트 라우터 1 : 셋팅이랑 기본 라우팅 00:12:00
리액트 라우터 2 : navigate, nested routes, outlet 00:13:00
리액트 라우터 3 : URL 파라미터로 상세페이지 100개 만들기 00:11:00
styled-components 00:11:00
Lifecycle과 useEffect 1 00:13:00
Lifecycle과 useEffect 2 00:11:00
리액트에서 서버와 통신하려면 ajax 1 00:10:00
리액트에서 서버와 통신하려면 ajax 2 : post, fetch 00:11:00
리액트에서 탭 UI 만들기 00:13:00
멋있게 전환 애니메이션 주는 법 (transition) 00:13:00
props 싫으면 Context API 써도 됩니다 00:13:00
장바구니 페이지 만들기 & Redux 1 : Redux Toolkit 설치 00:10:00
Redux 2 : store에 state 보관하고 쓰는 법 00:10:00
Redux 3 : store의 state 변경하는 법 00:14:00
Redux 4 : state가 object/array일 경우 변경하는 법 00:13:00
Redux 5 : 장바구니 기능 만들기 숙제 & 응용문제 00:13:00
리액트에서 자주쓰는 if문 작성패턴 5개 무료 00:05:00
localStorage로 만드는 최근 본 상품 기능 1 00:13:00
localStorage로 만드는 최근 본 상품 기능 2 00:10:00
실시간 데이터가 중요하면 react-query 00:12:00
성능개선 1 : 개발자도구 & lazy import 00:12:00
성능개선 2 : 재렌더링 막는 memo, useMemo 00:08:00
성능개선 3 : useTransition, useDeferredValue 00:10:00
Progressive Web App 만들려면 00:09:00
state 변경함수 사용할 때 주의점 : async 무료 00:05:00
custom hook으로 코드 재사용하기 00:11:00
Node+Express 서버와 React 연동하려면 무료 00:10:00
React 강의 나가는 말 00:05:00

수강생 리뷰

4.9

4.9
110 ratings
  • 5 ★106
  • 4 ★2
  • 3 ★2
  • 2 ★0
  • 1 ★0
  1. 감사합니다

    5

    state랑 hook 이해가안돼서 이리저리 찾아보다가 듣게됐는데
    인터넷 블로그 글들 보다는 내용이 훨씬 쉬워서 좋았습니다!

  2. 리액트 시작하시는 분들께 강력추천드립니다...

    5

    리액트를 유튜브나 서적을 통해 공부한 사람입니다.
    코드를 따라 치며 공부했지만 개념이 잘 잡히지 않고, 서치를해도 답답한 부분이 해결되지 않았습니다.
    이 강의 거의 후반부까지 들었는데 지금은 리액트에 대해 자신감이 많이 생겼고
    스스로 간단한 코드를 짤 수 있는 수준이 되었습니다. 특히 기본 개념이 정확히 머리에 박혔습니다.
    좋은강의 감사합니다.

  3. 최고강의

    5

    이보다 쉽고 이해잘되는 간의 못봤음.

  4. 진정한 명강의 입니다.

    5

    정말 쉽게 가르쳐줍니다. 강추해요.
    진정한 명강의 입니다.

  5. 쉽고 재미있습니다.

    4

    쉽고 재밌게 가르쳐주십니다.
    다만, 최신 문법으로 HOOK을 설명해주셨으니, Redux파트도 Redux-Hook으로 설명해주셨으면 더 통일성 있는 강의가 되지 않았겠나하는 아쉬움이 남습니다.

  6. JS어느정도 알고 React입문 목적이라면 최고의강의!

    5

    정말 이해가 잘되고 잘 가르쳐주십니다.
    혼자 공부할때 어렵게만 느껴졌던 내용을 실제 코드로 작성해보며 배워서 그런지 더욱 감이 잘오는 훌륭한 강의였습니다!

  7. 아직 듣는 중이긴 한데...

    5

    개꿀잼이에요 ^-^??
    넘 재밌고 쏙쏙 이해됩니다.
    리액트를 막연히 무서워하고 있었는데 지금은 아주 쉽게 느껴져요~~~

  8. 감사합니다

    3

    유튜브강의보다 퀄리티가 훨신 좋네요 좋은 강의였습니다.

  9. 강좌듣길 정말 잘했어요!

    5

    너무 잘 가르쳐주시니 ... 리액트가 쉽다고 착각할뻔;;;
    아직 많이 어렵지만 몇번이고 복습하려구요 감사합니다.

  10. 걍 하세요

    5

    제가 유튜브도 보고 엄청 많이 찾아봤는데 다들 본인 코딩하는 거 그냥 설명하는 식이라
    이해가 1도 안갔는데 이 강의는 진짜 다방면으로 많이 알려주시고 이해하기도 쉽게 설명해주셔서 정말 너무 좋았습니다.

    프로젝트를 진행해야해서 급하게 배우면서 진행했는데 2주 조금 더 걸려서 프론트엔드는 다 한거 같네요 정말 감사합니다.

  11. 리액트에 대해서 처음 입문하기에 이보다 더 좋은 강의는 없다고 생각합니다.

    5

    리액트를 이번에 처음하는데, 하나하나 자세히 설명해주십니다.
    특히, 변수를 하나하나 영어로 작명하는데 고민하지 않고, 한글로 작명하는 것이나, 다른 부분에서 처음 이해하는데 용이하도록 하신 노력이 많이 보입니다.
    감사합니다.

    이후, 가장 웹에 기본이 되는 DB연결을 통한 게시판같은 강의가 있다면 더할 나위 없을 거 같습니다.
    물론 그런 강의가 추가된다면 재수강이나 추가 강의를 하는 한이 있더라도 들을 예정입니다.

  12. ReactJS 하고 나면 파이썬 크롤링 하겠지.

    5

    html, css, js 가 갑자기 더 편해지고 있네요.
    ReactJS, sass로 지치는 (html/css 그냥 취미였는데, 겁나 살빠짐) 반복을 없애서 효율적이고, 분류하고 조직하는 재미도 있는거 같아요.
    JS 시작한지 얼마 안되서 그런지, 지금 React 언어가 새로운 언어같고, JS에 비해 레고 장난감 같아요. (완전 쉽다는 건 아니구여! ).
    강의 듣다가 뭐 검색해보면 어지러워서 빨리 영상으로 되돌아오는데, 확실히 설명이 편안합니다.
    React/ES6 신문법을 직관적인 한글함수, 실제 상황 속에서 배우니 잘 와닿아요.

  13. react강의 정말 이해 잘 되게 알려주세요 ㅜㅜ

    5

    제가 돈주고 강의를 구매할 줄 몰랐습니다.. 덕분에 용기가지고 다시 공부합니다!!!!

  14. 중요한 핵심을 알기 쉽게 알려주는 강의

    5

    다른 곳에서 리액트 배우다 Link와 Router 배우면서 혼란해졌었습니다.
    Component 개념을 제대로 이해하고 있지 않아서 였어요 ㅠㅠ
    코딩애플에서 강의 듣고 이해하게 되었습니다.
    useState(Hook) 쓰니까 class 어쩌구보다 코드도 짧아지고 편해졌구요 ㅎㅎ
    중간중간 짤막 과제들도 혼자 힘으로 해내니 뿌듯했습니다.
    영상강의 아래에 노트로 한 번 더 복습할 수 있게 해주는 부분도 참 좋다고 생각합니다.
    역시 공부는 복습이죠!

  15. 리얼 리액트 입문자들을 위한 찐 강의라고 생각합니다.

    5

    프론트엔드 개발자를 준비하면서 "리액트는 필수다" 라는 말을 지겹게 들었고 이곳 저곳 사이트를 돌아다니면서 리액트 관련 강의를 들어봤습니다.
    제가 들었던 강의 들어본 전부 다 입문자를 위한 강의라고 하지만 초반부터 개념 설명도 없이 리액트 용어를 섞어가며 설명하더라구요ㅠㅠ 진짜 입문자를 위한 강의가 맞는지 아니면 내 머리가 나쁜건지...의구심이 들었습니다. (머리가 나쁘긴 합니다만..) 그렇게 제대로 얻은 것 없이 정처 없이 떠돌다가 유튜브에서 코딩애플 리액트 맛보기 강의를 들었는데 기타 리액트 강의와는 달리 이해가 쏙쏙 가더라고요..그래도 속은 적이 한 두번이 아니였기 때문에 수강 하기 전까지 정말 많이 고민 했습니다. 그러다가 마지막이라고 생각하고 결제했는데 이 강의를 듣고...신세계를 경험했습니다! 처음부터 개념을 확실하게 잡아주시고 어려운 리액트 용어는 절제하시면서 정말 입문자 눈높이에 맞춰 강의해주십니다. 이게 진짜 리액트 입문자 강의입니다ㅠㅠ 배운걸 토대로 무엇을 어떻게 만들수 있는지? 노하우도 얻게 되었습니다 ㅎㅎ 물고기를 잡아서 주는게 아닌 직접 잡을 수 있는 방법?을 알려 주시는 것 같아요. 기타 리액트 강의에 실망하신 입문자 분들은 이건 믿고 들으세요!!!

  16. Real good!

    5

    제일 쉽게 가르쳐 주시네욤! 돈이 안 아깝습니다.

  17. 리액트 입문과 프론트앤드 개발을 위한 최고의 선택

    5

    html css공부 해보려고 책도 사고 실제로 해봤는데, 뭔가 내가 하면 구린거 같고
    뭐가 핵심인지 알려주지도 않은 상태에서 그냥 예제만 복사 붙여넣기 하는 경우가 많아서
    html과 css는 엄청 어려운거라고 생각했었습니다.
    이번 강의를 통해서 리액트도 배워가면서 기존 html css에 대한 새로운 접근방식을 알아갈 수 있어서 상당히 만족합니다.
    원래 유투브 무료강의 그냥 찾아 듣다가, 너무 내용이 쏙쏙 박혀서 결제까지 하고 듣게됐네요
    특히 간혹 강의보면, 이게 왜 중요한지에 대한 설명없이, 그냥 책읽듯이 줄줄 읽으면서 그냥 하는 경우가 있는데
    그런 강의는 보통 교수자 자체가 거기에 대해서 완벽하게 이해하지 않은 채 강의할 때 나오는 경우가 많습니다.
    그런데 이번에 강의 들으면서, 정말로 대본 읽는것이 아니라, 어떤 상황일때 내가 어떤 액션을 취해야 하는지 이것에 대한 설명이 정말 완벽하다고 느꼇습니다.
    제가 프론트 앤드 공부는 처음이라, 예제 사이트 보면 막 차트도 이쁘고 효과 휙휙 나오고 그러는거도 취미로 한번 만들어 보고 싶은데
    지금은 부족하지만 나중에는 해낼 수 있을거라는 자신감이 생겼네요

    결론
    언어를 실제로 어떻게 쓰는지, 어떻게 활용되는지, 그런 활용들이 실 프로젝트에선 어떻게 적용되는지
    이런게 궁금하신 분들에게 추천합니다.
    말그대로 물고기 잡아주는 수업이 아니라 물고기를 잡을 수 있게 해주는 수업입니다.
    그리고 다른 언어를 공부하다 리액트 공부하는 사람들이 봤을때는, 여기서 설명하는 로직이나 알고리즘에 대해서 큰 문제는 없습니다.

    수업 듣기 전과 들은 후로 리액트에 대한 저의 체감 난이도가 엄청나게 낮아져서 시간을 걸리겠지만 혼자서 뭐라도 해볼 수 있을 것 같습니다.

    리뷰 이렇게 길게 적은적 없었는데, 그동안 혼자서 html css공부하고 프론트 앤드랍시고 거기에 시간 썻던 제 자신이 너무 불쌍해지네요 ..
    백엔드는 기존에 파이썬을 썻어서 편하게 쓰려고 장고로 하려고 했었는데, 이렇게 쉽게 설명해주시면 백엔드도 노드를 써야하나 고민하게 될 정도로 너무 만족합니다.

  18. 응가하는게 좀 더 쉽긴했지만..

    5

    리액트 초짜라면 무조건 이 강의로 시작하세요.
    좀더 심화된 과정으로도 강의 나오면 좋겠음
    더 듣고싶음

  19. 지금봐도 다시봐도 선녀같다

    5

    리액트가 어떤것인지만알았고, 어떻게 쓰이는지는 몰랐는데,
    이강의를 듣고나니 너무 쉽게 이해했고 실무에서 진짜 완전 잘 이해가 됩니다.
    이 강의는 그냥 선녀 그자체입니다

  20. 다른 유료강의도 들어봤는데 이거만큼 이해하고 머리쓰는 강의 없었음

    5

    다른강의는 초반엔 설명하다가 점점 앵무새처럼 왜쓰는지 모르고 받아적다가 끝나는데
    이 강의는 듣다보면 왜 useState를 쓰고 왜 redux를 쓰게되는지 배경도 알게되고 스스로 만들수 있게됨
    강의 컨텐츠 양이나 가격도 훨씬 좋음 들었던 강의중에서 압도적으로 좋았어요.
    유튜브로 유입되고 이번에도 받아쓰기인가 하고 기대없이 시작했는데 대만족입니다.

  21. 1 2 3 6
신청하기
  • 170,000 83,000
  • 365 Days

선생님

14657명의 수강생

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠