채널톡 아이콘
BEST

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

React를 처음 배우시나요? 이 강의로 하나로 리액트 기초를 다지고, 린캔버스 프로젝트를 통해 실무 경험을 쌓아보세요. 그러면 자신있게 프론트엔드 개발자로 취업할 수 있어요!

Thumbnail

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

이런 걸 배울 수 있어요

  • "공식문서 기반"의 리액트 최신 문법 🚀

  • Style 방법 - CSS 모듈, Styled Component, TailwindCSS, MUI 🎨

  • Reducer, Context API, 고급 스킬 등 최신 리액트 스펙 🆙

  • 리액트 성능 최적화 하는 법 🏎️

  • Axios 모듈로 API 네트워크 통신하는 법 🛜

  • 리액트 필수 라이브러리 React Router 🚀

  • 최신 React Query 라이브러리 기초부터 고급 스킬까지 📦

  • Vite 환경변수 설정 및 배포하기 🏠

인프런 수강후기 이벤트 진행중 🎉

안녕하세요! 🙂
React 강의를 수강하고, 특별한 혜택도 받아가세요! 현재 수강후기 이벤트를 진행 중입니다. 🎉
강의를 수강하신 후, 진솔하고 정성 가득한 후기를 작성해주시면 강의 쿠폰 1개를 선물로 드립니다!
(선착순 20명에게만 드리는 한정 혜택이니, 서둘러 참여하세요!)
자세한 내용과 이벤트 참여 방법은 강의 커리큘럼에서 확인하실 수 있습니다! 🔥

React 기초부터 실전 프로젝트: 린캔버스로 배우는 완벽한 리액트 개발

이 강의는 리액트를 처음 접하는 입문자부터 실무에서 활용할 수 있는 고급 스킬까지 폭넓게 다루는 완벽한 리액트 개발 과정입니다. 최신 리액트 스펙을 공식문서 기반으로 컴포넌트 설계, 상태 관리, 성능 최적화 등 핵심 개념을 체계적으로 익힐 수 있습니다. 또한, 단순한 문법 학습에 그치지 않고, 실제 웹 서비스 린캔버스 프로젝트를 통해 실무에 바로 적용 가능한 프로젝트 경험을 쌓을 수 있습니다.

공식문서 기반
최신 리액트 스펙

린캔버스 프로젝트
실전 활용법

총 16시간 분량의
깊이 있는 강의!

이 강의는 리액트를 처음 접하는 분들도 쉽게 이해할 수 있도록 쉽고 명확하게 설명하는 것이 큰 특징입니다. 또한, 16시간 이상의 탄탄한 분량을 자랑하며, 단순히 기초를 배우는 데서 그치지 않고 실전에서 바로 활용 가능한 깊이 있는 지식과 스킬을 제공하는 강의입니다.

공식 문서를 기반으로 최신 리액트 스펙 학습

리액트에서 다양한 CSS 스타일링 방법

Axios를 활용한 서버 API 통신 방법

React Router를 이용한 클라이언트 라우팅

메모이제이션과 React-Query로 성능 최적화된 리액트 웹 구축

Vite 환경에서 리액트 웹의 환경변수 설정 및 배포 방법

학습 내용 - 리액트 기초

리액트 기본 개념부터 JSX 문법, 컴포넌트 구조렌더링 방식을 학습합니다. 또한, State 관리리렌더링 과정을 이해하며, props를 통한 데이터 전달, 이벤트 처리 방법 등을 배울 수 있습니다. Strict 모드와 같은 필수 사항도 다룹니다.

섹션 1. 시작하기 전에

리액트 기본 개념개발환경 구성을 학습하고, 강의의 로드맵과 필요한 교안 및 소스코드를 제공합니다.

섹션 2. 프로젝트 이해하기

프로젝트 생성구조 이해, CSR, SPA 등 리액트의 핵심 개념을 학습합니다.

