Inflearn brand logo image
Inflearn brand logo image

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

아이디어는 있는데 앱을 어떻게 개발해야할지 몰랐던 분들, 실전 프로젝트 4개를 만들어보면서 앱 개발을 마스터해봅시다!

입문자를 위해 준비한
[모바일 앱 개발, React Native] 강의입니다.

이런 걸 배울 수 있어요

  • 실무 100% 활용 리액트 네이티브 문법

  • 리액트 실전 문법

  • 효율적 개발에 최적화된 개발 환경 설정

  • Api를 통해 외부 정보를 가져오기

  • 실제 앱에서 자주 쓰이는 실전적인 스킬 100여개 이상

  • 로그인 기능 구현

[2025] [UPDATE] 비전공자도 가능한 React Native 앱 개발 마스터클래스

[NEW!] 2월 신규 강의 전체 리뉴얼

새로워진 강의로 돌아왔습니다.

12월 촬영 / 1월 편집본
100% 새롭게 재탄생한 강의를 지금 바로 만나보세요.

현업에서 사용되는 기술만을 채택해 강의를 구성했습니다.

무려 13시간의 러닝타임으로 여러분들을 앱 개발자로 만들어 드리겠습니다.

아직도 이론 중심 강의를 들으시나요?

5년동안 앱 개발만 한 앱개발자가 실전 노하우를 알려드립니다.

어떤 분들이 수강하면 좋을까요?🤔

·💡아이디어는 있지만 앱으로 만들기는 어려우신 분들

·📱앱 개발 분야에 뛰어들고 싶으신 분들

·📱나만의 앱을 만들어보고 싶으신 분들

·🧑‍💼앱 개발자로 취업하고 싶으신 분들

·💻앱 개발을 빠르게 배워서 사이드 프로젝트를 만들고 싶으신 분들

·💭앱 개발 분야에 관심이 있으셨던 모든 분들

·💸나만의 앱서비스를 개발해 수익화를 원하시는 분들

React Native를 사용하는 건가요?

React Native를 사용하는 가장 큰 이유들을 한번 정리해 봤어요

POINT 1 1,000개 이상 대기업들의 채택

🏢 토X, 배X의 민족, 인스타그램 등 전세계 1,000여개 이상의 대기업이 사용하는 React Native

POINT 2 크로스 플랫폼 개발의 혁신

ㅣ 크로스 플랫폼이란? Android, iOS 모두를 한번의 코드로 개발할 수 있는 기술

🔯 크로스 플랫폼인 React Native => 가장 빠르고 손쉽게 두 OS 개발 가능

POINT 3 강력한 커뮤니티와 생태계

🕸 GithubStack Overflow에서 활발하게 활동하는 10,000여명 이상의 개발자

🔭 대규모 커뮤니티의 지원 => 다양하게 업데이트되는 플러그인, 기능

POINT 4 빠른 개발과 핫 리로딩

🔥 독점적인 핫 리로딩 기능: 개발 중 코드를 수정할 때마다 즉각적으로 변경사항 확인 가능

🛠 MVP(최소 기능 제품)에 유용

POINT 5 네이티브 성능과 사용자 경험

🔧 네이티브 컴포넌트를 사용 => 뛰어난 성능

🔗 JS로 작성된 코드네이티브 API와 직접 상호작용 => 성능 저하 X

애니메이션, 제스처 처리에서 탁월한 성능 발휘 => 매끄러운 사용자 경험 구현

강의를 듣고 나면...💭

· 👨‍💻React Native를 상황에 맞춰 능숙하게 다룰 수 있습니다.

· 📱나만의 아이디어를 앱으로 개발해낼 수 있습니다.

· 👀내가 원하는 앱의 기능을 개발해낼 수 있습니다.

· 👥다른 언어도 React Native를 통해 배운 것들을 연관지어 빠르게 배울 수 있습니다.

· 💨대기업 수준의 앱 및 앱 기능 아이디어는 바로바로 구현해 낼 수 있게 됩니다.

이 강의의 특징은?

실습 위주의 강의🏃

