React 배우기 - 코딩 강좌
React 배우기 - 코딩 강좌 — 휴대폰에서 JSX를 작성하고 실행하며 React 프로그래밍을 배워요
React 배우기 - 코딩 강좌는 약간의 HTML, CSS 또는 JavaScript를 알고 있는 초보자와 다른 프레임워크에서 전환하는 개발자에게 React 프로그래밍을 가르치는 무료로 시작할 수 있는 iOS 및 Android 앱이에요. 코드 편집기에서 JSX를 작성하고 Run을 탭하면 앱 안의 라이브 미리보기에서 컴포넌트가 렌더링되는 모습을 확인할 수 있어요. 88개 코스와 324개 레슨을 통해 첫 컴포넌트부터 hooks와 상태 관리, Next.js까지 배우며, 그 과정에서 20개의 가이드 프로젝트도 진행해요.
- 가격
- 무료, Pro 업그레이드
- 플랫폼
- iOS 및 Android
- 언어
- 22
- 연령 등급
- 4+
- 버전
- 82.6.1
- 필요 사항
- iOS 15.1 이상
- App Store
- 3.8 ★ (4)
컴포넌트는 서버가 아니라 휴대폰에서 렌더링돼요.
런타임인 ReactDOM과 Babel이 앱에 포함되어 있어서, 작성한 JSX가 기기에서 컴파일되고 표시돼요. 방금 만든 버튼을 탭하고 폼에 입력해 보면서 UI가 반응하는 모습을 확인할 수 있어요. 이런 피드백 순환 덕분에 hooks가 왜 필요한지 이해하기 시작해요.
어떤 앱인가요
React 배우기 - 코딩 강좌는 iOS 및 Android에서 이용할 수 있는 무료로 시작하는 React 코스로, 첫 JSX 줄부터 hooks, 상태 관리, React 19, Next.js App Router까지 88개 코스와 324개의 인터랙티브 레슨을 제공해요. 내장 편집기는 기기에서 코드를 컴파일하고 라이브 미리보기에서 컴포넌트를 렌더링하며, 20개의 가이드 프로젝트가 다음 단계로 넘어가기 전에 각 단계를 확인해 줘요. 이 앱은 독립적인 학습 앱이며 Meta 또는 Vercel과 제휴 관계가 없어요.
앱 내부 살펴보기
화면은 어떻게 보이나요
강좌
React 코스에서 다루는 내용
앱 자체 목록에서 가져온 88개 코스로, React를 처음 학습할 때 일반적으로 진행하는 순서에 맞춰 정렬되어 있습니다.
React 시작하기, JSX와 Props & Composition
Components, 선언형 UI, React가 DOM을 업데이트하는 방식부터 JSX 규칙, 목록 렌더링, props를 사용한 데이터 전달까지 다룹니다.
State, Events, Forms와 useRef
useState와 이벤트 처리, 유효성 검사가 적용된 controlled forms, 렌더링을 발생시키지 않는 값과 DOM에 접근할 때 사용하는 useRef를 다룹니다.
useEffect, 데이터 가져오기와 Custom Hooks
effects가 실행되는 시점, dependency arrays, API 호출의 로딩 및 오류 상태, 재사용 가능한 로직을 직접 만든 hooks로 추출하는 방법을 다룹니다.
Context, Redux Toolkit과 Zustand
Context와 useReducer로 prop drilling 없이 상태를 공유하는 방법부터, 대규모 앱을 위한 Redux Toolkit과 RTK Query, Zustand, Jotai까지 다룹니다.
Routing, React Query와 대규모 Forms
클라이언트 측 라우팅과 React Router 패턴, TanStack Query와 SWR을 사용한 서버 상태 관리, React Hook Form, 낙관적 UI를 다룹니다.
Performance, Testing과 TypeScript
렌더링과 메모이제이션, 코드 분할, 가상화 목록, React Testing Library를 사용한 테스트, 컴포넌트와 hooks에 타입을 지정하는 방법을 다룹니다.
React 19, Server Components와 Next.js
Server Components와 Actions, SSR과 hydration부터 데이터 가져오기, 캐싱, 인증을 포함한 Next.js App Router까지 다룹니다.
어떻게 작동하나요
레슨 진행 방식
레슨은 짧은 개념 설명 직후에 직접 작성하고 실행하는 코드가 이어지는 방식이라, 개념과 결과를 같은 화면에서 바로 확인할 수 있어요.
개념 하나 읽기
학습 경로에서 코스를 열고 state 업데이트 방법이나 목록에 keys가 필요한 이유 같은 짧은 레슨을 읽어요. 코스 개요에서 무료로 제공되는 레슨을 표시하므로, 결제하기 전에 학습 형식을 확인할 수 있어요.
JSX를 작성하고 Run 탭하기
코드 편집기에 컴포넌트를 입력하고 실행해요. 라이브 미리보기가 앱 안에서 컴포넌트를 렌더링하므로 버튼을 클릭하고 필드에 입력하면서 코드가 어떻게 작동하는지 확인할 수 있어요.
확인한 다음, 이어서 만들어 보기
퀴즈, 코딩 미션, 가이드 프로젝트로 개념을 제대로 이해했는지 확인할 수 있고, 읽기 어려운 hook이나 오류가 있으면 AI 멘토가 설명해 줘요. Bug Hunt와 UI Match로 개념을 한 번 더 연습할 수 있어요.
무엇이 들어 있나요
앱에 포함된 내용
88
코스, 324개 레슨
JSX, props, state부터 custom hooks, forms, Context, Redux Toolkit을 거쳐 Server Components, SSR, Next.js App Router까지 A1부터 C1 수준별로 구성되어 있어요.
Live
라이브 미리보기를 제공하는 편집기
앱 안에서 컴포넌트를 렌더링하는 JSX 전용 코드 편집기예요. 여러 파일로 구성된 프로젝트에서는 실제 앱을 만드는 방식처럼 한 컴포넌트를 다른 컴포넌트로 import할 수 있어요.
20
가이드 프로젝트
좋아요 버튼, 프로필 카드, 팁 계산기, 퀴즈 게임, 장바구니 등을 한 번에 한 단계씩 만들어 보세요. 각 단계에서 컴포넌트가 실제로 작동하는지 확인해 줘요.
Lab
Hooks Lab과 props 조절 도구
상태가 바뀌고 다시 렌더링되는 모든 과정을 실시간으로 확인하고, 슬라이더로 prop을 변경해 컴포넌트가 업데이트되는 모습을 볼 수 있어요. 렌더링 프로파일러와 상태 타임라인은 Pro에 포함돼요.
30
코딩 미션
hooks, 렌더링, forms, context, 성능을 주제로 쉬움, 보통, 어려움 난이도의 미션을 제공해요. 간격 반복 학습 방식의 UI Match, Bug Hunt, Component Recall도 포함돼요.
AI
AI 멘토
설명을 요청하거나 AI에게 코드를 검토하고 수정 방법을 제안해 달라고 하거나, 어떤 주제든 맞춤 레슨을 생성해 달라고 할 수 있어요. 멘토와 인증서 시험은 Pro에 포함돼요.
배경
React를 작성하려면 실제로 무엇을 이해해야 하고, 어떤 순서로 배워야 할까요?
React는 데이터가 바뀌면 스스로 다시 그려지는 작고 재사용 가능한 컴포넌트로 사용자 인터페이스를 만드는 JavaScript 라이브러리예요. 대부분의 초보자는 문법보다 그 바탕에 있는 개념에서 막혀요. 렌더링이 무엇인지, 무엇이 상태에 해당하는지, effect가 언제 실행되는지를 이해해야 하죠. 각 개념을 화면에서 바로 테스트할 수 있는 방식으로 순서대로 배우면, 한꺼번에 읽는 것보다 더 빠르게 익힐 수 있어요.
컴포넌트와 props재사용의 기본 단위
컴포넌트는 인터페이스의 일부를 반환하는 함수이고, props는 부모 컴포넌트로부터 전달받는 입력값이에요. 데이터가 props를 통해 아래로 흐르기 때문에 컴포넌트가 무엇을 그릴지 읽고 예측할 수 있어요.
State시간에 따라 바뀌는 것
State는 필드의 텍스트나 메뉴가 열려 있는지 여부처럼 컴포넌트가 렌더링 사이에 기억하는 데이터예요. State를 업데이트하면 새로운 렌더링이 예약되고, 이것이 거의 모든 인터랙티브 화면의 기반이 되는 메커니즘이에요.
Hooks와 effects초보자가 막히는 부분
useState, useRef, useReducer 같은 Hooks를 사용하면 컴포넌트가 상태를 보유하고 DOM에 접근할 수 있어요. useEffect는 렌더링 후에 코드를 실행하며, 잘못된 dependency array는 무한 루프와 오래된 값이 생기는 가장 흔한 원인이에요.
렌더링과 다시 렌더링앱이 느리게 느껴지는 이유
컴포넌트의 state나 props가 바뀌면 다시 렌더링되고, 그 안에 포함된 컴포넌트도 마찬가지예요. 무엇이 렌더링을 유발했는지 파악하는 것이 memoisation부터 code splitting까지 모든 성능 개선의 출발점이에요.
나에게 잘 맞는지
누구에게 적합하고, 누구에게는 적합하지 않은지
다음과 같은 분께 잘 맞아요
- HTML, CSS 또는 JavaScript를 조금 알고 React를 제대로 시작하고 싶은 분
- 다른 framework를 사용하는 개발자로서 React로 빠르게 전환해야 하는 분
- 코드가 실행되는 순간 결과가 화면에 나타날 때 가장 잘 배우는 분
- 작은 프로젝트로 포트폴리오를 만들고 단계별 안내를 받고 싶은 분
- 프론트엔드 면접을 준비하며 연습할 질문이 필요한 분
다음과 같은 경우에는 적합하지 않아요
- JavaScript를 한 번도 본 적이 없는 분. 이 코스는 JavaScript를 조금 알고 있다고 가정합니다.
- 노트북이 필요한 전체 프로젝트를 만들고 배포하려는 분
- 모든 기능이 무료이길 기대하는 분. 첫 번째 코스만 무료이며 나머지는 Pro에서 잠금 해제됩니다.
- React 팀의 공식 코스를 원하는 분. 이 앱은 독립적으로 제작된 앱입니다.
질문
자주 묻는 질문
휴대폰으로 React 프로그래밍을 배울 수 있나요?
핵심 아이디어, 컴포넌트, props, state, hooks는 작성한 코드를 실행할 수 있다면 휴대폰으로도 배울 수 있습니다. React 배우기 - 코딩 강좌에는 ReactDOM과 Babel이 포함되어 있어 기기에서 JSX를 실시간 미리보기로 렌더링할 수 있습니다. 더 큰 프로젝트를 만들고 배포할 때는 노트북이 유용합니다.
React를 배우기 전에 JavaScript를 알아야 하나요?
조금 알고 있으면 도움이 됩니다. React 배우기 - 코딩 강좌는 변수, 함수, 배열과 같은 HTML, CSS 또는 JavaScript 지식을 어느 정도 갖춘 사람을 대상으로 합니다. JavaScript를 한 번도 작성해 본 적이 없다면 먼저 JavaScript를 배우세요. React 수업에서는 JavaScript를 읽을 수 있다고 가정하기 때문입니다.
props와 state의 차이는 무엇인가요?
Props는 부모 컴포넌트가 전달하는 입력값이며 변경해서는 안 되고, state는 컴포넌트가 소유하며 시간에 따라 업데이트하는 데이터입니다. React 배우기 - 코딩 강좌의 Hooks Lab에서는 각 state 변경과 재렌더링을 확인할 수 있고, props knobs에서는 슬라이더로 prop을 변경할 수 있습니다.
앱에서 useEffect 같은 hooks를 가르치나요?
네. React 배우기 - 코딩 강좌에서는 useState, useEffect, useRef, useReducer, custom hooks, useLayoutEffect를 다룹니다. effects가 실행되는 시점, dependency arrays, 흔히 발생하는 실수를 별도의 수업에서 자세히 배우며, 망가진 컴포넌트에서 버그를 찾는 Bug Hunt 모드도 제공됩니다.
React는 React Native와 같은 것인가요? 앱에서 둘 다 가르치나요?
아니요. React는 사용자 인터페이스를 구축하기 위한 library이고, React Native는 같은 개념을 사용해 모바일 앱을 만듭니다. React 배우기 - 코딩 강좌에서는 먼저 웹용 React를 가르치며, React Native fundamentals 코스를 통해 웹 개발자가 이러한 기술을 모바일에 적용할 수 있도록 돕습니다.
React 배우기 - 코딩 강좌에서 Next.js와 React 19도 다루나요?
네. 코스에서 React 19 기능과 Server Components, SSR과 hydration, streaming, 데이터 가져오기, 캐싱, 인증을 포함한 Next.js App Router를 다룹니다. 웹 개발자를 위한 React Native fundamentals 코스도 제공됩니다.
어떤 종류의 프로젝트를 만들 수 있나요?
작은 단계부터 하나씩 완성해 가는 guided projects 20개가 있습니다. 좋아요 버튼, 프로필 카드, 팁 계산기, 퀴즈 게임, 스톱워치, 회원가입 양식, 장바구니, 이미지 캐러셀, 페이지가 매겨진 목록, todo 앱을 만들 수 있습니다. 각 단계마다 다음으로 넘어가기 전에 컴포넌트가 제대로 작동하는지 확인합니다.
React 배우기 - 코딩 강좌는 무료인가요?
다운로드는 무료입니다. 무료 버전에는 첫 번째 코스, guided project 1개, coding missions 2개, 실시간 미리보기를 지원하는 코드 에디터, Hooks Lab, props knobs, Bug Hunt, 하루 3회의 UI Match 확인 기능이 포함되며 광고가 표시됩니다. Pro에서는 모든 코스, 프로젝트, missions, AI mentor, render profiler, certificate exam을 잠금 해제하고 광고를 제거합니다.
수료증이나 면접 준비 기능이 있나요?
최종 시험에 합격하면 공유 가능한 수료증을 받을 수 있으며, 수료증은 Pro에 포함됩니다. 면접 준비를 위해 핵심 개념을 연습할 수 있는 면접 질문 50개, 50문항 퀴즈, 치트 시트가 제공됩니다.
코드는 서버에서 실행되나요?
아니요. runtime이 앱에 포함되어 있어 코드가 기기에서 컴파일되고 렌더링됩니다. 따라서 직접 만든 버튼을 탭하고 미리보기 안에서 UI가 반응하는 모습을 확인할 수 있습니다.
어떤 언어와 플랫폼을 지원하나요?
React 배우기 - 코딩 강좌는 iOS와 Android에서 실행되며 22개 언어로 제공돼요. 4+ 등급이며 iPhone에서 iOS 15.1 이상이 필요해요.
시작하기
오늘 첫 컴포넌트를 렌더링해 보세요
iOS와 Android에서 22개 언어로 무료로 시작할 수 있어요.
CoddyKit의 다른 앱
iOS 및 Android에서 이용할 수 있어요.