인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
BEST

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

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

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

이런 걸 배울 수 있어요

  • 리액트

  • JavaScript

  • React

  • Vite

  • NPM

  • Node.js

  • Netlify

실무에서 가장 많이 사용되고 있는 리액트 프레임워크,
쉽고 빠르고 재밌게 배워보세요!

개념부터 차근차근,
쉽고 간단하게

입문자 눈높이에서 쉬운 소재를 하나 선정하고 같이 만들어 봅니다. 같이 만들면서 개념들을 하나 하나 쉽고 짧게 설명 드려요. 강의 경력 8년에 빛나는 전문 강사의 강의 스킬을 믿어보세요.

시니어 개발자의 노하우를
바로 옆에서

실습 비중 80% 이상의 지루할 틈이 없는 강의. 시니어 프런트엔드 개발자의 코드 작성 꿀팁과 알아두면 좋은 FE 지식을 마구마구 공유합니다.

이런 분들께 추천해요! 👨‍💻

취업 준비 중인데 실무에서 리액트를 어떻게 사용하는지 궁금합니다. 실무 능력은 어떻게 기를 수 있을까요?

리액트 기초 문법은 알겠는데.. 그럼 뭘 만들어야 할까요? 실무자들은 어떻게 배우는지 궁금합니다.

회사에서 바로 프로젝트를 해야 하는데 리액트를 해본 적이 없습니다. 책은 하나 봤는데.. 감이 잘 안잡혀요.

수강 후에는

  • 리액트의 동작 원리를 같이 눈으로 확인합니다. 왜냐면 일부러 에러를 내고 같이 고치거든요.

  • 컴포넌트를 왜 여러 개로 만들어야 하는지, 컴포넌트가 나뉘어 졌을 때 장점이 무엇인지 직접 눈으로 보고 체득합니다.

  • 실무 경험이 많은 개발자는 어떻게 코딩하지? 효과적으로 효율적으로 코딩하는 방법에 대한 모든 꿀팁을 훔쳐볼게요.

  • 내가 만든 결과물은 배포해서 다른 사람한테 자랑할 수 있어요.


이런 내용을 배워요

섹션 (1) 개발 환경 구성 꿀팁

수업에 필요한 개발 환경을 구성합니다. 코드 편집 도구와 실무에서 자주 사용되는 리액트 관련 VSCode 플러그인, 리액트 개발자 도구, GitHub, Prettier 등을 안내합니다.

섹션 (2) 프로젝트 생성 - 폴더, 파일 구조, 설정 파일 안내

리액트 프로젝트를 만드는 방법을 알아보고 최신 프런트엔드 빌드 도구인 Vite로 프로젝트를 생성합니다.

NPM, ESLint, 프로젝트 라이브러리 관리 방법, 커스텀 명령어에 대해서 알아보고 전반적인 프로젝트 구성 이해도를 높입니다.

섹션 (3) 할 일 관리 앱 빠르게 만들기

리액트의 상태, 이벤트 핸들러와 같은 기본 문법으로 할 일 관리 앱의 주요 기능을 빠르게 구현합니다.

구현하면서 코드를 정확하고 빠르게 작성할 수 있는 코드 작성 방법. 생산성을 높여주는 코드 단축키 등을 맥, 윈도우 사용자 모두를 위해 알려줍니다.

섹션 (4) 리팩토링으로 배우는 컴포넌트 설계와 상태 정의

컴포넌트를 UI 역할 별로 분리하면서 생기는 문제점을 살펴봅니다. 여러 개의 컴포넌트 간에 데이터를 전달하는 방법. 프롭스와 상태를 어떻게 정의해야 하고 컴포넌트 간에 유기적으로 연결될 수 있는지 살펴봅니다.

에러를 눈으로 보고 직접 같이 해결하면서 동작 원리를 함께 알아봐요.

섹션 (5) 애플리케이션 배포