섹션 3. 컴포넌트 이해하기

컴포넌트의 개념, 분리 기준, 그리고 실습을 통해 컴포넌트를 효과적으로 관리하는 방법을 배웁니다.

섹션 4. JSX 학습

JSX 문법자바스크립트 활용법을 학습하며, 리액트의 기본 구조를 이해합니다.

섹션 5. 컴포넌트 기초

props 전달, 조건부/리스트 렌더링, 이벤트 처리기본 컴포넌트 기능을 익힙니다.

섹션 6. State 기초

State의 개념과 리렌더링 단계, Strict 모드기본 상태 관리 기법을 학습합니다.

학습 내용 - 리액트 심화

고급 상태 관리 기술인 ReducerImmer를 활용한 객체 및 배열 업데이트, useState 심화 기능을 학습합니다. useMemouseCallback을 통한 성능 최적화이벤트 처리, useRef를 사용한 컴포넌트 참조 등을 심화 학습합니다.

섹션 7. State 고급 스킬

Immer객체/배열 업데이트useState의 고급 활용법을 학습합니다.

섹션 8. Reducer로 로직 통합

Reducer상태 관리 로직을 통합하고, Immer를 적용해 코드 간결화를 배웁니다.

섹션 9. 이벤트 심화

리액트 이벤트 객체한글 이슈 처리 등 심화된 이벤트 처리 방법을 학습합니다.

섹션 10. Context API 기초 & 심화

Context API상태 공유 방법을 익히고, Reducer와 결합하여 앱 확장 기술을 학습합니다.

섹션 11. 라이프사이클 & Effect Hook

Hooks라이프사이클, useEffect로 비동기 작업을 처리하는 법을 학습합니다.

섹션 12. useRef Hook

useRef의 기본 및 고급 활용법을 통해 컴포넌트 참조상태 관리를 익힙니다.

섹션 13. 성능 최적화

useMemo, useCallback을 통해 메모이제이션성능 최적화 방법을 배웁니다.

학습 내용 - 린캔버스 프로젝트

린캔버스 프로젝트를 기반으로 실전 웹 개발을 학습합니다. CSS 스타일링, React Router로 클라이언트 라우팅 구현, API 통신, React Query를 통한 데이터 관리, Vite 배포를 포함해 실무 프로젝트 전 과정을 익힙니다.

섹션 14. 웹 프로젝트 시작하기

린캔버스 프로젝트를 생성하고, ESLintPrettier 설정을 통해 코드 스타일을 정리합니다.

섹션 15. 리액트 CSS 스타일링

CSS Modules, Styled Component, TailwindCSS(tailwind-css) 등 다양한 CSS 스타일링 기법을 학습합니다.

섹션 16. [린캔버스] React Router

React Router(react-router)클라이언트 라우팅 구현 방법을 학습합니다.

섹션 17. UI 만들기 (with Tailwind CSS)

UI 컴포넌트 분리TailwindCSS효율적인 UI를 구축하는 방법을 배웁니다.

섹션 18. API Server 통신

json-serverAxiosAPI 통신서버와의 상호작용을 구현합니다

섹션 19. Custom Hooks

Custom Hook을 직접 만들고 활용하는 방법을 학습합니다.

섹션 20. React Query 라이브러리

React Query(react-query)를 사용해 데이터 캐싱상태 관리를 구현하는 방법을 배웁니다.

섹션 21. 환경변수 설정 및 배포

Vercel을 통한 배포Vite 환경변수 설정으로 리액트 앱을 실제 배포하는 방법을 학습합니다.

차별화 된 선수 지식을 참고하세요 💪

HTMLCSS2

1. HTML&CSS 웹 개발 입문 [무료]

HTML과 CSS를 배워서 웹사이트 제작에 필요한 기본 지식을 배울 수 있습니다. 코딩을 처음 접할 때 두려움이 없도록 정말 알기 쉽게 설명한 강의입니다.