뜬구름만 잡는 추상적인 이론 위주의 수업이 아닌 수강자가 실제 프로젝트를 개발하며 배우는
실습 위주의 수업으로 강의를 구성했습니다.

실전에 충실한 강의🤺

강의에서 "이렇게 하면 이렇게 된다"라고만 알려드리면 실습 위주의 수업이어도 쓸모가 없습니다.
실전에서 어디에서 써먹어야 할지, 진짜 앱에서 어느 기능으로 많이 쓰이는 지
실무에서 100% 활용할 수 있게 알려드립니다.

입문자 초점에 맞춘 강의🧑‍🎓

이 강의는 React Native의 무수히 많은 실전 스킬들을 알려드리는 강의이지만,
수강 난이도는 입문입니다. 그만큼 강의에서는 수강자분들이 앱 개발 분야에 대해
전혀 모르는 상태이셔도 모든 개념을 이해하실 수 있게 개념을 확실히 알려드립니다.

이 강의를 들어야 하는 이유는?

인프런 타 강의와 이 강의를 비교해 봤어요

인프런 타 강의

30,000₩ 이상

추상적인 개념만 공부하는 이론강의

🔻들으면 들을수록 이해가 안되는 강의

🚫왜, 어떤 상황에서 사용하는 지를 알려주지 않는 강의

전체 코드를 제공하지 않는 강의

체계적이지 못한 실험적 구성의 강의

📃설명이 부족한 강의

💸기본 3만원대를 넘어가는 수강료

VS

[2024] React Native로 앱 개발 입문부터 마스터까지

22,000₩, 시간당 1600원대

실제 프로젝트를 만들면서 배우는 실전강의

🔺기초적인 부분마저 지속적으로 상기시켜 뇌에 바로 저장되는 강의

💡WHY, WHEN을 확실히 알려주는 강의

📔전체 코드를 반드시 제공하는 강의

🪜기본기부터 확실히 마스터하는 체계적 강의

📚기초적인 이해부터 들어가는 설명을 하는 강의

👌시간당 1600원대, 치킨 한마리 값으로 강의 평생 소장

이 강의는 어떻게 구성되어 있나요?

섹션별로 강의를 간단하게 소개해 보았어요

섹션 1. INTRO

약 5분

- 미리보기 섹션
- 강의 구성 설명

✯✩✩✩✩
섹션 2. REACT NATIVE

약 31분

- 미리보기 섹션
- 변수, 함수 등 기본적인 코딩 지식 설명
- React Native 살펴보기

✯✯✩✩✩
섹션 3. 시작하기

약 1시간 40분

- 개발 환경 구성
- 앱 빌드 방법
- React Native 기본 컴포넌트 살펴보기

✯✯✯✩✩
섹션 4. 계산기 앱

약 1시간 6분

🧑‍💻 개발


🍌 JavaScript 기초

🏃‍➡️ Node.js create-expo-app 시작하기

🗂 파일 구조의 이해

🧐 Text, View 등 기본 컴포넌트

🔘 TouchableOpacity 버튼

💡 onPress & 함수 연계

🔐 useState 심화 활용

🤼‍♂ useState 기본값 완벽 활용

🤔 useState & if문 연계

🫗 null의 이해

🎛 매개변수의 활용

🔄️ 값 초기화 구현

📚 Array 생성 & map 연계

🎨 스타일링


React Native 기본 스타일링

💅 Styled components

📕 15개 이상 기본 스타일

핵심 정렬 문법

🔨 스타일을 이용한 UI 보완

✯✯✩✩✩
섹션 5. 번역 앱

약 50분

🧑‍💻 개발


🟦 TypeScript 기초

🏃‍➡️ community cli 시작하기

🪛 외부 라이브러리 도입

👇 React Native Picker

input 컴포넌트

사용자 입력값 저장

📚 리스트 변수 생성

boolean 형태의 변수

🪬 논리적 연산자 (&&) 활용

map 함수 활용

🟰 동일 언어 번역 방지 (삼항 연산자)

🎨 스타일링


🔲 모던한 카드 스타일링

💅 Styled-components

핵심 정렬 문법

🔨 스타일을 이용한 UI 보완