간단하고 귀여운 애플리케이션이지만 내가 만든 걸 자랑할 수 있게 사이트에 배포해 봅니다. 자동 배포 방법과 간단한 빌드 명령어를 배웁니다.

이 강의를 만든 사람 👨‍💻

장기효 (캡틴판교)

"인프런이 만난 사람" 인터뷰

궁금한 점이 있나요?

Q. 프런트엔드 개발 입문자입니다. 이 강의를 들어도 될까요?

HTML, 자바스크립트의 기본 문법을 아는 분들이라면 바로 들으셔도 괜찮습니다. 좀 더 리액트를 깊게 이해하시고 싶다면 아래 학습 로드맵에 안내된 만들면서 배우는 리액트 : 기초를 먼저 듣고 오시면 좋아요 🙂

Q. 이 강의의 수준이 초급인가요? 중급인가요? 제목에 어려운 용어들이 있어서 난이도가 높을까봐 걱정됩니다.

이 강의는 초중급을 겨냥한 강의입니다. 리액트의 useState() 선언 방법과 자바스크립트 배열 선언 방법 정도만 아시면 크게 문제 없이 들으실 수 있어요. 강의에서 만드는 애플리케이션도 입문자 관점에서 최소한의 기능들로 쉽게 구현할 수 있도록 준비했습니다.

수업을 따라가다보면 자연스럽게 실무자 관점의 사고를 많이 배우실 수 있을 거예요 :)

Q. 이 강의를 듣고 나면 어떤 걸 듣는게 좋을까요?

이 강의를 듣고 나면 아래 로드맵을 따라서 이후 강의를 수강해 보는 걸 추천드립니다 🙂 앞으로 리액트 실전 강의, 리액트 + 타입스크립트 강의, Next.js 강의 등 다양한 강의가 추가로 제작될 예정이에요. 좋은 콘텐츠로 금방 찾아뵐게요

수강 전 참고 사항

실습 환경

  • 운영 체제 및 버전(OS): 강의에서 Mac을 쓰지만 Windows 관련 단축키도 모두 설명합니다.

  • 사용 도구: VSCode


학습 자료

  • 깃헙으로 완성된 소스 코드가 제공됩니다.

  • 강의 영상 별로 추가로 학습할 수 있는 교육 자료와 교육 영상(제가 만든 영상들이 많아요 ^^)을 다수 제공합니다.


위즈 띠배너 모음
도라 띠배너 모음 (3)

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 리액트 입문자

  • 프론트엔드 개발자

  • 취업준비생

선수 지식,
필요할까요?

  • 자바스크립트

  • 리액트 기초

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

47,523

수강생

4,570

수강평

3,812

답변

4.9

강의 평점

17

강의

인프런에서 8년째 지식을 공유하고 있습니다. 🏠 기술블로그, 📣 트위터, 💻 깃헙

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

더보기

커리큘럼

전체

33개 ∙ (3시간 20분)

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

수강평

전체

31개

4.9