자바스크립트,

2. ES6+ 최신 자바스크립트 입문 [무료/유료]

자바스크립트가 쉽다고 하지만 처음 접하시는 분들은 어렵게 느낄 수 밖에 없습니다. 그래서 이번 강의는 코딩에 입문하시는 왕초보 분들을 위해 쉽고! 알찬! 내용을 준비했습니다.

무료 - 유튜브, 유료 - 인프런(프로젝트 포함)

포트폴리오 만들기1

3. 포트폴리오 사이트 만들고 배포까지!

HTML&CSS, 자바스크립트를 배웠다면 이를 활용하여 직접 포트폴리오 사이트를 만들고 배포해 보세요. 실제로 써 보는 것은 우리의 실력을 향상시키는 데 큰 도움이 될 것입니다.

프론트엔드 날개

프론트엔드 날개달기 [무료]

이 강의를 통해 모듈 시스템, Webpack, NPM 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다.

예상 질문 Q&A

Q) 선수지식이 어떻게 될까요?

HTML, CSS, 자바스크립트 기초만 알고 계셔도 무난하게 수강하실 수 있습니다. 추가로 React, Vue와 같은 프론트엔드 프레임워크를 배우기 위해서는 npm, 모듈 시스템 등 프론트엔드 생태계 기술에 대한 이해가 필요하지만, 강의 중에 이러한 기술들을 충분히 학습할 수 있도록 언급드리기 때문에 걱정하지 않으셔도 되며, 강의를 통해 충분히 따라오실 수 있도록 도와드립니다.

참고로, 이런 이유로 론칭된 강의가 바로 "프론트엔드 날개달기(무료)" 강의입니다! 자세한 내용은 로드맵 참고해주세요 💪

Q) 소스코드가 제공되나요?

네! 소스코드를 설명하는 회차에서 깃헙 주소를 제공해드리며, 깃헙에서 소스코드를 효과적으로 확인하고 활용하는 방법도 자세히 안내해드립니다.

Q) 강의교안이 제공되나요?

네! 강의교안이 제공됩니다!

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 프론트엔드 개발자 취업을 준비하는 사람!

  • 공식문서를 기반으로 기초부터 탄탄히 다지고 싶은 사람!

  • 리액트를 처음 배우는 초보 개발자!

  • 실무 프로젝트 경험을 쌓고 싶은 리액트 입문자!

선수 지식,
필요할까요?

  • HTML&CSS

  • 자바스크립트

안녕하세요
짐코딩입니다.

22,738

수강생

1,117

수강평

571

답변

4.9

강의 평점

17

강의

안녕하세요.
코딩 교육 크리에이터 짐코딩 입니다 🙂

유튜브에서 코딩 교육 "짐코딩 GYM CODING"채널을 운영하고 있으며,
인프런 교육 플랫폼에서 프로그래밍 지식을 공유하고 있습니다.

제 강의의 특징은 이제 막 시작하시는 분들을 위하여
설명하고자 할 때는 최대한 쉽게,
알려드리고자 할 때는 최대한 알차게 설명드립니다.

항상 수강생 입장에서 생각하는 코딩 교육 크리에이터가 되겠습니다.
감사합니다.

📨 이메일 bruce.lean17@gmail.com
🏋️‍♀️ 헬스타그램 @helinlee.gram
🧑‍💻 코딩스타그램 @gymcoding

더보기

커리큘럼

전체

