Thumbnail
개발 · 프로그래밍 프론트엔드
처음 만난 리액트(React)
(4.8)
39개의 수강평 ∙ 1778명의 수강생

무료

지식공유자: Inje Lee (소플)
총 56개 수업 (5시간 1분)
수강기한: 무제한
수료증: 미발급
난이도:  입문-초급-중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유
입문자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다.

✍️
이런 걸
배워요!
자바스크립트 기초 문법
CSS 기초 문법
리액트 기초 탄탄하게 다지기
미니 프로젝트를 통한 웹애플리케이션 개발

깔끔한 강의자료, 꼼꼼한 설명으로
쉽게 배우는 리액트 강의입니다. 👨‍🏫

리액트의 세계로
초대합니다 💫

리액트는 메타에서 만든 오픈소스 자바스크립트 UI 라이브러리입니다.
현재 웹 애플리케이션 개발에 가장 많이 사용되고 있으며
빠른 업데이트와 렌더링 속도, 컴포넌트 기반의 구조 등 많은 장점을 갖고 있어요.


강의의 특징을

알려드려요 🔎

  • JavaScript 기초 문법을 익힙니다.
  • CSS의 개념과 자주 사용되는 속성을 배웁니다.
  • 리액트에 대한 기초 개념을 쌓고 사용법을 익힙니다.
  • 미니 프로젝트를 통해 실제 리액트 애플리케이션을 개발합니다.
  • 입문자분들을 위해 HTML, CSS, JS의 기초 내용을 포함하고 있습니다.


강의를 책으로도
만나볼 수 있어요! 📖

First met React book image

강의를 책으로도 볼 수 있도록
강의 내용을 고스란히 책에 담았습니다.
동영상 강의와 함께 책을 보면서
리액트의 세계로 빠져보세요!

🌟 소문난 명강의 🌟

소플의 처음 만난 리액트
- 리액트 기초 개념 정리부터 실습까지


강의를 들은 후 수강생의 변화 🙋‍♂️

JS 기초 문법에 대해
이해할 수 있어요!

자주 사용되는 CSS를
이해할 수 있어요!

리액트의 기초를
잘 다질 수 있어요!

실전 프로젝트 경험을
쌓을 수 있습니다.


학습 내용 엿보기 📚

섹션 0 [준비하기]

  • HTML, CSS의 개념과 자바스크립트 기초 문법에 대해 배우고, 실습을 위한 환경을 세팅합니다.

섹션 1, 2 [리액트 소개, 시작하기]

  • 리액트에 대한 소개, 장단점에 대해 학습합니다.
  • 리액트를 직접 연동하는 방법과 create-react-app에 대해 학습합니다.

섹션 3 [JSX]

  • JSX의 정의와 역할, 그리고 사용법에 대해 학습합니다.

섹션 4 [Rendering Elements]

  • 리액트 엘리먼트의 정의와 특징 및 렌더링 방법에 대해 학습합니다.

섹션 5 [Components and Props]

  • 리액트 컴포넌트와 Props의 정의 및 사용법에 대해 학습합니다.

섹션 6 [State and Lifecycle]

  • State의 개념과 컴포넌트 Lifecycle에 대해 학습합니다.

섹션 7 [Hooks]

  • 리액트 훅의 개념과 대표적인 훅들 및 커스텀 훅에 대해 학습합니다.

섹션 8 [Handling Events]

  • 리액트에서 이벤트를 다루는 방법에 대해 학습합니다.

섹션 9 [Conditional Rendering]

  • 조건부 렌더링의 개념과 구현 방법에 대해 학습합니다.

섹션 10 [Lists and Keys]

  • 리스트와 키의 개념과 실제 렌더링 방법에 대해 학습합니다.

섹션 11 [Forms]

  • 다양한 Form과 제어 컴포넌트에 대해 학습합니다.

섹션 12 [Lifting State Up]

  • Shared State와 컴포넌트간 State를 공유하는 방법에 대해 학습합니다.

섹션 13 [Composition vs Inheritance]

  • 다양한 컴포넌트 합성 방법과 상속의 의미에 대해 학습합니다.

섹션 14 [Context]

  • Context의 개념과 Context API에 대해 학습합니다.

섹션 15 [Styling]

  • 대표적인 CSS의 속성들과 styled-components에 대해 학습합니다.

섹션 16 [미니프로젝트]

  • 지금까지 배운 내용들을 종합하여 미니 블로그를 함께 만들어봅니다. 