31개의 수강평

  • 부드러운 족제비님의 프로필 이미지
    부드러운 족제비

    수강평 3

    평균 평점 4.0

    4

    12% 수강 후 작성

    • 장 서운님의 프로필 이미지
      장 서운

      수강평 7

      평균 평점 4.4

      5

      61% 수강 후 작성

      캡틴판교 화이팅

      • yjh님의 프로필 이미지
        yjh

        수강평 2

        평균 평점 4.5

        4

        100% 수강 후 작성

        안녕하세요. 캠틴판교님 리액트 강의 잘 들었습니다. 1. 강의 완강한 입장에서 추천 대상 - 리액트를 해보긴 했는데, 컴포넌트 분리에 대해 기초적인 고민 - 리액트에 있는 package 같은 파일들의 의미를 모른다. 2. 좋았던 점 - 일단 강의 준비를 너무 잘해주셔서 듣기 편했습니다. - 강의 자료에 대한 링크들이 첨부되어 있어서 도움이 됐습니다. - 자칫 그냥 넘어갈 만한, 익스텐션 셋팅 같은 부분도 초반 강의에 들어 있어서 모르던 사람에게는 꿀팁이 될 거 같습니다. - 적당한 강의 시간에 알찬 내용들 (하루만에 완강했습니다) 3. 아쉬운 점 - 강의 자체에 아쉽다기 보단...저는 조금 중급 강의를 원했던 것 같습니다. 제 기준에서는 쉬운 내용이 너무 많아서 아쉬웠습니다. 전체 : 준비가 잘된 강의라고 느꼈습니다. 이제 막 리액트 시작하는 초보였을 때 제가 이 강의를 들었으면 너무 좋았을 것 같습니다. 추후에 중급 강의가 나오면 꼭 수강하고 싶은 마음이 있습니다. [저만 4점이라서 추가적으로 코멘트 달자면] 1. 캡팡님의 강의력 Good 2. 리액트 배웠는데, 뭐가 뭔진 모르고 따라만 쳤다면 무조건 들어주세요 제발 3. 어떻게 보면 강의 난이도를 혼자 높게 생각하고 수강한 저의 실수일 수도 있습니다

        • 안녕하세요 yjh님, 진솔한 수강평 남겨주셔서 감사해요 :) 저도 사실 요 강의 설계할 때 적절한 난이도 찾기가 좀 어려웠었는데 말씀하신 것처럼 중급 레벨의 강의는 아닌 것 같아요. 강의 소개 페이지에 안내된 것처럼 초급, 그리고 초급에 가까운 초중급으로 봐주시는게 좋을 것 같습니다. 강의에서 다루는 내용이 리액트 공식 문서에는 Intermediate(중급)으로 나와 있어서 딱 무슨 레벨이다라고 정의하긴 어려운 것 같아요 :) https://react.dev/learn/managing-state 그래도 말씀해 주신 것처럼 저도 이제서야 첫 리액트 강의를 낸거니까요. 이후에 좀 더 난이도 높은 강의들을 준비해 볼게요. 기대 많이해 주세요 감사합니다 :)

        • [저만 4점이라서 추가적으로 코멘트 달자면] 1. 캡팡님의 강의력 Good 2. 리액트 배웠는데, 뭐가 뭔진 모르고 따라만 쳤다면 무조건 들어주세요 제발 3. 어떻게 보면 강의 난이도를 혼자 높게 생각하고 수강한 저의 실수일 수도 있습니다

      • 송수지님의 프로필 이미지
        송수지

        수강평 1

        평균 평점 5.0

        5

        100% 수강 후 작성

        리액트 기본원리를 간단 명료하게 설명해주셔서 공부에 많은 도움이 돼었습니다 감사합니다!

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

        수강평 4

        평균 평점 5.0

        5

        100% 수강 후 작성

        캡틴판교님 강의는 처음 들어봤습니다 내용이 좋아서 2일만에 완강했네요 ㅎㅎ 강의마다 짧고 굵지만 초보들을 배려하셔서 설명하시는거 보고 감사했습니다. 저는 기본적인 리액트 지식을 가지고 있지만 강의에서 말한 내용과 판교님의 꿀팁을 배워보고 싶어서 들었네요 결과적으로 아주 만족합니다. 빨리 중고급 강의가 나오기를 간절하게 바랍니다 ㅎㅎㅎ 이만 저는 선생님의 Next 강의를 들으러 가볼게요

        • 꿀팁이 마음에 드셨다니 다행이네요. 입문자를 배려한 포인트도 잘 짚어주셔서 감사합니다 :) Next 강의도 재밌게 들으시길! 😁

      장기효(캡틴판교)님의 다른 강의

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

      비슷한 강의

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

      연관 로드맵

      강의가 포함된 로드맵으로 학습해 보세요!

      ₩44,000