🫸margin 기본 스타일링

✯✯✯✯✩
섹션 6. 날씨 앱

약 2시간 4분

개발


🟦 TypeScript 심화

🪛 외부 API 도입 + API 개념

🔧 Fetch VS Axios

🛑 Node.js 개념

🚩 사용자 위치 권한 요청

🗺 사용자 위치 날씨

📷 Image 컴포넌트

🪧 API & RN swiper 연계

🛡 데이터 유효 검사 (삼항 연산자)

🔗 Linking 연결 버튼 추가

🌟 useEffect API 요청

스타일링


🔲 모던한 카드 스타일링

💅 Styled-components

핵심 정렬 문법

🔨 스타일을 이용한 UI 보완

🫸margin 기본 스타일링

🪂 padding 기본 스타일링

🔘 카드 버튼 스타일링

✯✯✯✯✯

섹션 7 • 9 • 10. 코인 앱

약 5시간 25분

개발


🟦 TypeScript 마스터

📇 자체 컴포넌트 생성 후 사용

📚 map 함수 & API 연계

미리보기(로딩 전) 컴포넌트

🔗 Linking 연결 & React Native Vector Icons 연계

🔖 데이터 유효 조건부 아이콘/뱃지 표시

🏃‍➡️ useNavigation을 통한 Bottom Tabs 등록 화면 이동

🪧 카드 뱃지 생성

📜 세로 ScrollView & 가로 FlatList 연결

🔍 검색 API를 통한 검색 기능 구현

스타일링


🔲 심화 카드 스타일링

💅 Styled components

핵심 정렬 문법

🔨 스타일을 이용한 UI 보완

🔍 검색창 스타일링

🧱 borderBottom을 통한 구분선 스타일링

적절한 fontWeight 설정

👤 트렌디한 프로필 탭 스타일링

🔗 센스있는 탭 바로가기 스타일링 연습

상태관리


📖 Redux의 구조 포함 완벽 이해

📜 효율적인 기본 틀 구성

🔧 효율적인 Slice 컴포넌트 사용

🫙 redux-persist를 통한 상태 저장 연습

🔌 redux-persist & MMKV 연계 연습

MMKV & Redux만을 사용한 상태관리

로그인


🔗 자체개발 로그인 버튼

각종 에러에 관한 반응 구현

🫙 로그인 시 사용자 정보 저장

🔌 저장된 사용자 정보 넘겨주기

👤 넘겨진 사용자 정보를 프로필 탭에 표시

🌉 로그인 여부에 따른 화면 표시

[특별 부록] 배포


🤖 Android 배포 과정

🍎 iOS 배포 과정

🐈‍⬛ Github 배포 과정

✯✯✯✩✩

섹션 8. Special. Redux 카운터 앱 개발

약 1시간 11분

학습 스킬

Redux 기초부터 심화까지

React-Redux

Redux-persist

React Native MMKV

섹션 11. 강의를 마치며

약 26분

마지막으로 이 강의를 마치며 여러분들과 함께 배웠던 것들을 되돌아보는 섹션입니다.

[부록] 이 강의를 수강하시고 난 뒤 어떤 길을 가야할 지 고민되시는 분들을 위해 테크트리 시리즈를 준비했습니다.

이 강의를 듣고 나면 이런 결과물을 만들 수 있어요🖼

계산기 앱 화면

P1. 계산기 앱

ㅣ 학습 스킬

  • Array 생성

  • map 함수

  • useState

  • switch

  • 자체개발 함수

  • 기본적인 Component

ㅣ Detail

  • 초기화 로직

  • 사칙연산 구현

  • 기본 스타일링의 느낌

  • Component의 밀려남 방지 등 보완작업

ㅣ 의의

  • 개발 & 스타일링 연계 기초를 가장 효율적으로 학습


  • 개발 과정에서 발생하는 여러가지 문제 제시 후 보완

  • JS의 기본 스킬을 통해 로직 구현

번역 앱 화면

P2. 번역 앱

ㅣ 학습 스킬

  • Picker

  • Card Component

  • Array & Map

  • TextInput

  • 외부 라이브러리 사용법

  • 삼항 연산자

