인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
BEST
개발 · 프로그래밍

/

프론트엔드

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

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

(4.9) 수강평 28개

수강생 350명

ReactJavaScript리팩토링
Thumbnail

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

이런 걸 배울 수 있어요

  • 리액트

  • JavaScript

  • React

  • Vite

  • NPM

  • Node.js

  • Netlify

react-hero
main-1

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

1

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

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

2

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

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

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

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

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

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

수강 후에는

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

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

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

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


이런 내용을 배워요

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

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

개발자도구

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

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

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

스크린샷 2024-02-24 오후 3.38.46

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

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

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

단축키2

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

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

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

도식2

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

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

배포

이 강의를 만든 사람 👨‍💻

장기효 (캡틴판교)

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

jang-460x498 (1)

궁금한 점이 있나요?

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

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

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

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

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

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

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

수강 전 참고 사항

실습 환경

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

  • 사용 도구: VSCode


학습 자료

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

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


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

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 리액트 입문자

  • 프론트엔드 개발자

  • 취업준비생

선수 지식,
필요할까요?

  • 자바스크립트

  • 리액트 기초

안녕하세요
입니다.

46,431

명

수강생

4,452

개

수강평

3,812

개

답변

4.9

점

강의 평점

17

개

강의

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

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

커리큘럼

전체

33개 ∙ (3시간 20분)

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

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!