예상 질문 Q&A 💬

Q. 자바스크립트를 잘 몰라도 들을 수 있는 강의인가요?

네! 자바스크립트에 대해 잘 모르시는 분이라고 해도, 강의에서 기초 문법을 포함하여 설명드리기 때문에 상관없이 들으실 수 있습니다.

Q. CSS에 대해 잘 몰라도 들을 수 있는 강의인가요?

네, CSS의 대표적인 속성들을 함께 다루기 때문에 잘 몰라도 강의를 수강하실 수 있습니다.

Q. 리액트를 배우면 뭐가 좋은가요?

리액트를 통해 내가 원하는 대로 웹 애플리케이션을 개발할 수 있습니다.


학습 관련자료 💡

3강 ~ 15강. 실습 소스코드

https://github.com/soaple/first-met-react-practice

16강. 미니 블로그 소스코드

https://github.com/soaple/mini-blog

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
웹애플리케이션 개발에 관심있는 분
리액트를 처음 접하시는 분

안녕하세요
Inje Lee (소플) 입니다.
Inje Lee (소플)의 썸네일

이인제(소플)

  • Hottest Lab Inc. 대표

  • 개발 경력
    - 前 소플 Software Engineer
    - 前 DDRAGON GAMES Manager
    - 前 KAIST ISILAB Researcher
    - 前 Lingofly Inc. CTO
    - 前 NemusTech Co.,Ltd Senior Researcher
    - 前 KTNET Assistant Manager

  • 강의 콘텐츠
    - 처음 만난 리액트
    - 처음 만난 AWS