ㅣ Detail

  • 사용하려는 라이브러리의 구성 이해

  • 사용자 입력값 추적

  • 동일 언어 선택 완벽 방지

  • margin, padding을 적절하게 활용한 스타일링

ㅣ 의의

  • 사용자 상호작용

  • 실용적인 앱 주제

  • 개발자의 의도를 100% 반영할 수 있는 개발

  • UI에서 가장 빈번하게 쓰이는 Card 디자인

날씨 앱 화면

P3. 날씨 앱

ㅣ 학습 스킬

  • GeoLocation

  • API 요청

  • 카드 스타일링

  • Linking

  • Swiper

  • Map

  • useEffect

  • 비동기 처리

  • Image

ㅣ Detail

  • 사용자의 위치의 날씨 표시


  • API 요청 시 필요한 데이터를 사용자에게서 획득

  • API 요청 결과에서 필요한 데이터만 골라 표시

  • useEffect 훅을 활용하여 가장 빠르게 API부터 요청

  • 더 알아보기 버튼을 통해 사용자의 상호작용 유도

ㅣ 의의

  • 실용적인 앱 주제

  • 사용자를 중심으로 작동하는 앱

  • 유용한 라이브러리인 Swiper 사용법 습득


코인 앱 화면

P4. 코인 앱

ㅣ 학습 스킬

ㅣ Details

  • API 완벽 활용

  • 각종 컴포넌트에 있는 외부 사이트 링크

  • 완벽한 카드 컴포넌트 스타일링

  • 검색 기능

ㅣ 의의

  • 어려운 난이도의 개발을 통해 확실한 실력 향상

  • 실무적인 스킬을 확실하게 잡고 가는 프로젝트

FAQ

#1. 코딩을 아예 모르는 사람도 강의를 들을 수 있나요?

네. 가능합니다. 이 강의는 React Native 한 분야에 심화적으로 중점을 둔 강의가 아닌, 기본적인 프로그래밍 관련 상식을 누구보다 쉽게 알려드리므로 코딩을 처음 접하시는 분들도 큰 어려움 없이 강의를 수강하실 수 있고, 코딩 공부를 조금이라도 해보셨다면 강의를 수월하게 들을 수 있으실겁니다.

#2. React.js를 미리 공부하고 강의를 들어야 할까요?

아닙니다. React Native 는 React가 베이스인 프레임워크이므로, 강의에는 React의 기초 문법 설명이 포함되어 있습니다. React를 전혀 모르셔도 이 강의를 통해 React와 React Native를 배워가실 수 있습니다.

#3. 이 강의는 업데이트 되나요?

네. 업데이트됩니다.
라이브러리 폐지, 강의 문제 등에 따라서 강의는 계속해서 업데이트됩니다!

최근 업데이트: 2025-02-27

수강 전 참고사항🧳

강의는 Windows 11 Home 환경으로 진행됩니다.
macOS를 사용하고 계셔도 강의를 문제없이 들으실 수 있습니다.

실습 환경🪓

  • 운영 체제 및 버전(OS): Windows 7 이상 / macOS 10 이상 / Linux

  • 사용 도구: Android Emulator, Android Studio, VSCode, Node.js, JDK

  • 필요 저장공간: 최소 50GB

학습 자료📜

  • 매 강의마다 강의 하단에 중요한 자료들이 있습니다! 만약 강의에서 설명이 생략되는 개발 용어가 등장하거나, 코드 등이 필요한 상황에서는 강의 하단을 참고해주시면 됩니다.


선수지식 및 유의사항

  • 이 강의는 React의 기본적인 문법들과 React Native를 배우는 강의입니다. React를 알고 계시면 강의를 수월하게 들으실 수 있으나, React를 모르셔도 문제없이 강의를 들으실 수 있습니다.

  • 이 강의는 2024년 12월~2025년 1월에 기획하고 녹화하였습니다.

  • 이 강의는 여러분들의 수강평 및 React Native 버전 업데이트에 따라 꾸준히 업데이트됩니다.


  • 실습하면서 강의를 들어주시면 감사하겠습니다.

  • 본 강의는 질의응답을 지원하며, 커뮤니티에 궁금한 것을 질문해주시면 됩니다.


  • 본 강의는 오직 강의를 결제한 수강자 본인만 수강해야만 하며,

    공유 및 2차 창작은 금지입니다.

  • 본 강의는 Windows(Android) 환경을 사용합니다.

  • macOS(iOS) 환경에서도 충분히 실습 가능합니다.