93개 ∙ (17시간 34분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

58개

5.0

58개의 수강평

  • 상은쓰님의 프로필 이미지
    상은쓰

    수강평 7

    평균 평점 5.0

    5

    100% 수강 후 작성

    웹 개발 입문부터 리액트 완벽 마스터 과정까지 들은 수강생입니다! 한 줄 요약: 다른 강의가 그냥 커피라면 이 강의는 T.O.P다. 😎 강사님께서는 복잡한 개념도 쉽게 설명해 주시고, 혼자 공부하는 인강의 단점인 '스스로 집중하기 어려움'을 중간중간 직접 실습하도록 유도해 주셔서 해결해 주십니다. 강의 중간에 "잠시 멈추고 먼저 해보세요"라는 말씀을 들을 때마다 느슨해졌던 긴장감이 다시 생기며, 주도적으로 문제를 해결하는 데 큰 도움이 되었습니다. 또한, 강의 교안과 깃헙 저장소에 코드가 체계적으로 잘 정리되어 있어 실습 중 에러가 발생하거나 나중에 다시 복습할 때도 따라가기 매우 수월했습니다. (이렇게 일일이 정리하시기 힘드셨을 텐데 덕분에 내용에 집중할 수 있었습니다. 😁) 특히, 강의 내용에 그치지 않고, 혼자서도 꾸준히 학습을 이어나갈 수 있도록 다양한 인사이트를 제공해 주시는 점과 추가 및 참고 영상들을 보면 최대한 많이 알려주시려고 하는 것이 느껴져서 감동받았습니다🤗🤗

    • 짐코딩
      지식공유자

      이번 강의에서 수강생분들이 실습을 스스로 할 수 있도록 호흡을 최대한 조절했는데요. 알아주시니 감개무량합니다! 리액트 강의는 앞으로도 수강생분들에게 제공하고자 하는 인사이트가 있다면 추가 영상을 업로드할 계획입니다 💪 감사합니다 ☺️

  • 타겟토님의 프로필 이미지
    타겟토

    수강평 12

    평균 평점 5.0

    5

    31% 수강 후 작성

    쉽게 가르친다고해서 절대 얕게 가르치지 않아서 고민하지말고 저점매수하세요. 정말 입문자들이나 한번 공부했는데 방향성 못잡으시는 분들 그냥 과감하게 투자하셔도 될 것 같습니다. Spring boot로 졸작하다가 화면에 나오는게 너무 터무니 없어서 듣기 시작해서 화면도 예쁘게 나오고 즉각적으로 시각적인 결과물이 나오니까 너무 재밌어요!! 연휴에 빡세게 들어서 욕심내서 nest도 한 번 들어보고 싶다는 욕심이 들정도로 너무 강의 퀄에 만족하고 있습니다. ((그리고 예전에 다른 강의 들을땐 공식문서 읽으라고 해도 양도 너무많고 읽기도 귀찮아서 잘 안읽었는데 밑에 참고할 만한 링크들 싹 다 달아두셔서 진짜 신경 많이 쓴게 느껴질 정도 .ㅎ..ㅎ))

    • 짐코딩
      지식공유자

      안녕하세요, 타겟토님! 소중한 수강평 감사합니다~! 쉽지만 깊이 있게 가르치려는 노력을 알아봐 주셔서 감개무량합니다 🥹 Spring Boot에서 React로 넘어오시면서 화면에 바로 결과물이 나타나는 재미를 느끼신다니 다행이에요~! 수강생 분들이 학습하기 편하도록 관련 링크들을 기재했었는데요 유용하게 쓰고 계시다니 다행입니다. "Next.js 완벽 마스터" 강의에서도 좋은 인사이트과 결과물을 얻을 수 있을거예요~! 💪 계속해서 도움 되는 강의 만들도록 노력하겠습니다. 감사합니다!

  • 곰코드님의 프로필 이미지
    곰코드

    수강평 4

    평균 평점 5.0

    수정됨

    5

    41% 수강 후 작성

    사람마다 다르겠지만 개인적으로 강의 스타일이 잘 맞아서 선생님 강의 다 듣고 있습니다 다른 React 강의보다 깊고 넓게 자세하게 설명해주셔서 재미있게 공부하고 있습니다! 특히 스냅샷 처럼 동작하는 State 편에서 감동 받았고 자바스크립트 지식과 React 지식을 분별해서 알려주셔서 어떤 지식이 부족한지 알 수 있어서 만족하고 있습니다. 추후에 타입스크립트를 활용한 강의나 AI랑 결합한 컨텐츠도 있으면 좋겠네요. 앞으로도 계속 성장하셔서 좋은 강의 많이 출시 해주세요~! (개인적으로 노드 강의가 국내에는 많이 없어서 출시 해주시면...조심스럽게 말씀드려봅니다!) 감사합니다! 유튜브도 잘 보고 있어요~

    • 짐코딩
      지식공유자

      소중한 수강평 감사드립니다! 강의 스타일이 잘 맞으셨다니 정말 기쁩니다. 리액트의 깊이 있는 내용까지 함께 공부하시는 모습이 보람차네요. 특히 State의 스냅샷 개념에서 저도 힘을 많이 썼는데요 감동을 받으셨다니 감개무량합니다~! Node.js 강의는 조심스럽게 고민해볼게요 🙂 그리고 현재 Next.js + Notion CMS 를 활용한 블로그 만들기 강의(with Cursor AI)를 준비 중이니 조만간 좋은 소식 전해드릴게요. 기대해주세요! 💪 유튜브도 계속 봐주셔서 감사합니다! 💪

  • 조성국님의 프로필 이미지
    조성국

    수강평 1

    평균 평점 5.0

    5

    90% 수강 후 작성

    꼼꼼하고 깔끔한 강의 ! 타입스크립트, nextjs 강의도 만들어주세요

    • 짐코딩
      지식공유자

      소중한 수강평 감사드립니다! 꼼꼼하고 깔끔하게 강의를 준비한 보람이 있네요. 정말 기쁩니다. 타입스크립트와 Next.js 강의 요청 감사합니다! 그리고 현재 Next.js + Notion CMS 를 활용한 블로그 만들기 강의(with Cursor AI)를 준비 중이니 조만간 좋은 소식 전해드릴게요. 기대해주세요! 💪

  • nathomme님의 프로필 이미지
    nathomme

    수강평 1

    평균 평점 5.0

    5

    31% 수강 후 작성

    이제 막 개발자로 성장하고 있는 사람입니다. 실무에서 vue를 사용해야했고, 공부하기 위해 인프런을 찾아보는 과정에서 우연하게 짐코딩님의 강의를 듣게 되었습니다. 다른 강의(유튜브,인프런 등)도 들었지만, 짐코딩님은 깔끔한 딕션으로 공식문서 기반한 탄탄한 지식을 꼼꼼하게 알려주셔서 너무너무 만족해서 리액트까지 짐코딩님의 거의 모든 강의를 수강하는 사람이 되었습니다. ㅎㅎ 프론트엔드 개발자는 아니지만 덕분에 정말 많은 성장을 한 것 같아 기분이 좋아 수강평을 남깁니다. 이번 리액트 강의도 너무너무 좋다고 느끼고 있으며, 앞으로 런칭하시는 강의들도 다 들어볼 예정입니다. 양질의 강의 만들어 주셔서 감사드립니다. 다른분들도 이 강의뿐아니라 짐코딩 님의 다른 강의들도 수강하시며 함께 성장하시면 좋겠습니다. 감사합니다.

    • 짐코딩
      지식공유자

      안녕하세요! 소중한 수강평 감사드립니다! 🥹 Vue부터 React까지 제 강의들을 꾸준히 수강해주시고, 성장하셨다니 정말 기쁩니다. 공식 문서 기반의 접근방식과 설명 스타일이 도움되었다는 말씀에 큰 보람을 느껴요~! 🎉 앞으로도 실무에 바로 적용할 수 있는 양질의 강의로 보답하겠습니다. 계속해서 응원하겠습니다! 감사합니다! 💪

짐코딩님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

월 ₩19,800

5개월 할부 시

₩99,000