커리큘럼 총 56 개 ˙ 5시간 7분의 수업
이 강의는 영상이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 준비하기
HTML과 CSS 미리보기 07:38 JavaScript 소개 및 자료형 미리보기 10:52
JavaScript의 연산자 12:05
JavaScript의 함수 02:01
(실습) 개발환경 설정하기 04:41
섹션 2. 리액트 시작하기
(실습) 직접 리액트 연동하기 07:31
(실습) create-react-app 03:46
섹션 3. JSX
JSX의 정의와 역할 05:59
JSX의 장점 및 사용법 04:17
(실습) JSX 코드 작성해보기 03:13
섹션 4. Rendering Elements
Elements의 정의와 생김새 07:29
Elements의 특징 및 렌더링하기 05:58
(실습) 시계 만들기 01:53
섹션 5. Components and Props
Components와 Props의 정의 06:55
Props의 특징 및 사용법 05:33
Component 만들기 및 렌더링 04:51
Component 합성과 추출 03:58
(실습) 댓글 컴포넌트 만들기 04:24
섹션 6. State and Lifecycle
State와 Lifecycle의 정의 05:24
(실습) state 사용하기 06:38
섹션 7. Hooks
Hooks의 개념과 useState, useEffect 08:54
useMemo, useCallback, useRef 07:35
Hook의 규칙과 Custom Hook 만들기 08:17
(실습) Hooks 사용해보기 04:31
섹션 8. Handling Events
Event의 정의 및 Event 다루기 07:00
(실습) 클릭 이벤트 처리하기 02:57
섹션 9. Conditional Rendering
Conditional Rendering의 정의와 Inline Conditions 09:22
(실습) 로그인 여부를 나타내는 툴바 만들기 02:52
섹션 10. List and Keys
List와 Key 01:16
여러 개의 Component 렌더링 하기 03:06
List의 Key 03:12
(실습) 출석부 출력하기 02:33
섹션 11. Forms
Form과 Controlled Component 04:03
다양한 Forms 04:49
(실습) 사용자 정보 입력 받기 02:56
섹션 12. Lifting State Up
Shared State 01:56
하위 컴포넌트에서 State 공유하기 05:03
(실습) 섭씨온도와 화씨온도 표시하기 03:09
섹션 13. Composition vs Inheritance
Composition 방법과 Inheritance 08:10
(실습) Card 컴포넌트 만들기 02:44
섹션 14. Context
Context란? 06:42
Context API 07:23
(실습) Context를 사용하여 테마 변경 기능 만들기 03:45
섹션 15. Styling
CSS와 selector 06:13
레이아웃과 관련된 CSS 속성 08:50
Font와 관련된 CSS 속성, 기타 많이 사용하는 CSS 속성 05:43
styled-components 05:56
(실습) styled-components를 사용하여 스타일링 해보기 03:45
섹션 16. Mini Project
(실습) 미니 블로그 기획, 프로젝트 생성 및 필요한 패키지 설치 05:14
(실습) 주요 컴포넌트 및 폴더 구성하기 03:17
(실습) UI 컴포넌트 및 List 컴포넌트 구현하기 05:56
(실습) 가짜 데이터 만들기 01:31
(실습) Page 컴포넌트 구현 및 각 페이지별 경로 구성하기 06:56
(실습) App.js 파일 수정, 애플리케이션 실행하기, Production 빌드하기 06:09
강의 게시일 : 2022년 05월 19일 (마지막 업데이트일 : 2022년 05월 19일)
수강평 총 39개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.8
39개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
chayuna91 thumbnail
f모 강의에서 공식문서 읽어주는 강의를 듣다가 시간도 너무 길고 이해도 안되고 너무 어려워서 때려치고 리액트 강의를 뒤적이던 중에 보석 같은 강의를 발견했습니다. 이게 무료라니.. 이게 무료라니잇....! 이렇게 쉽게 친근하게 접근할 수 있다니 강의력에 감탄했습니다. 컴포넌트 붕어빵이 너무 귀여워요 짱짱맨 한눈 안팔고 핵심만 찔러줍니다. 시간절약 시켜주셔서 감사합니다. 이 강의는 살아있는 공식문서 실습판입니다. 배속으로 해도 발음이 워낙 정확해서 뭉개지지않고 잘들립니다.
2022-05-30
지식공유자Inje Lee (소플)
chayuna91님 수강평 남겨주셔서 감사합니다. 나름대로 최대한 쉽게 설명하려고 노력했는데, 알아봐주시니 뿌듯하기도 하고 감사하네요. 어려운 내용은 최대한 덜어내고 오직 리액트의 기초를 탄탄하게 다지는 것에 초점을 맞췄으니, 열심히 강의를 들으시면 리액트와 가까워질 수 있을 겁니다! 한 땀 한 땀 그린 붕어빵 그림도 좋아해 주셔서 감사합니다~ 즐거운 학습 되시기 바랍니다!
2022-05-30
angelwan001 thumbnail
리액트 기초 다지기에 좋은 강의 입니다
2022-08-07
지식공유자Inje Lee (소플)
angelwan001님 수강평 남겨주셔서 감사합니다. 제 강의를 통해 리액트 기초를 잘 다지셨기를 바랍니다!
2022-08-07
yrrrrrrrr thumbnail
우연히 듣게 된 강의인데 너무 좋았습니다! 리액트 처음 접하시는 분들은 html, css, 자바스크립트 간단하게 아는 상태에서 수강하기 너무 좋을 것 같네요. 여러 장점이 있지만 그 중에서도 1) 깔끔하고 군더더기 없는 설명 2) 실습 기반으로 수강한 내용 복습 3) 강의력을 장점으로 꼽을 수 있을 것 같습니다! 여러 강좌를 수강하려고 시도..는 해봤지만 완강한 강의는 이게 처음이에요! 오래만난 리액트도 있으면 좋을거 같아요...ㅎㅎ 좋은 강의 너무 감사드리고 앞으로도 새로운 강좌 오픈하시면 꼭 들을게요! 아직 안들으신 분들은 적극 추천드려요.
2022-07-20
지식공유자Inje Lee (소플)
yrrrrrrrr님 수강평 남겨주셔서 감사합니다. 제 강의가 잘 맞으셨다니 너무 뿌듯하네요~ 언제가 될지는 모르지만 다음 강의도 기대해주세요ㅎㅎ 앞으로도 즐거운 리액트 개발이 되시길 바랍니다!
2022-07-20
mo ta thumbnail
굿굿 최고
2022-08-19
지식공유자Inje Lee (소플)
안녕하세요, mo ta님 수강평 남겨주셔서 감사합니다. 앞으로도 즐거운 리액트 개발이 되시길 바랍니다!
2022-08-19
전우람 thumbnail
정말 도움이 많이 된 수강이였습니다. 감사합니다.
2022-08-09
지식공유자Inje Lee (소플)
전우람님 수강평 남겨주셔서 감사합니다. 제 강의가 도움이 많이 되셨다니 뿌듯하네요~ 앞으로도 즐거운 리액트 개발이 되시길 바랍니다!
2022-08-09
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스