13시간을 투자하셔서 완전한 앱 개발자가 되어보세요.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 아이디어를 직접 앱으로 만들고 싶으신 분들

  • 앱 개발 분야에 뛰어들고 싶으신 분들

  • 나만의 앱을 만들어보고 싶으신 분들

  • 앱 개발자로 취업하고 싶으신 분들

  • 앱 개발을 빠르게 배워서 사이드 프로젝트를 만들고 싶으신 분들

  • 앱 개발 분야에 관심이 있으셨던 분들

선수 지식,
필요할까요?

  • React.js (선택)

  • Javascript (선택)

안녕하세요
정현우입니다.

260

수강생

13

수강평

33

답변

3.5

강의 평점

2

강의

Hello, World.

안녕하세요. 저는 5년째 앱 개발 분야에서 활동하고 있는 시니어 앱개발자 정현우라고 합니다 :)

FAQ

  1. 사용할 수 있는 스택:

    React Native, JavaScript, p

    ython, TypeScript, React.js

  2. 전문분야:

    React Native(앱 개발)

LECTURES

[독점]5개 프로젝트로 마스터하는 실전 React Native

더보기

커리큘럼

전체

119개 ∙ (13시간 26분)

해당 강의에서 제공:

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

수강평

전체

6개

2.2

6개의 수강평

  • David님의 프로필 이미지
    David

    수강평 1

    평균 평점 4.0

    4

    32% 수강 후 작성

    • 정현우
      지식공유자

      안녕하세요, David 수강생님! 리뉴얼 이후 강의에 대해 좋은 평점을 남겨주셔서 너무 감사드립니다. 강의 꼭 끝까지 수강해 주시면 감사하겠습니다 :)

  • 권동현님의 프로필 이미지
    권동현

    수강평 1

    평균 평점 5.0

    5

    52% 수강 후 작성

    영상 전체적으로 검수좀 다시해주세요.. 편집 이상한 부분 너무 많고 중간에 설명 없이 갑자기 코드가 추가되는 부분도 너무 많아요.

    • 정현우
      지식공유자

      안녕하세요, 지식공유자 정현우입니다. 댓글 작성 전 일단 영상 검토에 있어 미숙했던 점 진심으로 사과드립니다. 강의를 전체적으로 검토해보았을 때, 영상 편집 부분에 있어서 수강생분들의 빠른 수강에 중점을 두어 이른바 영상 컷편집의 실수가 잦은 부분이 있었던 것 같습니다. 이에 대해 정말 진심으로 사과드리는 바이고, 9월 이내 영상 전체 재검토 후 안정성 있는 영상을 위한 재편집 및 영상 내에 변화에 대한 모든 설명을 추가하여 강의를 수정할 계획입니다. 수강생님에게 있어서 부족한 강의를 내보낸 점에 대해 사과드립니다, 또한 부족한 강의임에도 불구하고 높은 평점을 주신 점에 매우 감사함을 표하고 싶습니다. 9월 이내로 빠른 시일 내에 강의를 수정하도록 하겠습니다. 감사합니다.

  • 지환님의 프로필 이미지
    지환

    수강평 5

    평균 평점 4.2

    1

    8% 수강 후 작성

    왜 사람들이 지 ㅈ대로 강의 찍었다고 하는지 알겠네 ㅋㅋ 처음 과정 다 생략하고 중간부터 니 혼자하면 어쩌라는거임ㅋㅋㅋ

    • 정현우
      지식공유자

      안녕하세요, 지환님. 혹시 처음 과정이라는 것이 어떤것인지 설명해 주실 수 있으실까요? React Native의 이론적인 내용이 빠져있다는 말씀이신건가요?? 더 분발하도록 하겠습니다.

  • nanyahoo님의 프로필 이미지
    nanyahoo

    수강평 8

    평균 평점 4.3

    1

    83% 수강 후 작성

    먼저 강의자 보다는 훨씬 미치지 못 하는 실력이기 때문에 강의를 우선 정독보다는 전체 강의를 퀵하게 이동도 하며 훑어보았습니다. 강의자에게는 싫은 부분이 되겠지만 모르는 사람 입장에서 말씀드려 보겠습니다. 1. 강의 소리에 문제가 있습니다. 2.화질은 그렇게 문제가 되지 않지만 react를 완전히 모르진 않치만 레퍼런스 프로젝트가 없고 또한 react native를 이번에 처음보는 사람으로서 따라 가기가 쉽지 않네요. 강의가 중간중간 뛰어 넘는 부분이 있습니다. 물론 저가 이해를 하지 못해서 그런 부분일수도 있지만 앞강의와 뒷강의 사이에 녹화되지 않는 부분이 분명있습니다. 그리고 강의도중에 obs 툴 체인지가 너무 많이 나오네요. 3.혼자서 하는 강의로 느껴 졌습니다. 시간이 촉박하셔서 그런것인지는 모르겠지만 보는이를 이해시키기 보다는 앞으로 진도 빼는 듯한 느낌을 받아서 조금 아쉽습니다. 결론적으로~ 얻은 부분은 react native가 이렇게 생겼구나 하는 것을 알게 되었습니다. 그리고 모바일앱들이 이런 것들을 사용하는 구나 하는 부분도 알게되었습니다. 후에 아~ 그때 그 강의에서 이런것을 보았는데 할 때 참고가 될 것 같습니다. 감사합니다.

    • 정현우
      지식공유자

      안녕하세요 nannyahoo님, 지식공유자 정현우입니다. 먼저 라이브러리 폐지로 인해 강의 리뉴얼 중 귀한 시간 내주셔서 아직 리뉴얼되지 않은 몇몇 강의까지 들어주시고 소중한 비판의 말씀 주셔서 진심으로 감사드리고 사죄드립니다. 디테일을 완벽하게 신경을 못 써드렸던 강의가 있었던 점에 진심으로 사과드리고, 틀린 말씀 해주신 것도 아니신게, 너무 성급하게 진도를 다뤘던 리뉴얼 이전 강의들이 잇고, 또 성급한 편집이 있었뎐 리뉴얼 이전 강의들도 있었습니다. 하지만 이번 리뉴얼 강의에서는 말씀해주신 문제 부분도 완벽히 개선된 강의입니다. 강의 리뉴얼은 이번주 일요일인 "9/22"에 완료될 예정이니, 참고 부탁드리면 감사하겠습니다. 만족스런 강의 제공 못해드려 송구스럽고 더 나은 리뉴얼 강의로 찾아뵙겠습니다.

  • fassam2님의 프로필 이미지
    fassam2

    수강평 4

    평균 평점 4.0

    1

    17% 수강 후 작성

    강의 덜 올려주신건가요? 계산기 앱이 갑자기 두번째시간이라 그러고 중간에 안드로이드 auto 실행해서 연동되는것도 아예모르는데 이게 머죠?

    • 정현우
      지식공유자

      안녕하세요, 지식공유자 정현우입니다. 죄송합니다😢.. 현재 라이브러리 폐지 건으로 강의를 완전히 리뉴얼 해야되는데 제 개인적인 스케줄이랑 리뉴얼 기간이랑 완벽히 겹치더라고요ㅜㅜ 그래서 지금 순차적으로 강의를 업로드 하는 중이고, 이 점 참고해주시면 감사하겠습니다. 일단 최대한 리뉴얼 기간을 타이트하게 잡고 진행하고 있으니 조금만 기다려주시면 감사하겠습니다. 죄송합니다 🙇‍♂️ 그리고 질문 주신 부분은 계산기 앱 섹션에서의 두번째 시간이라는 것으로 확인됩니다. 이 점 양해해주세요.

비슷한 강의

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

₩15,400

30%

₩22,000